反应调试使用VSCode和Firefox而不是Chrome

时间:2018-01-02 11:16:54

标签: reactjs debugging firefox visual-studio-code

我尝试使用VSCode的调试“功能”调试react应用程序,到目前为止,通过快速Web搜索,我发现很多资源声称如何使用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创建的React应用程序上使用VSCode的调试功能并使用firefox运行npm start命令?

编辑1

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

  

[Parent 13358,Gecko_IOThread]警告:管道错误(173):Ησύνδεσηέκλεισεαπότοταίρι:file /build/firefox-JSAO4L/firefox-57.0.3+build1/ipc/chromium/src/chrome/common/ ipc_channel_posix.cc,第353行

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

1 个答案:

答案 0 :(得分:6)

上面提到的插件有以下github存储库: https://github.com/hbenl/vscode-firefox-debug

另外,如果您更好地查看文档,它会声明要在firefox上应用以下配置以启用调试:

Uploaded image

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

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

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

现在,每次要调试应用程序时,只需在终端上运行:

firefox -start-debugger-server -no-remote

在VSCode上选择“Debug”选项并选择图像显示的选项:

Selecting Vscode debugger