使用 VSCode 和 Firefox 而非 Chrome 进行 React 调试

Question

使用 VSCode 和 Firefox 而非 Chrome 进行 React 调试

reactjsdebuggingfirefoxvisual-studio-code

31

我尝试使用VSCode的调试“功能”来调试一个React应用程序。到目前为止，通过快速的网络搜索，我发现许多资源声称可以使用VSCode的Chrome调试器进行操作，例如：

但是我找不到使用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创建的React应用上，通过npm start命令在Firefox浏览器上使用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

你有任何想法为什么Firefox关闭了调试器吗？

- Dimitrios Desyllas

3个回答

1

在我的情况下，将超时时间增加到30000有所帮助（否则Firefox根本没有足够的时间启动...）。

   "configurations": [
        {
            .............., 
            "timeout": 30000
        },

- Eduard Askadullin

1

我使用Debugger for Firefox VSCode扩展，并使用以下启动配置：

{
    "name": "Launch Firefox",
    "type": "firefox",
    "request": "launch",
    "reAttach": true,
    "url": "http://localhost:3005",
    "webRoot": "${workspaceFolder}"
},

在启动配置中指定的端口上启动您的应用程序（请注意，根据您的操作系统，执行此操作的语法可能会有所不同）。

PORT=3005 npm start

最后，在VSCode的下拉列表中选择调试器，然后按下f5来启动它（或者按下播放按钮）。

- devklick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dimitrios Desyllas · Accepted Answer

提到的插件在以下 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中选择“调试”选项，按照图片所示选择选项：