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

221

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>';
Technocake
quelle
6
Sie möchten, dass eine schnelle Lösung eine Datei auf einer zufälligen Webseite enthält, auf der Sie die Entwicklertools geöffnet haben?
Christian Tellnes
7
Ich habe ein Add-On dazu erstellt: Download aus dem Google Store
w00d
2
Mögliches Duplikat von Javascript über die Firebug-Konsole
laden
Ich benutze dies, um Knockout in die Konsole document.write zu laden ("<script src = ' cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/… )
Deepak Vishwakarma
Leider gibt es keine Möglichkeit, eine lokale Javascript-Datei in die Konsole zu laden. Chrome lässt die Verwendung lokaler Dateien nicht zu.
Shayan

Antworten:

243

appendChild() ist ein einheimischer Weg:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);
Harmen
quelle
15
Um Harmans Antwort zu erweitern, habe ich sie um eine JS-Funktion gewickelt und wie folgt verwendet ... var _loadScript = function (path) {var script = document.createElement ('script'); script.type = 'text / javascript'; script.src = Pfad; document.head.appendChild (Skript); } _loadScript (' documentcloud.github.com/underscore/underscore-min.js' ); _loadScript (' backbonejs.org/backbone-min.js' );
Ajay Bhosale
Ich bekam:TypeError: Property 'appendChild' of object #<HTMLHeadElement> is not a function
Muhammad Hewedy
1
Ajay, danke, aber du hast nur wenige Syntaxfehler. Kopieren Sie den folgenden Text, um einen Unterstrich in der Konsole zu erhalten. Oder ersetzen Sie für andere lib var _loadScript = function (path) {var script = document.createElement ('script'); script.type = 'text / javascript'; script.src = Pfad; document.head.appendChild (Skript); }; _loadScript (' underscorejs.org/underscore-min.js' );
TPAKTOPA
Vielen Dank! Ich habe script.innerHTML = javascript_code</ code> verwendet, um direkten Javascript-Code einzufügen
Jonathan_Ng
91

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:

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 .

rsp
quelle
Aus welchem ​​Ordner wird das Skript geladen?
Qwerty
4
Wenn Sie es wie $.getScript('script.js');oder $.getScript('../scripts/script.js');dann verwenden, ist es relativ zum Dokument, aber es kann auch absolute URLs laden, z. $.getScript('https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js');
rsp
wenn Jquery verwenden, dann könnte man ein Bookmarklet machen auf der Seite zu installieren jquery, superuser.com/questions/1460015/...
barlop
38

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 */ })
Maciej Bukowski
quelle
1
Neueste Chrome verbietet die Verwendung von eval, mit der folgenden Meldung: VM1929:11 Uncaught (in promise) EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".
Vassilis
2
@Vassilis Ich habe dies überprüft und das Snippet funktioniert immer noch in Chrome Canary (64.0.3241.0).
Maciej Bukowski
2
Ich denke, das Problem mit Vassilis liegt darin, dass für die von ihm verwendete App eine Richtlinie zur Inhaltssicherheit vorhanden ist. Chrome funktioniert auch bei mir.
Solomons_Ecclesiastes
1
@ Vasilis verwenden Sie meine Antwort unten ( stackoverflow.com/a/57814219/6553339 ), um diesen Fehler zu vermeiden
shmulik friedman
16

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

Atirado
quelle
6
Während dies theoretisch die Frage beantworten kann, wäre es vorzuziehen , die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen.
Enamul Hassan
2
Ich dachte, meine ersten beiden Zeilen wären der wesentliche Teil der Antwort. Sie beschreiben genau, wie Sie in Chrome zu Snippets gelangen. Dann habe ich mit der Google-Dokumentation ergänzt.
Atirado
Ja, ich persönlich denke, dies ist die beste Antwort, da es auch Entwickler und eine einfache Möglichkeit zum Speichern und Ausführen von Javascript auf der aktuellen Seite zeigt ... schön!
Brad Parks
16

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.

jbustamovej
quelle
2
Die Sicherheitsrichtlinie verhindert, dass dies funktioniert, zumindest auf der neuen Chrome-Registerkarte ab Version 66. Nicht erfasst (im Versprechen) EvalError: Die Auswertung einer Zeichenfolge als JavaScript wurde abgelehnt, da "unsafe-eval" im Folgenden keine zulässige Skriptquelle ist Richtlinie zur Inhaltssicherheitsrichtlinie: "script-src 'strict-dynamic' ...
Tatsh
@Tatsh benutze meine Antwort, um deinen Fehler zu vermeiden ( stackoverflow.com/a/57814219/6553339 )
shmulik friedman
6
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);
xiao 啸
quelle
4

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.
Shmulik Friedman
quelle
Es funktioniert bei mir nicht: Das Laden des Skripts ' raw.githack.com/shmuelf/PowerJS/master/src/… ' wurde abgelehnt , da es gegen die folgende Richtlinie zur Inhaltssicherheitsrichtlinie verstößt: "script-src ...
ThomasRones
1

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>");
Deepak Vishwakarma
quelle
0

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.

Jannis Ioannou
quelle