JS-Obfuscator混淆后代码无法调试，如何保留源码映射？

Question

JS-Obfuscator混淆后代码无法调试，核心痛点在于丢失源码与混淆后代码的对应关系，导致断点失效、变量名不可读、调用栈混乱。常见原因包括未生成或未正确加载Source Map，或混淆配置中禁用了`sourceMap`、`sourceMapMode: 'separate'`等关键选项。此外，若输出目录未同步存放`.map`文件，或Web服务器未正确响应`SourceMap`请求头（如未设置`Access-Control-Allow-Origin`），浏览器DevTools也无法解析映射。部分构建流程（如Webpack+JS-Obfuscator插件）若未链式传递原始source map，也会造成映射断裂。解决关键在于：启用`sourceMap: true` + `sourceMapMode: 'separate'`，确保`.map`文件与混淆JS同部署且可访问，并在混淆前保留原始source map（如来自TS编译或打包工具），必要时通过`inputSourceMap`参数注入上游map。调试时需在Chrome DevTools → Settings → Preferences中启用“Enable JavaScript source maps”。

Answer 1

```html

一、现象层：混淆后调试失效的直观表现

• 在 Chrome DevTools 中设置断点后无法命中，或断点自动偏移到无关行
• 变量 hover 显示为 _0xabc123、$$_$ 等不可读标识符，无原始变量名与作用域上下文
• 调用栈（Call Stack）中函数名全为匿名或混淆符号，无法追溯至 src/utils/api.ts 或 components/Chart.vue
• Console 执行表达式时提示 ReferenceError: originalVar is not defined，但源码中该变量明确存在

二、配置层：JS-Obfuscator 核心 Source Map 控制参数解析

以下为生产级混淆配置中必须显式声明的关键字段（非默认启用）：

{
  "sourceMap": true,
  "sourceMapMode": "separate",
  "sourceMapFileName": "[name].js.map",
  "inputSourceMap": "./dist/pre-obfuscate.js.map" // 链式注入上游 map
}

配置项	默认值	调试影响	推荐值
sourceMap	false	完全不生成 .map 文件 → 调试链断裂	true
sourceMapMode	inline	内联 Base64 易被 CDN 或 CSP 截断；不便于部署验证	separate

三、构建流水线层：Source Map 的链式传递断裂点诊断

现代工程中常见断点位置（按执行顺序）：

1. TypeScript 编译（tsc --sourceMap）→ 生成 index.ts → index.js + index.js.map
2. Webpack 打包（devtool: 'source-map'）→ 合并模块并生成 bundle.js + bundle.js.map
3. JS-Obfuscator 插件介入 → 若未传入 inputSourceMap，则丢失 TS/TSX 层原始映射

四、部署与运行时层：浏览器能否加载 .map 的关键校验项

• 文件共存性：混淆 JS（app.min.js）与对应 app.min.js.map 必须同目录部署，且 HTTP 响应头含 Content-Type: application/json
• CORS 安全策略：若 .map 由独立域名（如 cdn.example.com）提供，需响应头包含：
  Access-Control-Allow-Origin: * 或精确匹配前端域名
• DevTools 设置验证：Chrome → F1 → Settings → Preferences → ☑ Enable JavaScript source maps（常被忽略）

五、深度实践：端到端可复现的调试修复流程图

graph LR
  A[TS 源码] -->|tsc --sourceMap| B[TS 输出：.js + .js.map]
  B -->|webpack --devtool source-map| C[Bundle：.js + .js.map]
  C -->|js-obfuscator -i inputSourceMap=C.js.map| D[Obfuscated：.js + .js.map]
  D -->|Nginx 静态服务| E[浏览器加载]
  E --> F{Chrome DevTools 是否启用 Source Maps？}
  F -->|否| G[Settings → ☑ Enable JavaScript source maps]
  F -->|是| H[检查 Network 面板：.js.map 返回 200？CORS？Content-Type？]
  H --> I[验证 Sources 面板是否展开 “webpack://” 或 “file://” 原始路径]

六、高阶技巧：多层 Source Map 的手动注入与验证

当自动化链路失败时，可使用 Node.js 脚本合并映射：

const { readFileSync, writeFileSync } = require('fs');
const { SourceMapConsumer, SourceMapGenerator } = require('source-map');

// 读取上游 map（Webpack 输出）
const upstreamMap = JSON.parse(readFileSync('./dist/bundle.js.map', 'utf8'));
// 读取 obfuscator 输出的 map（含混淆层映射）
const obfMap = JSON.parse(readFileSync('./dist/bundle.obf.js.map', 'utf8'));

// 使用 source-map lib 合并两层映射（需原始内容输入）
const generator = new SourceMapGenerator({ file: 'bundle.final.js' });
// ... 合并逻辑（略）→ 最终生成可调试的 bundle.final.js.map
writeFileSync('./dist/bundle.final.js.map', JSON.stringify(generator.toJSON()));

```