【前端调试】如何优雅调试React

前言

在日常工作中，你是不是通过以下方式来排查问题：

• 意念调试，赌哪里存在问题？或者看代码找问题
• console.log打印日志
• 通过键入debugger进行调试
• 通过VsCode debugger调试

不同方式效率不同，能够应用的场景也不一样，这节就来分享一下如何高效调试React项目。

调试react项目

使用CRA新建一个React项目：create-react-app react-debgger，运行npm start把项目跑起来

1、键入debugger调试

通过键入debugger调试是这样的，我们在App.js代码中键入debugger：

刷新浏览器，Chrome devtools会在指定的地方断住，就可以开始调试了

实际上我们是用第三方IDE如VsCode写代码的，这样并不方便，并且每次改动之后还需要手动刷新，调试完之后需要手动找到所有 debugger 的地方删除掉。

还记得之前有一个同事，调试完之后没有删除debugger然后提交到公共测试环境中，测试骂骂咧咧在群里找过来说怎么页面动不了了，直接打断了别人的工作，这是很不好的。

2、 VsCode debugger 调试

可以直接通过VsCode内置的调试器来调试，本节介绍我常用的调试配置

首先新建一个launch.json配置文件

这里选择Chrome调试

生成默认的配置属性

{
  // 使用 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:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

我们稍微加一些配置，改成这样子，运行看看效果。

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "react调试",
      "url": "http://localhost:3000",
      "runtimeExecutable": "canary",
      "runtimeArgs": [
        "--start-maximized",
        "--auto-open-devtools-for-tabs"
      ],
      "webRoot": "${workspaceFolder}"
    }
  ]
}

可以看到点击调试自动开启了新的调试浏览器Chrome canary，并且自动打开了Chrome的调试窗口。

稍微解释一下配置信息：

• 将端口改为react默认的3000。跟着
• runtimeExecutable 为指定一个新的调试浏览器，默认是stable，这里改为canary，它是Chrome的调试版本，没有的话需要先下载
• runtimeArgs 是运行时参数，--start-maximized会将窗口最大化，--auto-open-devtools-for-tabs则是自动打开调试窗口，这些是Chrome的启动参数

在App.js中打个断点，重新启动调试，会发现自动在VsCode代码中停下来了，这时候就可以内置调试器。

相比 Chrome devtools 有什么好处呢？

• 我们可以随时修改代码，重新点击重启就可以再次进去调试

• 不会对代码进行侵入式污染
• 可以编辑断点，增加调试条件，在调试源码时非常有用

具体可以参考我的这篇文章：# 通过Vs Code调试，我找到了Ant Design Table运行报错问题~

定制调试片段（Snippets）

有同学可能会说，在每个项目中都要手动配置一下launch.json调试配置，并且日常工作中不仅仅有React调试，而且还有Vue调试、Node调试、Nest调试等

没错，我们可以使用Snippets来定制调试片段，以React为例。

在VsCode中Command+shift+p打开命令窗口，同时输入snippets，选择配置用户代码片段

选择新建全局代码片段文件

自定义片段名称，如React-debugger

这时可以看到VsCode提供了默认的例子，表示输入log的时候自动不全console.log()语句

"Print to console": {
    "scope": "javascript,typescript",
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}

由于Snippets的特殊语法需要转义，我们使用这个在线工具转换一下

把它改为这样

接着在launch.json测试一下

这样就可以随意在项目中使用我们需要的调试片段了，比如我之前调试Vue时，每次都要输入webapack路径映射，显得很麻烦

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "调试指定vue页面",
            "url": "http://localhost:5000",
            "sourceMapPathOverrides": {
                // 路径映射
                "前端调试://src/*": "${workspaceRoot}/src/*"
            }
        },
    ]
}

改为Snippets就很方便了

总结

前面讲了在VsCode中调试技巧，可以通过配置launch.json文件实现各种调试手段，runtimeArgs支持传递多种Chrome启动参数

最后介绍了如何定制Snippets，各种前端调试场景都可以配置进去，除此之外，还可以配置Vue或React的组件模板、自定义Hooks模板、第三方antd table组件等等，减少重复性工作。