极光日报
首发于极光日报
使用 VSCode 调试 React 应用

使用 VSCode 调试 React 应用

简评:在 VSCode 中直接调试真的很舒服,省去很多切换到 Chrome 的时间。

创建测试工程

使用 create-react-app 创建工程:

create-react-app vscode-tutorial
open vscode-tutorial -a Visual\ Studio\ Code

安装 Debugger for Chrome Extension

我们需要安装一个名为 Debugger for Chrome Extension 的插件,以便 VSCode 与 Chrome 进行交互。 VSCode 通过 Chrome 的 debug protocol 连接到 Chrome。这是 Chrome 开发人员工具使用的调试协议。您可以使用 VSCode 来调试浏览器代码,而不是使用 Chrome 的开发工具。

配置 VSCode 连接到 Chrome

然后需要配置 VSCode 来连接到 Chrome:

这个时候会自动生成 .vscode 目录到你的工程根目录中,该目录会包含 launch.json 文件,用于配置 VSCode 的调试器,我们需要替换 url 为自己的,react 工程默认是http://localhost:3000。

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

到此所有的配置工作已经完成,其他的配置选项可以参考 链接

启动 Debugger

我们来测试一下这个功能,按 F5 键开始调试我们的项目。如果成功了的话将会弹出这个工具栏:

设置断点

现在可以在我们的 react 应用中添加断点,打开 src/App.js 文件,在代码中第 11 行添加断点。

启动服务

在终端中运行 npm start 启动测试服务,运行调试后会自动启动 chrome 访问到 localhost:3000/ (在 launch.json 文件中配置过的)。此时应用会自动停在断点的位置。

到此已经成功在 VSCode 中调试我们的 react 工程。

原文:Debugging React Like a Champ with VSCode
推荐阅读:新 V8 即将推出,和 Node.js 性能变化
编辑于 2017-10-31

文章被以下专栏收录

    简介:每日导读(或翻译)三篇优质英文文章,内容 80% 涉及硅谷/编程/科技/,期待共同成长。