firefoxjs调试工具怎么用？，怎么安装

Firefox 内置的开发者工具提供了一套功能强大的 JavaScript 调试工具，可以帮助开发者快速定位脚本错误、分析执行流程、跟踪变量变化，该工具集成在浏览器中，无需额外安装，支持断点、单步执行、调用栈查看、表达式监视等核心功能，并兼容源映射，适合现代前端项目的调试。

打开调试工具

• 快捷键：Ctrl+Shift+I（Windows/Linux）或 Cmd+Opt+I（macOS）
• 菜单路径：浏览器右上角菜单 → 更多工具 → 网页开发者工具 → 调试器
• 右键菜单：在页面任意位置右键 → 检查元素 → 切换到“调试器”面板

主界面组成

核心使用方法

设置断点

• 在代码行号左侧单击,出现蓝色箭头表示断点已设置
• 再次单击取消断点
• 右键单击行号可选择“条件断点”或“日志点”

条件断点

右键行号 → 添加条件断点，输入表达式（如 x > 5），仅当表达式为真时暂停执行。

日志点

右键行号 → 添加日志点，输入表达式（如 "x is: " + x），执行到该行时会在控制台输出日志，不会暂停执行。

单步执行

• 跳过：执行当前行，进入下一行，不进入函数内部
• 进入：进入当前行调用的函数内部
• 跳出：执行完当前函数剩余代码，返回到调用处

监视变量

在右侧“监视”面板中点击“添加监视表达式”，输入变量名或表达式，执行暂停时自动显示其值。

调用堆栈

右侧“调用堆栈”面板显示当前暂停位置的函数调用链，点击任意层级可跳转到对应代码位置。

作用域变量

右侧“作用域”面板列出当前可访问的变量，包含局部变量、闭包变量和全局变量，支持展开查看对象属性。

高级功能

源映射（Source Map）

• 当使用打包工具（如 Webpack、Vite）时，调试器会自动加载

  .map 文件，将压缩代码映射回原始源码

• 在源文件列表中,原始文件会显示为独立条目，可像调试普通文件一样设置断点、查看变量
• 如果源映射未生效,检查构建工具是否生成 sourcemap，或 Firefox 是否禁用了该项（设置 → 高级 → 启用 Source Maps）

黑盒脚本

• 右键脚本文件 → 选择“黑盒脚本”，将其从调用堆栈中隐藏
• 适合忽略第三方库的内部调用,让调试聚焦于自己的代码

多线程与 Web Worker 调试

• 当页面使用 Web Worker 或 Service Worker 时，调试器会将其作为独立目标列出
• 在源文件列表顶部可选择不同线程,分别调试主线程和 Worker 线程

即时调试异常

• 在调试器设置中勾选“暂停在异常上”或“暂停在未捕获的异常上”
• 当代码抛出异常时自动暂停,并在调用堆栈中高亮错误位置

常见问题与技巧

• 断点未生效：检查是否在正确的文件中设置断点，或代码已被缓存，可尝试禁用缓存（网络面板 → 禁用缓存）
• 调试动态脚本：通过 eval() 或 new Function() 创建的脚本，可在源文件列表的“临时脚本”中找到
• 使用 debugger 语句：在代码中插入 debugger; 关键字，执行到该行时自动触发调试器暂停

相关问题与解答

问题1：如何在 Firefox 中调试异步代码（如 Promise 或 async/await）？

答：Firefox 调试器支持异步栈追踪，当代码暂停在 await 或 Promise 回调中时，右侧“调用堆栈”会显示“异步”部分，展开后可看到触发异步操作的原始调用链，您可以在异步函数开头设置断点，或使用“暂停在异常上”功能捕获未处理的 Promise 拒绝，在监视面板中可以直接查看 Promise 的状态（pending、fulfilled、rejected）。

问题2：调试压缩后的代码时，如何查看原来的变量名？

答：这需要源映射的支持，确保构建工具输出 .map 文件，并已上传到服务器，Firefox 会自动加载源映射，将压缩后的代码还原为原始源码，在调试器源文件列表中，原始文件会单独列出，变量名、函数名均为原始名称，如果源映射加载失败，请检查网络请求中是否包含 .map 文件，或 Firefox 设置中是否禁用了“启用 Source Maps”，若无法使用源映射，可以尝试在压缩代码中搜索替换后的变量名，但效率较低。