当前位置：首页 > 行业动态 > 正文

f12可以查看压缩的js

按下F12键打开浏览器开发者工具，在“Sources”或“控制台”面板中找到并

使用F12查看压缩的JS

在浏览器中按 F12 或右键选择“检查”可打开开发者工具,通过以下步骤查看压缩的JS代码：

f12可以查看压缩的js 第1张

定位JS文件

  • Sources面板：切换到“Sources”标签页，展开左侧文件目录，找到目标JS文件（通常位于webpack://或路径下）。
  • Network面板：若JS动态加载，可切换到“Network”标签页，过滤.js文件，右键选择“Reveal in Sources”跳转。

查看与美化代码

  • 直接查看：点击文件名后，右侧会显示压缩后的代码（可能经过混淆、缩写）。
  • 格式化代码（以Chrome为例）：
    • 右键代码区域 → 选择“Format”（或按 Ctrl+Shift+F）自动美化代码。
    • 若代码被压缩工具（如UglifyJS）处理过,格式化后仍可能难以阅读。

调试压缩代码

  • 设置断点：在代码行号区域点击设置断点,执行页面时会暂停在此处。
  • 控制台输出：使用 console.log() 打印变量值,或直接在控制台输入变量名查看。
  • Source Map支持：若压缩时生成了.map文件，开发者工具会自动映射到原始源码（需确保Map文件可访问）。

常见问题与工具对比

功能 Chrome DevTools Firefox DevTools Safari Web Inspector
格式化压缩JS 右键“Format” 右键“Beautify” 无直接按钮，需手动复制粘贴
断点调试 支持 支持 支持
Source Map自动解析 自动（需Map文件存在） 自动（需Map文件存在） 自动（需Map文件存在）
移动端模拟调试 支持（Device Mode） 支持（Responsive Design） 支持

相关问题与解答

问题1：压缩后的JS代码无法调试，如何解决？

解答：

  1. 启用Source Maps：在构建工具（如Webpack、Rollup）中配置生成.map文件。
  2. 手动映射：若无法生成Map文件，可在开发者工具中手动关联原始代码（需手动输入映射关系）。
  3. 控制台输出：在压缩代码中插入debugger;语句或console.log()打印关键变量。

问题2：如何导出美化后的JS代码？

解答：

  1. 复制代码：在开发者工具中格式化后，手动复制代码（Ctrl+A → Ctrl+C）。
  2. 使用插件：通过浏览器扩展（如“Pretty-Print Minified Code”）自动美化并导出。
  3. 在线工具：将压缩代码粘贴到JSON Crush
f12
0

相关文章