本文旨在让开发人员能最大幅度利用vscode的调试模式,能方便快速的定位到问题。

为什么要使用vscode debug

如图可自动断点所有异常，控制台点击直接跳转至开发文件。如果是在chrome中调试，需要自己再周转一次。

要实现这样的功能也非常方便。

配置Chrome

vscode的debug原理是利用chrome的远程调试，所以，我们需要把chrome的远程调试打开。

在命令行中输入以下内容:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

chrome会打开一个全新的访客模式chrome浏览器，这个时候你会有疑问，你想用原本自己的插件，账户等等。

可以看一下 我们运行的命令中，包含了 --user-data-dir=/tmp/chrome-debug你仅需要在这个浏览器中登录自己的账号，chrome在一段时间内将会自动同步你的数据回来。

另外也可以为这个命令设置别名

alias chrome_debug="sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/Users/forsigner/chrome-debug"

以后直接运行即可。

~$ chrome_debug

配置vscode

vscode 有lanuch和attach模式，一个是全新打开，一个是附加到现有的浏览器。

我建议采用attach模式。

现在我们点击vscode的debug，配置一个选项

在配置文件中，输入以下内容:

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "name": "Attach to chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceRoot}"
      }
    ]
  }

还需要为vscode安装chrome插件Debugger for Chrome

OK,所有工作都准备就绪了。

现在使用chrome_debug打开一个全新的浏览器，接着在浏览器中输入http://localhost:8080。最后再vscode中按下F5就会看到vscode的调试器已经连接到了chrome中进行调试了。

这里建议将断点->所有异常打开，这样，我们在运行过程中遇到了异常，都会被vscode接收到。

希望研究react源码的同学，也可以使用这种模式进入断点调试，查看react的设计思路。（建议使用jest测试用例理解源码）

参考

https://github.com/forsigner/vscode-debug-examples/blob/master/JavaScript/react-app-attach/README_zh-CN.md