浏览器控制台怎么保存和下载当前页面的 JS 代码

在前端排查问题、分析网页逻辑或学习他人代码实现时，常常需要把当前页面中运行的 JavaScript 脚本保存到本地。保存当前页面的 JS 代码主要有两条路径：对于独立加载的外链脚本，可以在开发者工具的 Sources（源代码）面板中直接定位并另存为文件；对于内嵌在 HTML 内部的脚本、动态拼接生成的模块或需要清洗的数据，则可以在 Console（控制台）中运行一段简短的脚本，借助 Blob 对象与虚拟链接直接触发本地下载。此外，控制台内置的 copy() 命令也能快速将代码复制到系统剪贴板。

途径一：在 Sources 面板中直接另存 JS 文件

现代浏览器（如 Chrome、Edge、Firefox、Safari）的开发者工具将所有已加载的外部脚本清晰地归类在源代码面板中。这是保存外链 .js 文件最直接的方式，无需编写任何额外代码。

1. 打开开发者工具：按下键盘快捷键 F12（Windows）或 Command + Option + I（macOS），也可以在页面任意空白处右键选择“检查”。
2. 切换至 Sources 面板：在顶部功能选项卡中点击“Sources”（在某些中文界面的浏览器中名为“源代码”或“源资源”）。
3. 定位目标脚本：在左侧导航窗格的“Page”层级树中，依次展开当前网页的域名目录，找到 js 或静态资源路径下的目标 .js 文件并点击打开。
4. 格式化混淆代码（可选）：很多生产环境的脚本都是经过压缩的单行代码（Minified）。在中间代码编辑区下方点击大括号图标 { }（Pretty print），浏览器会将代码排版为易读的多行格式。
5. 执行另存为：在代码编辑区域点击鼠标右键，在上下文菜单中选择“Save as...”（另存为...），或者直接按下快捷键 Ctrl + S（macOS 为 Command + S），指定本地磁盘路径与文件名即可保存。

图 1：通过开发者工具 Sources 面板定位并保存外部 JS 文件的标准交互步骤

途径二：在 Console 控制台通过 Blob 脚本动态下载

虽然 Sources 面板很直观，但在面对内联在 <script> 标签里的代码、需要整合多个脚本块、或者由页面在内存中动态组装生成的代码时，Sources 面板无法直接以独立文件的形式一次性导出。此时直接在控制台（Console）执行 JavaScript 脚本是效率最高的方法。

其核心机制是：在控制台利用 JavaScript 读取目标代码文本，将其封装进 Blob 对象中生成一个临时的二进制内存链接（Object URL），然后动态构建一个带 download 属性的 <a> 标签并触发点击事件，浏览器便会像正常下载文件一样将内容保存到本地硬盘。

1. 封装通用下载函数

打开控制台（Console 面板），粘贴并运行以下基础函数。该函数接收文本内容和期望保存的文件名，随后自动触发下载：

function downloadTextAsFile(content, filename) {
  // 1. 将字符串包装为 JS 类型的 Blob 对象
  const blob = new Blob([content], { type: 'application/javascript;charset=utf-8' });
  
  // 2. 创建指向该 Blob 的临时对象 URL
  const objectUrl = URL.createObjectURL(blob);
  
  // 3. 构建隐藏的 a 标签并配置下载参数
  const anchor = document.createElement('a');
  anchor.href = objectUrl;
  anchor.download = filename || 'downloaded-script.js';
  anchor.style.display = 'none';
  
  // 4. 加入 DOM、触发点击、并清理节点与引用
  document.body.appendChild(anchor);
  anchor.click();
  document.body.removeChild(anchor);
  URL.revokeObjectURL(objectUrl);
}

2. 场景示例：提取并下载当前页面所有的内联 Script 代码

许多网页会将核心配置或初始化函数直接写在 HTML 的 <script> 标签中而没有 src 属性。运行以下代码可将页面所有内联脚本合并并下载：

// 获取所有没有 src 属性且含有内容的 script 标签
const inlineScripts = Array.from(document.querySelectorAll('script:not([src])'))
  .map(el => el.textContent.trim())
  .filter(code => code.length > 0);

if (inlineScripts.length === 0) {
  console.warn('当前页面未找到任何非空的内联 JS 代码。');
} else {
  // 添加分隔注释后拼接为完整内容
  const mergedCode = inlineScripts.map((code, index) => {
    return `/* =================== Inline Script #${index + 1} =================== */\n${code}`;
  }).join('\n\n');

  downloadTextAsFile(mergedCode, `${location.hostname}-inline-scripts.js`);
  console.log(`成功导出 ${inlineScripts.length} 段内联代码！`);
}

3. 场景示例：在控制台通过 fetch 读取外链脚本并保存

如果已知某个外链脚本的 URL，也可以直接在控制台异步抓取其文本并下载：

async function downloadExternalScriptByUrl(scriptUrl, saveName) {
  try {
    const response = await fetch(scriptUrl);
    if (!response.ok) {
      throw new Error(`HTTP 错误，状态码: ${response.status}`);
    }
    const scriptText = await response.text();
    const fileName = saveName || scriptUrl.split('/').pop().split('?')[0] || 'script.js';
    downloadTextAsFile(scriptText, fileName);
    console.log(`文件 [${fileName}] 已触发下载。`);
  } catch (err) {
    console.error('下载失败：', err.message);
  }
}

// 示例调用：
// downloadExternalScriptByUrl('https://example.com/assets/app.js', 'my-app.js');

图 2：在 Console 控制台通过 Blob 机制生成临时文件并触发下载的完整调用流

途径三：利用控制台内置 copy() 命令快速复制

如果你只需要提取某一段逻辑、某个特定的配置对象或某个函数定义，并不一定非要经历“下载文件-打开编辑器”的繁琐步骤。现代浏览器的 DevTools 控制台提供了一个原生辅助函数：copy()。

将任何字符串或对象传入 copy(value)，浏览器会直接将该内容放置在操作系统剪贴板中。之后只需在本地代码编辑器（如 VS Code）中按下 Ctrl + V（macOS 为 Command + V）即可完成保存。

// 示例 1: 复制页面中第一个 script 标签的所有代码到剪贴板
copy(document.querySelector('script').textContent);

// 示例 2: 复制当前作用域内某函数的源代码字符串
// 假设页面暴露了全局对象 window.AppInit
copy(window.AppInit.toString());

// 示例 3: 复制格式化后的全局配置对象为 JSON 文本
copy(JSON.stringify(window.__INITIAL_STATE__ || {}, null, 2));

容易混淆的认知与场景辨析

在实际操作过程中，不少开发者对控制台保存脚本的操作存在一些看似合理但不够准确的直觉理解，澄清这些混淆点有助于在不同需求下选择正确的方法：

混淆点一：“控制台只能用来调试和打印日志，不能下载文件”

这种说法之所以流行，是因为控制台界面上确实没有类似“文件导出”或“下载”按钮。但实际上，控制台拥有当前页面主线程的完整执行权限，浏览器提供的 DOM API、Blob 构造器以及 URL 对象在控制台中完全可用。通过控制台创建 <a download> 标签并触发点击，本质上是借助标准 Web API 命令浏览器启动下载管道，其结果与点击页面上的真实下载链接没有任何区别。

混淆点二：“直接右键网页‘另存为全部网页’就能把 JS 拿全”

直接在网页上右键点击“网页另存为（完整）”，浏览器通常只会下载 HTML 初始引用的静态资源。而在当今以 Vue、React 单页应用（SPA）为主流的架构中，大量业务逻辑代码是通过 Webpack、Vite 或动态 import() 按需切片（code splitting）异步载入的。这些异步 chunk 脚本在初始 HTML 中往往不存在。要完整获取它们，必须通过 Sources 面板在触发对应页面逻辑后定位，或者通过控制台直接拉取网络请求流。

混淆点三：“格式化（Pretty print）之后另存出来的代码逻辑会发生变化”

有人担心点击 { }（格式化）后保存的文件不能正常运行。事实上，格式化只是在词法分析的基础上重新组织了换行符、缩进空格与断行，并不会重命名变量或更改语法树（AST）逻辑。格式化后的脚本更适合人工阅读和搜索分析。

图 3：三种保存途径的核心维度对比与选型参考

常见问题与排查要点

1. 为什么在控制台用 fetch() 下载外链 JS 提示 CORS 跨域错误？

当外链 JS 存放在第三方法人或 CDN 域名下，且该 CDN 响应头未配置 Access-Control-Allow-Origin: * 时，控制台中执行 fetch() 会被浏览器的同源策略拦截。遇到该情况时：

• 优先直接切换到 Sources 面板：Sources 面板由浏览器调试底层直接抓取网络包，完全不受同源策略限制，直接右键“Save as...”即可保存。
• 或者在 Network（网络）面板 中找到该脚本请求，右键选择“Open in new tab”（在新标签页打开），然后再按 Ctrl + S 进行保存。

2. 怎么快速在几十个打包文件中找到含有特定逻辑的代码？

现代前端打包往往生成大量类似 chunk-2d14.js 的无序文件名。无需逐个下载排查：在开发者工具中按下 Ctrl + Shift + F（macOS 为 Command + Option + F），调出全局搜索抽屉（Search），输入你关心的类名、API 路由或文字标识，回车即可跨所有已加载的 JS 文件快速定位，点击搜索结果即可直达对应文件的具体行号，再进行格式化与保存。

3. 安全风险防范提醒

在控制台执行任何提取或下载代码时，切勿从不明网络论坛直接复制粘贴复杂的已混淆代码执行。自行编写或使用上述透明简单的 Blob 下载函数，确保仅调用标准的 URL.createObjectURL 与 document.createElement('a')，防止在控制台中引入未知第三方脚本造成信息泄露。

总结与决策指南

保存和下载当前网页的 JS 代码并不是一项复杂的黑盒操作。归纳起来，读者可以依据以下路径快速决策：

图 4：根据脚本存在形式与使用目的进行针对性下载的执行路线图

掌握这些方法后，无论面对静态托管的外链资源、隐藏在 HTML 内部的内联逻辑，还是在前端内存中动态生成的模块，都可以在浏览器控制台与开发者工具中从容提取并下载所需的 JavaScript 代码。