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

有没有更简单的方法（也许是本机？）在Google Chrome浏览器中包含外部脚本文件？

目前，我正在这样做：

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

appendChild() 是更原生的方式：

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

您是否使用一些AJAX框架？使用jQuery，它将是：

$.getScript('script.js');

如果您不使用任何框架，请参阅Harmen的答案。

（也许仅仅为了做一件简单的事情就不值得使用jQuery（或者也许是），但是如果您已经加载了jQuery，那么您也可以使用它。直接以不总是可移植的方式使用DOM API，而不是为此使用已加载的jQuery，而且许多人并不知道甚至getElementById()在所有浏览器上都无法正常工作的事实- 有关详细信息，请参见此答案。 ）

更新：

自从我写了这个答案已经有好几年了，在这里值得指出的是，今天您可以使用：

• 系统JS
• 模块加载器
• jspm.io

动态加载脚本。这些可能与阅读此问题的人有关。

另请参见：Guy Bedford的Fluent 2014演讲：ES6模块的实际工作流程。

在现代的浏览器中，您可以使用fetch下载资源（Mozilla docs），然后评估执行该资源。

例如，要下载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 */ })

在chrome中，最好的选择可能是开发人员工具中“源”下的“片段”标签。

例如，它将允许您在about：blank页面中编写和运行代码。

此处提供更多信息：https : //developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=zh-CN

作为^^^上方 @ maciej-bukowski的回答的后续部分，截至目前（2017年春季）的现代浏览器（支持async / await）可以按如下方式加载。在此示例中，我们加载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（）。

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

如果有人因为脚本违反了脚本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 的同步选项，该选项允许您停留在控制台/摘录的上下文中，因此您将有权评估脚本，而不会被视为不安全评估。

我用它在控制台中加载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>");

安装tampermonkey并添加以下用户脚本以及一个（或多个）@match具有特定页面网址（或所有页面的匹配项：）的示例，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并刷新。

此解决方案可防止名称空间污染。您可以使用自定义名称空间来避免意外覆盖页面上现有的全局变量。