debugger for chrome调试代码

debugger for chrome调试代码

1. 安装debugger for chrome插件
   

2. 按f5开启debugger，这个时候会弹出框，让选择(我选择的是chrome)
   

3. 选择之后会弹出一个lanch.json配置文件
   
   其中
   name就是你这个调试的程序的一个名字，可以随便取
   url就是你这个程序启动运行起来的ip+port(比如：http:// 10.25.7.78:8080)

修改其中的name和url

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch to Chrome",
            "url": "http://10.25.7.78:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

4. npm start启动项目，然后f5或者点击vscode左边小三角---->选择你配置的name（我这里是Launch to Chrome）的launch.json文件，在点击上面的绿色三角，就会自动打开浏览器，并且进入段点

6. 开始调式

我们在第4步，运行起来项目之后，会在vscode里面看到上面这些按钮，下面我们分别讲一下这些按钮在调试过程中的作用：

按钮1：
点击按钮1的时候，程序会在我们的断点之间来回跳动运行，比如上面第4步中我们打了3个断点，分别在第8行，15行，23行，这时候如果我们只按按钮1，这个时候程序走的位置是23—>8---->15---->(循环一完成)23—>8---->15---->(循环二完成)23—>8---->15…

按钮2：
点击按钮2的时候，这个时候程序走的位置是23—>24---->15---->16—>17---->8---->10—>11---->18---->19---->20----->25---->(循环一完成)23—>24---->15---->16—>17---->8---->10—>11---->18---->19---->20----->25------>(循环二完成)23…

按钮3：
点击按钮3的时候，程序会逐行代码跳动运行，比如上面第4步中我们打了3个断点，分别在第8行，15行，23行，这时候如果我们只按按钮3，这个时候程序走的位置是23—>24---->14---->15---->16—>17---->6----->8---->10—>11---->18---->19---->20----->25---->(循环一完成)23—>24---->14---->15---->16—>17---->6----->8…

按钮4：

按钮5：
按钮5是关闭断点调试