Wie kann ich eine JavaScript-Datei oder -Bibliothek in die Chrome-Konsole aufnehmen?

Gibt es eine einfachere (native?) Möglichkeit, eine externe Skriptdatei in den Google Chrome-Browser aufzunehmen?

Momentan mache ich das so:

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

appendChild() ist ein einheimischer Weg:

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

Verwenden Sie ein AJAX-Framework? Mit jQuery wäre es:

$.getScript('script.js');

Wenn Sie kein Framework verwenden, lesen Sie die Antwort von Harmen.

(Vielleicht lohnt es sich nicht, jQuery nur für diese eine einfache Sache zu verwenden ( oder vielleicht auch ), aber wenn Sie es bereits geladen haben, können Sie es auch verwenden. Ich habe Websites gesehen, auf denen jQuery geladen ist, z. B. mit Bootstrap, aber immer noch Verwenden Sie die DOM-API direkt auf eine Weise, die nicht immer portabel ist, anstatt die bereits geladene jQuery zu verwenden, und vielen Menschen ist nicht bewusst, dass getElementById()sie nicht in allen Browsern konsistent funktioniert. Weitere Informationen finden Sie in dieser Antwort . )

AKTUALISIEREN:

Es ist Jahre her, seit ich diese Antwort geschrieben habe, und ich denke, es lohnt sich, hier darauf hinzuweisen, dass Sie heute Folgendes verwenden können:

• SystemJS
• ModuleLoader
• jspm.io

Skripte dynamisch laden. Diese können für Personen relevant sein, die diese Frage lesen.

Siehe auch: Der Fluent 2014-Vortrag von Guy Bedford: Praktische Workflows für ES6-Module .

In den modernen Browsern können Sie den Abruf zum Herunterladen von Ressourcen ( Mozilla-Dokumente) verwenden ) und dann auszuwerten, um sie auszuführen.

Zum Herunterladen von Angular1 müssen Sie beispielsweise Folgendes eingeben:

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 ist die Registerkarte "Snippets" unter "Quellen" in den Entwicklertools möglicherweise die beste Option.

Sie können damit Code schreiben und ausführen, z. B. auf einer leeren Seite.

Weitere Informationen finden Sie hier: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=de

Als Antwort auf die Antwort von @ maciej-bukowski über ^^^ können Sie ab sofort (Frühjahr 2017) in modernen Browsern, die async / await unterstützen, Folgendes laden. In diesem Beispiel laden wir die Bibliothek 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);

Wenn Sie das Snippet ausführen und dann die Konsole Ihres Browsers öffnen, sollte die Funktion html2canvas () jetzt definiert sein.

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

Wenn jemand nicht geladen werden kann, weil sein Skript gegen die script-src "Inhaltssicherheitsrichtlinie" verstößt oder "weil unsichere Bewertung nicht zulässig ist", empfehle ich, meinen ziemlich kleinen Modulinjektor als Dev-Tools-Snippet zu verwenden. dann können Sie wie folgt laden:

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>

Diese Lösung funktioniert, weil:

1. Es lädt die Bibliothek in xhr - was CORS von der Konsole aus ermöglicht und die script-src-Richtlinie vermeidet.
2. Es verwendet die synchrone Option von xhr, mit der Sie im Kontext der Konsole / des Snippets bleiben können, sodass Sie die Berechtigung haben, das Skript zu evaluieren und nicht als unsichere Evaluierung behandelt zu werden.

Ich benutze dies, um ein Ko- Knockout-Objekt in die Konsole zu laden

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

oder lokal hosten

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

Installieren Sie tampermonkey und fügen Sie das folgende UserScript mit einem (oder mehreren) @matchmit einer bestimmten Seiten-URL (oder einer Übereinstimmung aller Seiten :) hinzu, https://*z.

// ==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;

})();

Wenn Sie die Bibliothek auf der Konsole oder in einem Snippet benötigen, aktivieren Sie das spezifische UserScript und aktualisieren Sie es.

Diese Lösung verhindert die Verschmutzung von Namespaces . Sie können benutzerdefinierte Namespaces verwenden, um ein versehentliches Überschreiben vorhandener globaler Variablen auf der Seite zu vermeiden.