使用chrome的VScode插件调试器调试react源代码的方法

代码调试是我们前端日常工作中不可或缺的能力。

在面向dom开发的时代，我们在开发的时候直接在chrome中中断点是非常方便的。然而，当我们为组件开发时(react)，浏览器会得到我们编译的代码，在浏览器中几乎不可能有断点。

事件

怎么办，方法总是比难度多！愚蠢，我想到了控制台/调试器！一直在用，虽然不方便(打印太多太乱！上线就要删除配置)，但是用了很久(这确实是一个不好的编码习惯)。直到今天，我想研究反应源代码。断点多，无法手动使用控制台/调试器！我才意识到为什么不用浏览器调试器。

Chrome调试器

因为我用的编译器是VS代码，我终于拿到了！我找到了Chrome插件的调试器。

然而，纯英语的文档不是很友好。虽然我的英语六级已经考完很久了，还是来介绍一下，记录下mac系统下的用法吧。完整的文档需要能够自己阅读文档

1.加载插件

2.配置插件

点击bugs选择chrome；

然后点击小滚轮，打开launch.json文件，如下所示：

{//使用IntelliSense了解相关属性。//悬停查看现有属性的描述。//更多信息请访问： https://go.microsoft.com/fwlink/? Linkid=830387 ' version ' : ' 0 . 2 . 0 '，' configurations ' :[{ ' type ' : ' chrome '，' request' :' launch '，//launch/attach；使用launch' name' : '针对localhost启动chrome '，//愉快地设置一个名称' URL ' : ' http://localhost 33609000 '，//项目地址' web root ' 3360 ' $ { workspace folder }/react-demo/'//。WebRoot指定网络服务器根目录工作区的绝对路径。${workspaceFolder}在编辑器中指示根目录应该在什么时候，我的项目是react-demo，所以选择webRoot如上修改，具体路径也和webpack配置的资源根目录有关。}//有很多可配置的属性，可以通过以上文档查看]}3。开始调试

点击小按钮开始调试模式；像下面这样，我们可以在源代码中突破点；

开始调试后增加一个小窗口，可以控制断点方向，结束暂停调试。断点列表显示在下面。

同时，我们将打开为我们配置的url页面；

还可以看到调用栈和打印表，可以说非常方便

好了，这里可以使用我们的react调试配置，不需要手动写debug！你可以开始愉快地搬砖了

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。