[英]How to include JavaScript file or library in Chrome console?
是否有更简单的(可能是本机的?)方法来在 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 的网站,例如 Bootstrap 但仍然以一种并不总是可移植的方式直接使用 DOM API,而不是为此使用已经加载的 jQuery,而且许多人不知道即使getElementById()
也无法在所有浏览器上始终如一地工作 - 请参阅此答案详情。)
我写这个答案已经好几年了,我认为值得在这里指出,今天您可以使用:
动态加载脚本。 这些可能与阅读此问题的人有关。
在现代浏览器中,您可以使用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 */ })
作为^^^ 以上@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() 现已定义。
在 chrome 中,最好的选择可能是开发者工具中 Sources 下的 Snippets 选项卡。
它将允许您编写和运行代码,例如,在 about:blank 页面中。
更多信息: https : //developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en
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);
如果有人因为脚本违反了 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>
此解决方案有效,因为:
如果您刚刚开始学习 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 中测试
我用它在控制台中加载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并添加以下 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 并刷新。
此解决方案可防止命名空间污染。 您可以使用自定义命名空间来避免意外覆盖页面上现有的全局变量。
您可以将脚本作为文本获取,然后对其进行评估:
eval(await (await fetch('http://example.com/file.js')).text())
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.