【问题标题】：React debug Using VSCode and Firefox instead of Chrome使用 VSCode 和 Firefox 代替 Chrome 进行 React 调试
【发布时间】：2018-06-12 02:25:21
【问题描述】：

我尝试使用 VSCode 的调试“功能”来调试 React 应用程序，到目前为止，通过快速的网络搜索，我发现许多资源声称如何使用 VSCode 的 Crome 调试器来做到这一点，例如：

但我找不到使用 Firefox 的方法。到目前为止，我在 VSCode 上安装了“Debugger for firefox”，并添加了以下调试选项：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug app",
            "type": "firefox",
            "request": "attach"
        }
    ]
}

我按照文档状态运行：

firefox -start-debugger-server -no-remote

我尝试通过 VSCode 初始化调试过程，但当我这样做时出现错误：

连接 ECONNREFUSED 127.0.0.1:6000

可以在我的 GNU/Linux 机器上运行以下命令确认错误

netstat -ntlp
(Not all processes could be identified, non-owned process info
 will not be shown, you would have to be root to see it all.)
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 127.0.0.1:37893         0.0.0.0:*               LISTEN      9368/node       
tcp        0      0 0.0.0.0:27017           0.0.0.0:*               LISTEN      -               
tcp        0      0 0.0.0.0:139             0.0.0.0:*               LISTEN      -               
tcp        0      0 127.0.0.1:6379          0.0.0.0:*               LISTEN      -               
tcp        0      0 127.0.0.1:9333          0.0.0.0:*               LISTEN      10924/code      
tcp        0      0 127.0.1.1:53            0.0.0.0:*               LISTEN      -               
tcp        0      0 10.42.0.1:53            0.0.0.0:*               LISTEN      -               
tcp        0      0 127.0.0.1:631           0.0.0.0:*               LISTEN      -               
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      6732/node       
tcp        0      0 127.0.0.1:3001          0.0.0.0:*               LISTEN      6784/mongod     
tcp        0      0 0.0.0.0:3002            0.0.0.0:*               LISTEN      11168/node      
tcp        0      0 0.0.0.0:445             0.0.0.0:*               LISTEN      -               
tcp        0      0 0.0.0.0:20256           0.0.0.0:*               LISTEN      9368/node       
tcp6       0      0 :::9090                 :::*                    LISTEN      11340/node      
tcp6       0      0 :::139                  :::*                    LISTEN      -               
tcp6       0      0 ::1:631                 :::*                    LISTEN      -               
tcp6       0      0 :::445                  :::*                    LISTEN      -

所以我想问如何在使用 react-create-app 创建并使用 firefox 通过 npm start 命令运行的 React 应用程序上使用 VSCode 的调试功能？

编辑 1

由于某些原因，当前运行的 firefox 实例出现错误：

[Parent 13358, Gecko_IOThread] WARNING: pipe error (173): Η σύνδεση έκλεισε από το ταίρι: 文件 /build/firefox-JSAO4L/firefox-57.0.3+build1/ipc/chromium/src/chrome/common/ ipc_channel_posix.cc，第 353 行

你知道为什么 firefgox 会关闭调试器吗？

【问题讨论】：

标签： reactjs debugging firefox visual-studio-code

【解决方案1】：

提到的插件有以下 github prepository： https://github.com/hbenl/vscode-firefox-debug

此外，如果您更好地查看文档，它会声明在 firefox 上应用以下配置以启用调试：

可以通过在浏览器的地址栏中输入about:config 来应用上述更改。

之后为了调试，只需使用 vscode 上的配置：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug app",
            "type": "firefox",
            "request": "attach"
        }
    ]
}

现在每次您想调试应用程序时，只需在终端上运行：

firefox -start-debugger-server -no-remote

在 VSCode 上选择“调试”选项并选择如图所示的选项：

【讨论】：

我无法添加任何断点。这个怎么不加？我照你说的做了。这只是一个用于测试两个按钮和函数调用的简单页面。之后我想打开一个本地项目
我遇到了类似的问题，我必须通过about:debugging#/setup 在我的 Firefox 实例上启用调试器，以便它能够连接到我的 React 应用程序并获取断点。