如何包括JavaScript文件或库在Chrome控制台?

小开

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，比如Bootstrap，但仍然直接使用DOM API，这种方式并不总是可移植的，而不是使用已经加载的jQuery，而且许多人都没有意识到即使getElementById()也不能在所有浏览器上一致工作的事实——详情请参阅这个答案。)

更新:

我写这个答案已经有很多年了，我认为值得在这里指出的是，今天你可以使用:

SystemJS
ModuleLoader
< a href = " http://jspm。io / noreferrer“rel = > jspm.io < / >

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

参见:Guy Bedford在2014年的演讲:ES6模块的实际工作流程。

小开

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

小开

在现代浏览器中，您可以使用获取来下载资源 (Mozilla文档)，然后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 */ })

小开

在chrome中，你最好的选择可能是在开发人员工具中的源代码下的snippet选项卡。

它将允许您编写和运行代码，例如，在一个about:空白页面中。

小开

作为@maciej-bukowski 以上^ ^ ^的回答的后续，在现在(2017年春季)支持async/await的现代浏览器中，您可以按以下方式加载。在这个例子中，我们加载了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()函数现在已经定义了。

小开

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

小开

如果任何人，因为他的脚本违反了script-src的“内容安全策略”或“因为不安全的eval'是不允许的”而加载失败，我将建议使用我的小模块注入器作为dev-tools片段，然后你将能够像这样加载:

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>

this solution works because:

It loades the library in xhr - which allows CORS from console, and avoids the script-src policy.
It uses the synchronous option of xhr which allows you to stay at the console/snippet's context, so you'll have the permission to eval the script, and not to get-treated as an unsafe-eval.

小开

安装tampermonkey并使用一个(或多个)带有特定页面url(或所有页面的匹配:https://*)的@match添加以下UserScript，例如:

// ==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并刷新。

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

小开

如果你刚刚开始学习javascript &不想花时间创建整个网页只是为了嵌入测试脚本，只需在Chrome浏览器的新选项卡中打开开发工具，并单击Console。

然后输入一些测试脚本:例如。

console.log('Aha!')

然后在每一行之后按输入(由Chrome提交执行)

或者加载你自己的“外部脚本文件”:

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

然后调用你的函数:

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

测试在谷歌Chrome 85.0.4183.121

小开

你可以获取脚本作为文本，然后求值:

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