怎么用浏览器开发者工具保存网页中的JS脚本

一、方法一：在 Sources（源代码）面板直接查找并另存为

Sources 面板是专门用于查看、断点调试和修改前端源文件的核心区域。只要脚本是由常规 <script src="..."> 标签引入或已由打包器静态注入，Sources 面板都会将其按域名结构列出。

1. 打开 Sources 面板并定位目标文件

在键盘上按下 F12（Mac 用户按下 Cmd + Option + I）唤出开发者工具，点击顶部导航栏中的 Sources 标签。在左侧侧边栏中可以看到 Page 分组，这里按照请求域名呈树状列出了当前网页加载的所有静态资源。

如果页面资源较多，逐层展开目录查找效率较低。此时更高效的方案是使用内置文件搜索快捷键：

• Windows / Linux：按下 Ctrl + P。
• macOS：按下 Cmd + P。

在弹出的搜索框中直接输入脚本名称（例如 app.js 或 chunk-vendors），支持模糊匹配，按下回车即可在中间的代码编辑器中直接打开对应的 JS 文件。

2. 格式化压缩代码（Pretty-print）

现阶段商业网站部署的脚本绝大多数经过了 Webpack、Vite 或 Rollup 的压缩混淆，表现为数万字符紧缩在一行的长文本。直接保存这类单行代码不仅难以阅读，排查断点也极为不便。

DevTools 提供了原生代码美化功能。在中间代码编辑器左下角的底部状态栏中，找到由两个大括号组成的图标 { }。点击该图标，编辑器会在独立标签页（通常带有 :formatted 后缀）中将压缩代码重排为具备标准缩进与换行的整洁格式。

3. 右键执行另存为操作

代码展示在编辑器中后，导出到本地有两种等效方式：

1. 在编辑区右键保存：在右侧的代码文本区域任意位置单击鼠标右键，在弹出的右键上下文菜单中点击 Save as...（另存为），随后在操作系统的文件保存对话框中指定目录与文件名。
2. 在左侧文件树右键保存：在左侧 Page 树形目录中找到该脚本节点，右键点击该条目，选择 Save as... 同样可以实现导出。

二、方法二：通过 Network（网络）面板捕获动态加载的脚本

许多单页应用（SPA）采用了路由懒加载或动态分块策略，一些业务逻辑脚本只有在用户发生特定交互（如点击按钮、滑动到底部）时才会通过 fetch 或动态 import() 下载。此时如果直接在 Sources 面板中按名字检索，往往搜不到对应文件。针对这种情况，Network 面板是更准确的捕获入口。

1. 在 Network 面板中过滤 JavaScript

1. 点击 DevTools 顶部的 Network 标签。
2. 在过滤器（Filter）栏中，点击 JS 按钮。此时请求列表将剔除图片、样式表与接口数据，仅展示 .js 及其相关 MIME 类型的资源。
3. 刷新当前页面（按 F5），观察脚本按时序加载的过程。如果目标脚本是在特定操作后触发的，执行对应的页面操作即可看到新发起的脚本请求。

2. 导出 Network 中的脚本内容

在 Network 请求列表中找到目标文件后，有三种方式将其持久化保存：

• 联动跳转到 Sources 保存（最推荐）：右键点击该条网络请求，在菜单中选择 Open in Sources panel（在来源面板中打开）。浏览器会自动跳转到 Sources 面板并选中该文件，随后便可享受格式化美化与“Save as...”的完整能力。
• 直接在新标签页打开另存：右键点击请求条目，选择 Open in new tab。浏览器会在独立标签页中以纯文本展示该脚本，直接使用浏览器常规快捷键 Ctrl + S（Mac: Cmd + S）保存即可。
• 复制响应文本：右键点击请求条目，选择 Copy -> Copy response，该脚本的完整源码会被直接存入系统剪贴板，随后可以粘贴至本地文本编辑器中保存。

三、特殊场景：内联脚本与动态编译脚本的保存

并非所有 JavaScript 代码都以独立 .js 文件的形式存在。在实际开发排查中，常见两种特殊存在形态：直接嵌入在 HTML 文档中的内联脚本，以及由 eval() 或 new Function() 动态生成的内存脚本。

1. 内联脚本（Inline Script）的提取

直接写在 HTML 里的 <script> 标签没有独立的网络 URL。保存这类代码有两种推荐手段：

• 在 Elements 面板复制：按下快捷键进入 Elements 面板，按下 Ctrl + F 搜索 <script。找到包含代码的目标节点，在节点上双击或者右键选择 Edit as HTML，即可选中文本内容并复制出来保存为 .js 文件。
• 在 Sources 面板中展开 HTML 文档：在 Sources 面板的 Page 树中，点击根目录的主 HTML 文档，右侧代码窗会显示完整 HTML。滚动到目标脚本所在行，直接鼠标选中代码块复制即可。

2. 动态生成的 VM 脚本保存

当网页使用 eval() 执行解密后的字符串，或者框架动态组装函数时，V8 引擎会在内存中为这段代码开辟虚拟空间，DevTools 会将其标记为 VMxxxx（如 VM1042），集中挂载在 Sources 面板左侧树的 (no domain) 分组下。

如果需要在页面运行期间导出这类脚本，请按照以下步骤操作：

1. 在触发该动态代码的业务流程前后打上断点，保持运行线程处于暂停（Paused）状态。
2. 在 Sources 面板的 Call Stack（调用栈）中定位到该虚拟执行帧，或者在 Page 树中展开 (no domain) 找到对应的 VMxxxx 文件并点击打开。
3. 此时该动态脚本在编辑器中获得了临时标签页，在编辑区右键选择 Save as... 即可成功持久化到本地。

四、进阶技巧：使用 Local Overrides（本地替代）实现双向同步

如果保存 JS 脚本的目的不仅是阅读，而是为了修改其中的逻辑并在浏览器中持续验证，单纯的“另存为”无法满足需求——因为一旦刷新页面，浏览器仍然会重新向服务器拉取原始脚本，你在 DevTools 内存中所作的修改全部丢失。

Chrome 与 Edge 提供了 Local Overrides（本地替代 / 本地覆盖） 功能，它能将远程线上 JS 文件与本地磁盘中的一个具体文件夹建立实时映射：

1. 打开 DevTools -> Sources 面板，在左侧侧边栏切到 Overrides 选项卡。
2. 点击 Select folder for overrides（选择用来替代的文件夹），在本地磁盘新建一个空白文件夹并授权浏览器访问。
3. 在弹出的顶部提示条中点击“允许”（Allow）授予 DevTools 写入权限。
4. 切换回 Page 选项卡，找到你想要修改保存的 JS 文件，右键点击该文件，选择 Override content（替代内容）。
5. 此时该文件会自动被克隆到你的本地文件夹中。你在 DevTools 编辑器里对代码做任何修改后按下 Ctrl + S，文件不仅会即时写入你的磁盘，而且之后无论怎么刷新页面，浏览器都会优先加载这个保存在本地的修改版 JS。

五、完整操作备忘与避坑指南

为了在实际操作中快速查阅不同场景的处理方案，下表梳理了针对不同需求的核心操作动作、关键快捷键以及需要规避的典型问题。

排查与避坑提醒

1. 混淆与重命名限制：通过浏览器开发者工具保存下来的脚本是运行在客户端的构建后产物。如果工程在构建时开启了 Uglify/Terser 混淆，局部变量名已经被替换为单个字母（如 a, b, c），原始注释与长变量名已不可逆丢失。此时美化排版仅能还原缩进与语句换行，若要阅读原始语义，需依赖同目录下是否存在配套的 .js.map 映射文件。
2. 避免在临时状态下关闭页面：如果在代码编辑器中做了局部调试修改但尚未执行“Save as...”或配置 Overrides，页面一旦刷新或标签页关闭，内存中的全部改动将直接被重置。建议在保存前先执行导出。
3. 防盗链与鉴权头丢失：如果使用“在独立标签页打开”的方式保存受特定 Referer 或鉴权 Cookie 保护的动态脚本，直接在新标签页中访问可能会触发 403 Forbidden。遇到此类情况，务必直接在 Network 面板中使用“Copy response”或在 Sources 面板中执行“Save as...”，直接获取浏览器已建立安全会话下的内存响应流。