如何在 Chrome 控制台中包含 JavaScript 文件或庫？

Question

是否有更簡單的（可能是本機的？）方法來在 Google Chrome 瀏覽器中包含外部腳本文件？

目前我是這樣做的：

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

Answer 1

appendChild()是一種更原生的方式：

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

Answer 2

你使用一些 AJAX 框架嗎？ 使用 jQuery 將是：

$.getScript('script.js');

如果您沒有使用任何框架，請參閱 Harmen 的答案。

（也許僅僅為了做這件簡單的事情而使用 jQuery 是不值得的（ 或者它可能是），但是如果你已經加載了它，那么你也可以使用它。我見過加載了 jQuery 的網站，例如 Bootstrap 但仍然以一種並不總是可移植的方式直接使用 DOM API，而不是為此使用已經加載的 jQuery，而且許多人不知道即使getElementById()也無法在所有瀏覽器上始終如一地工作 - 請參閱此答案詳情。）

更新：

我寫這個答案已經好幾年了，我認為值得在這里指出，今天您可以使用：

• 系統JS
• 模塊加載器
• jspm.io

動態加載腳本。 這些可能與閱讀此問題的人有關。

另請參閱： Guy Bedford 在 2014 年的 Fluent 演講：ES6 模塊的實用工作流程。

Answer 3

在現代瀏覽器中，您可以使用fetch來下載資源（ Mozilla docs ），然后 eval 來執行它。

例如要下載 Angular1，您需要輸入：

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 */ })

Answer 4

作為^^^ 以上@maciej-bukowski 答案的后續，在支持 async/await 的現代瀏覽器中（2017 年春季），您可以按如下方式加載。 在這個例子中，我們加載了 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);

如果您運行該代碼段，然后打開瀏覽器的控制台，您應該會看到函數 html2canvas() 現已定義。

Answer 5

在 chrome 中，最好的選擇可能是開發者工具中 Sources 下的 Snippets 選項卡。

它將允許您編寫和運行代碼，例如，在 about:blank 頁面中。

更多信息： https : //developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

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

Answer 7

如果有人因為腳本違反了 script-src“內容安全策略”或“因為 unsafe-eval' 是不允許的”而無法加載，我會建議使用我的非常小的模塊注入器作為開發工具片段，那么你就可以像這樣加載：

 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>

此解決方案有效，因為：

1. 它在xhr 中加載庫 - 這允許來自控制台的 CORS，並避免 script-src 策略。
2. 它使用 xhr 的同步選項，它允許您停留在控制台/代碼段的上下文中，因此您將有權評估腳本，而不會被視為不安全的評估。

Answer 8

如果您剛剛開始學習 javascript 並且不想花時間創建一個完整的網頁來嵌入測試腳本，只需在 Chrome 瀏覽器的新標簽中打開開發工具，然后點擊Console 。

然后輸入一些測試腳本：例如。

console.log('Aha!') 

然后在每一行后按Enter （提交以供 Chrome 執行）

或加載您自己的“外部腳本文件”：

document.createElement('script').src = 'http://example.com/file.js';

然后調用你的函數：

console.log(file.function('驨ꍬ啯ꍲᕤ'))

在谷歌瀏覽器 85.0.4183.121 中測試

Answer 9

我用它在控制台中加載ko淘汰賽對象

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

或在本地托管

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

Answer 10

安裝tampermonkey並添加以下 UserScript 和一個（或多個） @match與特定頁面 url（或所有頁面的匹配： https://* ）例如：

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

})();

每當您需要控制台上的庫或代碼片段時，請啟用特定的 UserScript 並刷新。

此解決方案可防止命名空間污染。 您可以使用自定義命名空間來避免意外覆蓋頁面上現有的全局變量。

Answer 11

您可以將腳本作為文本獲取，然后對其進行評估：

eval(await (await fetch('http://example.com/file.js')).text())