Existe-t-il un moyen simple d'inclure jQuery dans la console JavaScript Chrome pour les sites qui ne l'utilisent pas? Par exemple, sur un site Web, j'aimerais obtenir le nombre de lignes d'un tableau. Je sais que c'est vraiment facile avec jQuery.

$('element').length;

Le site n'utilise pas jQuery. Puis-je l'ajouter à partir de la ligne de commande?

Exécutez ceci dans la console JavaScript de votre navigateur, alors jQuery devrait être disponible ...

var jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

REMARQUE: si le site contient des scripts en conflit avec jQuery (autres bibliothèques, etc.), vous pouvez toujours rencontrer des problèmes.

Mise à jour:

Améliorer le meilleur, créer un signet le rend vraiment pratique, faisons-le, et un petit retour est aussi très bien:

1. Cliquez avec le bouton droit sur la barre de signets, puis cliquez sur Ajouter une page
2. Nommez-le comme vous le souhaitez, par exemple Injecter jQuery, et utilisez la ligne suivante pour URL:

javascript: (fonction (e, s) {e.src = s; e.onload = function () {jQuery.noConflict (); console.log ('jQuery injected')}; document.head.appendChild (e); }) (document.createElement ('script'), '// code.jquery.com/jquery-latest.min.js')

Voici le code formaté:

javascript: (function(e, s) {
    e.src = s;
    e.onload = function() {
        jQuery.noConflict();
        console.log('jQuery injected');
    };
    document.head.appendChild(e);
})(document.createElement('script'), '//code.jquery.com/jquery-latest.min.js')

Ici, l'URL jQuery CDN officielle est utilisée, n'hésitez pas à utiliser votre propre CDN / version.

Exécutez ceci dans votre console

var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0].appendChild(script);

Il crée une nouvelle balise de script, la remplit de jQuery et ajoute à la tête.

Copiez tout depuis:
https://code.jquery.com/jquery-3.4.1.min.js

Et collez-le dans la console. Marche parfaitement.

Utilisez le livret jQueryify:

http://marklets.com/jQuerify.aspx

Au lieu de copier-coller le code dans les autres réponses, cela en fera un signet cliquable.

Ajout à la réponse de @ jondavidjohn, nous pouvons également le définir comme un signet avec URL comme code javascript.

Nom: Inclure Jquery

URL:

javascript:var jq = document.createElement('script');jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(jq); setTimeout(function() {jQuery.noConflict(); console.log('jQuery loaded'); }, 1000);void(0);

puis l'ajouter à la barre d'outils de Chrome ou Firefox afin qu'au lieu de coller le script encore et encore, nous puissions simplement cliquer sur le bookmarklet.

Je suis une rebelle.

Solution: n'utilisez pas jQuery. jQuery est une bibliothèque pour résumer les incohérences DOM à travers les navigateurs. Puisque vous êtes dans votre propre console, vous n'avez pas besoin de ce type d'abstraction.

Pour votre exemple:

$$('element').length

( $$est un alias de document.querySelectorAllla console.)

Pour tout autre exemple: je suis sûr que je peux trouver n'importe quoi. Surtout si vous utilisez un navigateur moderne (Chrome, FF, Safari, Opera).

De plus, savoir comment fonctionne le DOM ne nuirait à personne, cela ne ferait qu'augmenter votre niveau de jQuery (oui, en savoir plus sur javascript vous rend meilleur chez jQuery).

Je viens de créer un bookmarklet jQuery 3.2.1 avec gestion des erreurs (charger uniquement s'il n'est pas déjà chargé, détecter la version s'il est déjà chargé, message d'erreur si erreur lors du chargement). Testé dans Chrome 27. Il n'y a aucune raison d'utiliser le "vieux" jQuery 1.9.1 sur le navigateur Chrome car jQuery 2.0 est compatible avec l'API avec 1.9 .

Exécutez simplement ce qui suit dans la console développeur de Chrome ou glissez-déposez-le dans votre barre de favoris :

javascript:((function(){if(typeof(jQuery)=="undefined"){window.jQuery="loading";var a=document.createElement("script");a.type="text/javascript";a.src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function(){console.log("jQuery "+jQuery.fn.jquery+" loaded successfully.")};a.onerror=function(){delete jQuery;alert("Error while loading jQuery!")};document.getElementsByTagName("head")[0].appendChild(a)}else{if(typeof(jQuery)=="function"){alert("jQuery ("+jQuery.fn.jquery+") is already loaded!")}else{alert("jQuery is already loading...")}}})())

Le code source lisible est disponible ici

La meilleure réponse, par jondavidjohn, est bonne mais je voudrais la modifier pour répondre à quelques points:

• Divers navigateurs émettent un avertissement lors du chargement d'un script depuis httpune page surhttps .
• Le simple fait de modifier jquery.comle protocole de httpsaboutit à un avertissement si vous l'essayez directement depuis la barre d'URL du navigateur:This is probably not the site you are looking for!
• J'aime utiliser le CDN de Google lorsque j'utilise la console pour tester des sites Google tels que Gmail.

Mon seul problème est que je dois inclure un numéro de version où je veux vraiment toujours la dernière dans la console.

var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();

Par cette réponse :

fetch('https://code.jquery.com/jquery-latest.min.js').then(r => r.text()).then(r => eval(r))

Pour une raison quelconque, je dois l'exécuter deux fois pour obtenir le nouveau «$» (ce que je dois faire avec les autres méthodes également), mais cela fonctionne.

C'est l'équivalent si votre navigateur n'est pas aussi moderne:

fetch('http://code.jquery.com/jquery-latest.min.js').then(function(r){return r.text()}).then(function(r){eval(r)})

Il est assez facile de le faire manuellement, comme l'expliquent les autres réponses. Mais il y a aussi le plug-in jQuerify .

FWIW, Firebug intègre la includecommande spéciale et jquery est aliasé par défaut: https://getfirebug.com/wiki/index.php/Include

Donc dans votre cas, il vous suffit de taper:

include("jquery");

Florent

cette réponse basée sur la réponse @genesis, j'ai d'abord essayé la version du signet @jondavidjohn, et cela ne fonctionne pas, alors je la change en ceci (ajoutez-la à votre signet):

javascript:(function(){var s = document.createElement('script');s.src = "//code.jquery.com/jquery-2.2.4.min.js";document.getElementsByTagName('head')[0].appendChild(s);console.log('jquery loaded')}());

mots de prudence, n'est pas testé dans Chrome mais fonctionne dans Firefox, et non testé dans un environnement de conflit.

L'un des moyens les plus courts serait de copier-coller le code ci-dessous sur la console.

var jquery = document.createElement('script'); 
jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.head.appendChild(jquery);

Si vous cherchez à le faire pour un script utilisateur, j'ai écrit ceci: http://userscripts.org/scripts/show/123588

Cela vous permettra d'inclure jQuery, ainsi que l'interface utilisateur et tous les plugins que vous souhaitez. Je l'utilise sur un site qui a 1.5.1 et aucune interface utilisateur; ce script me donne 1.7.1 à la place, plus l'interface utilisateur, et aucun conflit dans Chrome ou FF. Je n'ai pas testé Opera moi-même, mais d'autres m'ont dit que cela fonctionnait aussi pour eux, donc cela devrait être plutôt une solution complète de script utilisateur multi-navigateur, si c'est pour cela que vous devez le faire.

Voici un code alternatif:

javascript:(function() {var url = '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; var n=document.createElement('script');n.setAttribute('language','JavaScript');n.setAttribute('src',url+'?rand='+new Date().getTime());document.body.appendChild(n);})();

qui peut être collé directement dans la console ou créer une nouvelle page de signets (dans Chrome, cliquez avec le bouton droit sur la barre de signets , Ajouter une page ... ) et collez ce code comme URL.

Pour tester si cela a fonctionné, voir ci-dessous.

Avant:

$()
Uncaught TypeError: $ is not a function(…)

Après:

$()
[]

Si vous souhaitez utiliser jQuery fréquemment à partir de la console, vous pouvez facilement écrire un script utilisateur. Tout d'abord, installez Tampermonkey si vous êtes sur Chrome et Greasemonkey si vous êtes sur Firefox. Écrivez un simple script utilisateur avec une fonction d'utilisation comme celle-ci:

var scripts = [];

function use(libname) {
    var src;
    if (scripts.indexOf(libname) == -1) {
        switch (libname.toLowerCase()) {
            case "jquery":
                src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
                break;
            case "angularjs":
                src = "//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js";
                break;
        }
    } else {
        console.log("Library already in use.");
        return;
    }
    if (src) {
        scripts.append(libname);
        var script = document.createElement("script");
        script.src = src;
        document.body.appendChild(scr);
    } else {
        console.log("Invalid Library.");
        return;
    }
}

Solution clé en main:

Mettez votre code en yourCode_herefonction. Et empêchez HTML sans balise HEAD.

(function(head) {
  var jq = document.createElement('script');
  jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";
  ((head && head[0]) || document.firstChild).appendChild(jq);
})(document.getElementsByTagName('head'));

function jQueryReady() {
  if (window.jQuery) {
    jQuery.noConflict();
    yourCode_here(jQuery);
  } else {
    setTimeout(jQueryReady, 100);
  }
}

jQueryReady();

function yourCode_here($) {
  console.log("OK");
  $("body").html("<h1>Hello world !</h1>");
}

Les navigateurs modernes (testés sur Chrome, Firefox, Safari) implémentent certaines fonctions d' aide en utilisant le signe dollar $qui sont très similaires à jQuery (si le site Web ne définit pas quelque chose en utilisantwindow.$ ).

Ces utilitaires sont très utiles pour sélectionner des éléments dans le DOM et les modifier.

Documents: Chrome , Firefox

doublure intuitive

document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.1.1.min.js"%3E%3C/script%3E’))

Vous pouvez changer l' srcadresse.
J'ai fait référence à ReferenceError: Impossible de trouver la variable: jQuery