console importer

Konsolenimporteur

Installation

Installieren Sie es aus dem Chrome Web Store:

https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie

Verwendung

Öffnen Sie die Chrome Devtools-Konsole. Eine Funktion namens $i kann zum Importieren von JavaScript- und CSS-Ressourcen verwendet werden.

 $i ( 'jquery' )

Spezifische Version importieren:

 $i ( 'jquery@2' )

Sie können auch eine gültige Skript-URL importieren:

 $i ( 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' )

Auch CSS wird unterstützt:

 $i ( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' )

ES-Modul importieren

Das ES-Modul wird in modernen Browsern weitgehend unterstützt. Die Methode $i.esm kann in diesem Fall nützlich sein:

 d3 = await $i . esm ( 'd3' )

oder geben Sie eine Version an:

 d3 = await $i . esm ( 'd3@7' )

Der Vorteil dieses Ansatzes besteht darin, dass dem Fenster keine globalen Variablen hinzugefügt werden, was eine bessere Kontrolle über den Umfang der Nebenwirkungen ermöglicht. Weitere Einzelheiten finden Sie unter https://esm.run.

Fehlerbehebung

F: $i funktioniert nicht wie erwartet

Auf einigen Websites wie Google Inbox wird $i bereits als globale Variable verwendet. Diese Erweiterung überschreibt es nicht.

Sie können console.$i auf diesen Websites verwenden.

F: $i kann keine Ressourcen importieren

Auf einigen Websites wie GitHub kann $i keine Ressourcen importieren. Konsolenfehler können wie folgt aussehen:

 # js errors example
Refused to connect to ' https://api.cdnjs.com/libraries?search=jquery ' because it violates the following Content Security Policy directive:

# css errors example
Refused to load the stylesheet ' https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ' because it violates the following Content Security Policy directive:

Dies liegt an den strengen Inhaltssicherheitsrichtlinien dieser Websites. Weitere Informationen finden Sie im Content Security Policy (CSP)-Wiki

Wie funktioniert es?

• Wenn es sich um einen JavaScript-Bibliotheksnamen wie jquery handelt, versuchen Sie, ihn von cdnjs zu laden
• Wenn es eine Versionsnummer hat, wie z. B. jquery@2 , versuchen Sie, es von unpkg zu laden
• Wenn es sich um eine gültige URL (CSS oder JS) handelt, laden Sie sie direkt

Für den fortgeschrittenen Gebrauch gibt es auch zwei Funktionen $i.unpkg und $i.cdnjs , die zum Importieren von Ressourcen aus einem bestimmten CDN verwendet werden können.

Lizenz

MIT