web-dev-qa-db-fra.com

Inclure jQuery dans la console JavaScript

Existe-t-il un moyen simple d’inclure jQuery dans la console JavaScript de Chrome pour les sites qui ne l’utilisent pas? Par exemple, sur un site Web, j'aimerais connaître 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?

javascriptjquery
661
mrtsherman

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

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/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.

Mettre à jour:

Rendre le meilleur meilleur, créer un signet le rend vraiment pratique, faisons-le, et un petit retour est super aussi:

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

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

Ci-dessous 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 officielle du CDN jQuery est utilisée, n’hésitez pas à utiliser votre propre version/CDN.

1225
jondavidjohn

Exécuter ceci dans votre console

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

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

193
genesis

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.

63
meder omuraliev

Copiez http://code.jquery.com/jquery-latest.min.js le contenu du fichier et collez-le dans la console. Fonctionne parfaitement.

62
Ruslanas Balčiūnas

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

Nom: Include 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 ajoutez-le à la barre d'outils de Chrome ou de Firefox pour qu'au lieu de coller le script encore et encore, nous puissions simplement cliquer sur le bookmarklet.

Screenshot of bookmark

28
manish_s

Je suis une rebelle.

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

Pour votre exemple:

$$('element').length

($$ est un alias de document.querySelectorAll dans la 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 le DOM fonctionne ne ferait de mal à personne, cela ne ferait qu'augmenter votre niveau de jQuery (oui, en apprendre davantage sur le javascript vous rendra meilleur avec jQuery).

22
Florian Margaine

Je viens de faire un bookmarklet jQuery 3.2.1 avec gestion des erreurs (ne charge que si pas déjà chargé, détecte la version s'il est déjà chargé, message d'erreur si erreur lors du chargement). Testé sous Chrome 27. Il n'y a aucune raison d'utiliser "l'ancien" jQuery 1.9.1 sur un navigateur Chrome, car jQuery 2.0 est compatible API avec 1.9 .

Il suffit d’exécuter ce qui suit dans la console pour développeurs de Chrome ou faites-le glisser dans la 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

12
fnkr

La réponse top, par jondavidjohn , est bonne, mais j'aimerais la modifier pour répondre à quelques points:

  • Plusieurs navigateurs émettent un avertissement lors du chargement d'un script de http vers une page sur https.
  • Changer simplement le protocole de jquery.com en https donne lieu à un avertissement si vous l'essayez directement à partir de 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ù, dans la console, je veux toujours le plus récent.

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();
8
hippietrail

Per 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 également faire avec les autres méthodes), mais cela fonctionne.

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

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

C'est assez facile à faire manuellement, comme l'expliquent les autres réponses. Mais il y a aussi le plugin jQuerify .

5
Ken Redler

FWIW, Firebug intègre la commande spéciale include 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

5
fflorent

cette réponse est basée sur @genesis. Au début, j’ai essayé la version de marque-pages @jondavidjohn, mais elle ne fonctionne pas. Je la remplace par ceci (ajoutez-la à votre marque-page):

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é en chrome, mais fonctionne dans firefox, et pas testé dans un environnement conflictuel.

3
whale_steward

Une des manières les plus courtes serait simplement 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);
2
RegarBoy

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

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

1
BrianFreud

Si vous souhaitez utiliser fréquemment jQuery à 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. Ecrivez un simple script utilisateur avec une fonction use comme ceci:

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;
    }
}
1
Asif Mallik

À partir de chrome v.70, jQuery est chargé via le source et prêt lorsque votre page l’est. Il suffit de taper directement dans la console du développeur et le script est analysé.

0
gondwe

one-liner intuitif

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

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

0
plhn

Solution clé en main:

Mettez votre code dans la fonction yourCode_here. Et empêchez le 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>");
}

0
A-312

Voici le 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 signet (dans Chrome, cliquez avec le bouton droit de la souris sur Barre de signet , Ajouter une page ... ) et collez ce code sous forme d'URL.

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

Avant:

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

Après:

$()
[]
0
kenorb