reactjs - 使用 VSCode 和 Firefox 而不是 Chrome 进行 React 调试

Question

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

• https://hackernoon.com/debugging-react-like-a-champ-with-vscode-66281760037
• https://medium.com/@auchenberg/live-edit-and-debug-your-react-apps-directly-from-vs-code-without-leaving-the-editor-3da489ed905f

但是我找不到用 Firefox 来做到这一点的方法。到目前为止，我在 VSCode 上安装了“Firefox 调试器”，并设置了以下调试选项:

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

我按照文档说明运行:

firefox -start-debugger-server -no-remote

我尝试通过 VSCode 初始化调试过程，当我这样做时，我收到错误:

connect 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): Η σύνδεση έκλεισε από το ταίρι: file /build/firefox-JSAO4L/firefox-57.0.3+build1/ipc/chromium/src/chrome/common/ipc_channel_posix.cc, line 353

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

Answer 1

提到的插件有以下 github 存储库: 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 上选择“调试”选项，然后选择如图所示的选项: