如何在浏览器控制台中执行 JavaScript 模块

• React Hook 深入浅出
• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

在Web开发过程中，有时需要在特定网站的上下文中执行脚本，比如收集网页上显示的数据、自动执行诸如点击按钮等操作，或者修改网站的某些行为。通常的做法是登录网站，打开DevTools中的控制台，然后粘贴并执行脚本。这种方法虽然直接，但存在一些不便之处。本文将介绍一种更高效的方法来在浏览器控制台中执行JavaScript模块。

传统方法的局限性

1. 代码修改后需要重复从编辑器复制并粘贴到控制台。
2. JavaScript模块不能直接在浏览器控制台中执行。

虽然可以通过打包模块来解决第二个问题，但反复的复制粘贴操作仍然令人烦恼，且容易出错。

高效的模块执行方法

可以使用动态import来解决这些问题。具体步骤如下：

1.启动HTTP服务器

使用Visual Studio Code的Live Server或node http-server等工具，从工作目录提供文件服务。

2.在控制台中使用动态导入

执行类似import('http://localhost:5501/main.js')的语句。

3.更新代码后的操作

在IDE中修改代码后，刷新页面，然后在控制台中按上箭头键回到之前执行的语句，再按Enter键执行。

示例代码：

// main.js
import { innerText } from "./copy.js";

console.log(innerText(document.body));

这个示例脚本从打开的网站中提取文本。它在处理由自定义元素构建的现代网站时特别有用。

但这种方法的不便之处在于，每次执行前都必须重新加载网页。一旦加载了模块，就无法卸载或替换为新版本。要删除之前加载的模块，就必须重新加载网页。

处理内容安全策略（CSP）

上面还有一个小问题： 内容安全策略(CSP）。为了说明 CSP 相关错误的处理方法和解决方案，这里创建了一个由四个专门模块组成的示例脚本。

main.js依赖于其他模块：

import { innerText } from "./copy.js";
 
console.log(innerText(document.body));

该脚本可从打开的网站中提取文本。例如，在一个信息量最大的网站https://chromestatus.com/newfeatures上有很多内容，但 document.body.innerText 返回的却是空字符串：

不能通过拖动或 Ctrl+A 选择左栏中的文本。如果不使用基于脚本的特殊方法，则无法复制。

尝试执行上面 脚本来获取页面正文的 innerText，结果看到一条常见的错误信息：

Refused to load the script 'http://localhost:5501/main.js' because it violates the following Content Security Policy directive:

CSP 可防止外来脚本的执行，所有正规网站都设置了 CSP。

解决方案是使用浏览器扩展来放宽CSP限制。例如，可以使用开源的"Anti-CORS, anti-CSP"扩展。

与网页交互的脚本可以方便地在集成开发环境中开发，并在控制台中执行，无需复制和粘贴。

结束

通过动态导入和适当的CSP处理，可以显著提高在浏览器控制台中执行JavaScript模块的效率。这种方法不仅简化了开发流程，还减少了潜在的错误，使得Web开发和调试过程更加流畅。对于需要频繁在特定网站上执行自定义脚本的开发者来说，这种技术尤其有价值。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。