在vscode中给vue2项目打断点调试实践

1.调试配置文件：在项目根目录下，创建一个名为.vscode的文件夹，并在该文件夹中创建一个名为launch.json的文件。该文件用于配置调试设置。

{
    // 使用 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:8090",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
            "webpack:///src/*": "${workspaceFolder}/src/*"
      }
           
        }
    ]
}

2.在vscode中正常启动项目

启动之后访问路径是http://localhost:8090。如果是其他的，步骤一种的url要对应修改。

3.快捷键f5，启动vscode调试对应的远程浏览器。

或者手动启动

启动成功后，在编辑器上可以看到断点调试弹框

4.接下来就可以直接点击编辑器代码最左边，打断点，如果代码执行到该位置，打开的浏览器会自动断住，vscdoe页面也会在指定位置断住。

此时在浏览器和vscode两边都可以进行调试。

5.在vscode中调试好处是

1)可以随时修改代码，调试。 2)查找文件方便。浏览器端要ctr+p查找文件，还有很多同名文件干扰。

6.注意事项

1).sourcemap使用使用source-map，浏览器端和vscode端文件才可以正确对应。 2).浏览器端打开的浏览器不是自己打开的，只能是按照步骤3，启动之后，自动打开的浏览器在和vscode关联起来。自己打开的浏览器不得行。