如何在 Chrome 浏览器控制台中包含 JavaScript 文件或库?

问题描述 投票:217回答:9

有没有一种更简单(也许是原生的)的方法在 Google Chrome 浏览器中包含外部脚本文件?

目前我是这样做的。

document.head.innerHTML += '<script src="http://example.com/file.js"></script>';
javascript google-chrome console include
9个回答
243
投票

appendChild() 是一种比较原生的方式。

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

91
投票

你用的是AJAX框架吗?用jQuery就可以了。

$.getScript('script.js');

如果你没有使用任何框架,那么请看Harmen的回答。

(也许不值得使用jQuery来做这一件简单的事情(也可能是)但如果你已经加载了它,那么你不妨使用它。我见过一些已经加载了jQuery的网站,比如用Bootstrap,但还是直接使用DOM API,而不是使用已经加载的jQuery来做,很多人并不知道即使是 getElementById() 并非在所有浏览器上都能稳定运行--请见 本回答 详见)。)

更新一下。

我写这个答案已经很多年了,我觉得值得在这里指出,今天你可以用。

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

另请参见。The Fluent 2014演讲,作者Guy Bedford。ES6模块的实用工作流.


38
投票

在现代浏览器中,你可以使用 取来 下载资源(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 */ })

16
投票

在chrome中,你最好的选择可能是在开发者工具的Sources下的Snippets标签。

它将允许你编写和运行代码,例如,在about:blank页面中。

更多信息请点击这里。https:/developers.google.comwebtoolschrome-devtoolsdebugsnippets?hl=en


16
投票

作为对@maciej-布科夫斯基的回答的后续。以上^^,在现代浏览器中,截至目前(2017年春季),支持asyncawait的,你可以按如下方式加载。在这个例子中,我们加载加载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()这个函数已经被定义了。


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

4
投票

如果有人因为脚本违反了 script-src "内容安全策略 "或 "因为 unsafe-eval'不是允许的 "而导致加载失败,我会建议使用 我的小型模块喷射器 作为dev-tools snippet,那么你就可以像这样加载。

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,并避免了脚本-src策略。
  2. 它使用了 同步 选项,它允许你停留在consolesnippet的上下文,所以你将有权限评估脚本,而不是作为一个不安全的评估。

1
投票

我使用这个选项来加载 淘汰对象

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

0
投票

安装 驯兽师 并在下面的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并刷新。

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

© www.soinside.com 2019 - 2024. All rights reserved.