Inclua jQuery no Console JavaScript

Existe uma maneira fácil de include o jQuery no console do Chrome JavaScript para sites que não o usam? Por exemplo, em um site, gostaria de obter o número de linhas em uma tabela. Eu sei que isso é realmente fácil com jQuery.

$('element').length; 

O site não usa o jQuery. Posso adicioná-lo a partir da linha de comando?

Execute isso no console JavaScript do seu navegador e, em seguida, o jQuery deve estar disponível …

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

OBSERVAÇÃO: se o site tiver scripts conflitantes com o jQuery (outras libs, etc.), você ainda poderá ter problemas.

Atualizar:

Fazendo o melhor melhor, criando um Bookmark torna muito conveniente, vamos fazê-lo, e um pouco de feedback é ótimo também:

  1. Clique com o botão direito na barra de marcadores e clique em Adicionar página
  2. Nomeie como quiser, por exemplo, Inject jQuery, e use a seguinte linha para URL:

javascript: (function (e, s) {e.src = s; e.onload = function () {jQuery.noConflict (); console.log (‘injeção de jQuery’)}; document.head.appendChild (e); }) (document.createElement (‘script’), ‘// code.jquery.com/jquery-latest.min.js’)

Abaixo está o código formatado:

 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') 

Aqui a URL oficial do CDN do jQuery é usada, sinta-se livre para usar seu próprio CDN / versão.

Execute isso no seu console

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

Ele cria uma nova tag de script, preenche-a com jQuery e acrescenta à cabeça

Use o livreto jQueryify:

http://marklets.com/jQuerify.aspx

Em vez de copiar o código nas outras respostas, isso tornará um marcador clicável.

Copie o conteúdo do arquivo http://code.jquery.com/jquery-latest.min.js e cole-o no console. Funciona perfeito.

Adicionando a resposta do @jondavidjohn, também podemos configurá-lo como um marcador com URL como o código javascript.

Nome: Incluir 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); 

e, em seguida, adicione-o à barra de ferramentas do Chrome ou do Firefox para que, em vez de colar o script várias vezes, possamos clicar no bookmarklet.

Captura de tela do marcador

Eu sou rebelde.

Solução: não use jQuery. O jQuery é uma biblioteca para abstrair as inconsistências do DOM entre os navegadores. Já que você está no seu próprio console, você não precisa desse tipo de abstração.

Por exemplo:

 $$('element').length 

( $$ é um alias para document.querySelectorAll no console.)

Para qualquer outro exemplo: tenho certeza que posso encontrar qualquer coisa. Especialmente se você estiver usando um navegador moderno (Chrome, FF, Safari, Opera).

Além disso, saber como o DOM funciona não faria mal a ninguém, apenas aumentaria o seu nível de jQuery (sim, aprender mais sobre o javascript torna-o melhor no jQuery).

Acabei de fazer um bookmarklet 3.2.1 jQuery com tratamento de erros (apenas carregar se não já carregado, detectar versão se já carregado, mensagem de erro se o erro durante o carregamento). Testado no Chrome 27. Não há razão para usar o “antigo” jQuery 1.9.1 no navegador Chrome, pois o jQuery 2.0 é compatível com API com o 1.9 .

Basta executar o seguinte no console do desenvolvedor do Google Chrome ou arrastá-lo e soltá-lo na barra de favoritos :

 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...")}}})()) 

Código-fonte legível está disponível aqui

A principal resposta, por jondavidjohn, é boa, mas eu gostaria de ajustá-la para abordar alguns pontos:

  • Vários navegadores emitem um aviso ao carregar um script de http em uma página em https .
  • Apenas alterar o protocolo do jquery.com para https resulta em um aviso se você tentar diretamente da barra de endereços do navegador: This is probably not the site you are looking for!
  • Eu gosto de usar o CDN do Google quando estou usando o console para experimentar sites do Google, como o Gmail.

Meu único problema é que eu tenho que include um número de versão onde no console eu realmente sempre quero o mais recente.

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

É muito fácil fazer isso manualmente, como as outras respostas explicam. Mas também há o plug-in jQuerify .

FWIW, o Firebug incorpora o comando include special e jquery é alias por padrão: https://getfirebug.com/wiki/index.php/Include

Então, no seu caso, você só precisa digitar:

 include("jquery"); 

Florent

Por esta resposta :

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

Por alguma razão eu tenho que executá-lo duas vezes para obter o novo ‘$’ (que eu tenho que fazer com os outros methods também), mas funciona.

Isto é o equivalente se o seu navegador não é tão moderno:

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

esta resposta com base na resposta @genesis, no começo eu tentei a versão de bookmark @jondavidjohn, e não está funcionando, então eu mudei para isso (adicioná-lo ao seu favorito):

 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')}()); 

palavras de caucanvas, não é testado no chrome mas funciona no firefox, e não testado em ambiente de conflito.

Uma das maneiras mais curtas seria copiar copiando o código abaixo para o 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); 

Se você está procurando fazer isso para um userscript, eu escrevi isto: http://userscripts.org/scripts/show/123588

Ele permitirá que você inclua o jQuery, além da interface do usuário e de todos os plug-ins que desejar. Estou usando em um site que tenha 1.5.1 e sem interface do usuário; esse script me fornece 1.7.1, além da interface do usuário, e não há conflitos no Chrome ou no FF. Eu mesmo não testei o Opera, mas outros me disseram que também funcionou para eles, então isso deve ser uma solução completa de userscript entre navegadores, se é para isso que você precisa fazer isso.

Se você quiser usar o jQuery frequentemente a partir do console, você pode facilmente escrever um userscript. Primeiro, instale o Tampermonkey se você estiver no Chrome e no Greasemonkey se estiver no Firefox. Escreva um userscript simples com uma function de uso como esta:

 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; } } 

Aqui está o código alternativo:

 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);})(); 

que pode ser colado diretamente no console ou criar uma nova página de favoritos (no Chrome, clique com o botão direito do mouse na barra de marcadores , adicionar página … ) e cole esse código como URL.

Para testar se isso funcionou, veja abaixo.

Antes:

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

Depois de:

 $() [] 

intuitivo one-liner

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

Você pode alterar o endereço src .
Eu me referi a ReferenceError: Não consigo encontrar a variável: jQuery