Come includere il file JavaScript o la libreria nella console di Chrome?

Esiste un modo più semplice (forse nativo?) Di includere un file di script esterno nel browser Google Chrome?

Attualmente lo sto facendo in questo modo:

document.head.innerHTML += '<script src="http://example.com/file.js"></script>';

appendChild() è un modo più nativo:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);

Usi un framework AJAX? Usando jQuery sarebbe:

$.getScript('script.js');

Se non si utilizza alcun framework, vedere la risposta di Harmen.

(Forse non vale la pena usare jQuery solo per fare questa semplice cosa ( o forse lo è ) ma se lo hai già caricato, potresti anche usarlo. Ho visto siti Web che hanno caricato jQuery, ad esempio con Bootstrap ma comunque usa l'API DOM direttamente in un modo che non è sempre portatile, invece di usare jQuery già caricato per questo, e molte persone non sono consapevoli del fatto che persino getElementById()non funziona in modo coerente su tutti i browser - vedi questa risposta per i dettagli. )

AGGIORNARE:

Sono passati anni da quando ho scritto questa risposta e penso che valga la pena sottolineare che oggi puoi usare:

• SystemJS
• ModuleLoader
• jspm.io

per caricare gli script in modo dinamico. Questi possono essere rilevanti per le persone che leggono questa domanda.

Vedi anche: The Fluent 2014 di Guy Bedford: Flussi di lavoro pratici per i moduli ES6 .

Nei browser moderni è possibile utilizzare il recupero per scaricare risorse ( documenti Mozilla ) e quindi eval per eseguirlo.

Ad esempio per scaricare Angular1 è necessario digitare:

fetch('https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js')
    .then(response => response.text())
    .then(text => eval(text))
    .then(() => { /* now you can use your library */ })

In Chrome, l'opzione migliore potrebbe essere la scheda Snippet in Fonti negli Strumenti per sviluppatori.

Ti permetterà di scrivere ed eseguire il codice, ad esempio, in una pagina vuota di about :.

Maggiori informazioni qui: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

Come seguito alla risposta di @ maciej-bukowski sopra ^^^ , nei browser moderni a partire da ora (primavera 2017) che supportano asincronizzazione / attendi che puoi caricare come segue. In questo esempio viene caricata la libreria load html2canvas:

async function loadScript(url) {
  let response = await fetch(url);
  let script = await response.text();
  eval(script);
}

let scriptUrl = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js'
loadScript(scriptUrl);

Se esegui lo snippet e quindi apri la console del browser, dovresti vedere ora la funzione html2canvas ().

var el = document.createElement("script"),
loaded = false;
el.onload = el.onreadystatechange = function () {
  if ((el.readyState && el.readyState !== "complete" && el.readyState !== "loaded") || loaded) {
    return false;
  }
  el.onload = el.onreadystatechange = null;
  loaded = true;
  // done!
};
el.async = true;
el.src = path;
var hhead = document.getElementsByTagName('head')[0];
hhead.insertBefore(el, hhead.firstChild);

Se qualcuno non riesce a caricarsi perché lo script hes viola la "Politica di sicurezza dei contenuti" di script-src o "perché non è consentito un controllo non sicuro", consiglierò di utilizzare il mio modulo-iniettore piuttosto piccolo come frammento di dev-tools, allora sarai in grado di caricare in questo modo:

imports('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js')
  .then(()=>alert(`today is ${moment().format('dddd')}`));

<script src="https://raw.githack.com/shmuelf/PowerJS/master/src/power-moduleInjector.js"></script>

questa soluzione funziona perché:

1. Carica la libreria in xhr - che consente a CORS dalla console ed evita la politica script-src.
2. Utilizza l' opzione sincrona di xhr che ti consente di rimanere nel contesto della console / snippet, quindi avrai il permesso di valutare lo script e di non essere trattato come un non sicuro.

Lo uso per caricare ko knockout object in console

document.write("<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-3.5.0.debug.js'></script>");

o host locale

document.write("<script src='http://localhost/js/knockout-3.5.0.debug.js'></script>");

Installa tampermonkey e aggiungi il seguente UserScript con uno (o più) @matchcon l'URL specifico della pagina (o una corrispondenza di tutte le pagine :) ad https://*esempio:

// ==UserScript==
// @name         inject-rx
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Inject rx library on the page
// @author       Me
// @match        https://www.some-website.com/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.4/rxjs.umd.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
     window.injectedRx = rxjs;
     //Or even:  window.rxjs = rxjs;

})();

Ogni volta che è necessaria la libreria sulla console o su uno snippet abilitare UserScript specifico e aggiornare.

Questa soluzione previene l'inquinamento dello spazio dei nomi . È possibile utilizzare spazi dei nomi personalizzati per evitare la sovrascrittura accidentale delle variabili globali esistenti nella pagina.