介绍 debugger.html

debugger.html 是 Mozilla 开发的一个现代 JavaScript 调试器,构建为
一个使用 ReactRedux 的 Web 应用。该项目于今年初启动,
旨在替换 Firefox 开发者工具 中当前的调试器。此外,我们希望开发一个能够调试多个目标并在独立模式下运行的调试器。

collage of debugger targets

目前,debugger.html 可以连接并调试 Firefox,并且还可以实验性地连接到 Chrome 和 Node。调试器使用 Mozilla 的 远程调试协议 (RDP) 连接到 Firefox,并使用 Chrome 的 RDP 与 Node 和 Chrome 通信。

debugger.html 项目托管在 GitHub 上,并使用现代框架和工具链,使其易于访问并吸引了广大开发人员。

debugger.html

用户界面分为三个主要区域:源代码面板、编辑器面板和右侧边栏。

  • 源代码面板显示当前正在调试的应用程序所有当前源代码的树状视图。
  • 编辑器面板用于显示项目中的各种源文件,并提供设置断点和格式化源代码的功能。
  • 右侧边栏显示当前断点集、当前调用栈以及调试器暂停时的作用域变量。
    • 调试器支持用于暂停、单步执行、步入、步出和播放功能的控件,以调试您的 JavaScript 代码。
    • 调用栈面板显示给定暂停条件的调用栈帧,而作用域面板根据所选帧显示可展开的变量树。

debug demonstration Gif

入门

要开始使用调试器,您可以从 Github 获取代码
并查看 入门 指南。

如果您只想直接开始,请运行以下命令

npm install - Install dependencies
npm start - Start development web server
open http://localhost:8000 - Open in any modern browser

在浏览器中以端口 8000 打开调试器后,将显示主
调试器页面,其中列出了您可以选择的任何可调试目标。为了使调试器能够连接并调试目标,它必须在打开远程调试的情况下运行。这通常需要您设置一些标志来启动目标。例如,您可以在 MacOS 上启动 Firefox 实例以使用以下命令启用远程调试

$ /Applications/Firefox.app/Contents/MacOS/firefox-bin
--start-debugger-server 6080 -P development

Chrome 和 Firefox 的其他选项列在 此处

调试 Node 需要安装 v6.3.0 或更高版本。您需要使用设置了 inspect 标志的 Node 运行。例如,如果您想调试 myserver.js,则需要使用类似以下的命令。

$ node --inspect myserver.js

更多信息可在 入门 指南中找到

Firefox 开发者工具

我们正在将此调试器集成到 Firefox 的 开发者工具 中。第一个版本刚刚发布在 Nightly 中,您可以尝试一下。

example debugging jsfiddle

参与进来

如上所述,此项目仍在开发中,我们感谢您帮助我们打造最好的调试器。如果您有兴趣加入我们,请查看 贡献 指南。

关于 Bryan Clark

Firefox 开发者工具的技术产品经理

Bryan Clark 的更多文章…


8 条评论

  1. Cordylus

    已经实现了一个新的调试器,但当调试器暂停时仍然无法选择元素(Bug 1177346)。使用新的调试器修复此错误是否更容易?

    2016 年 9 月 14 日 13:09

    1. Bryan Clark

      我不认为新的调试器会使修复此错误更容易。我会在错误本身中跟进,感谢您提出这个问题!

      2016 年 9 月 15 日 00:58

  2. Sam

    是否预计此工具可以调试动态添加的 JavaScript 文件和 Web 工作线程?
    因为这些是 Firefox 调试器今天缺少的功能。(并且第一个功能在 Chrome 中处理得不好,除非在动态添加的文件中添加“debugger;”行)

    2016 年 9 月 14 日 14:28

    1. Henn

      没错。
      我可以想象一个功能可以告诉调试器类似“当您执行之前不存在的代码时,请中断”或提供调试提示,例如“还没有 MyApp.doSth() 函数,但当它被添加并执行时,请中断”。

      2016 年 9 月 15 日 02:14

  3. Dane MacMillan

    如果这个调试器比旧的调试器性能更好,我将非常高兴。在旧的调试器中单步执行代码非常缓慢。也请重新引入旧调试器中使用的全局搜索(!myMethodName);目前,很难找到我试图调试的代码行,这在大型代码库中尤其如此。

    2016 年 9 月 15 日 07:46

  4. Stoicho

    debugger.html 是否支持实时代码编辑?

    2016 年 9 月 19 日 03:58

    1. Wiley Marques

      这将非常有用。
      此外,还需要一种方法将文件映射到您的本地工作区。

      2016 年 9 月 22 日 03:47

    2. grace

      Chrome 调试器允许前端开发人员直接从 Visual Studio Code 调试在 Google Chrome 中运行的客户端 JavaScript 代码。

      2016 年 10 月 3 日 02:35

本文评论已关闭。