chrome浏览器debug vue项目，跳过vue源码

在开发vue-cli的项目，也会用到webpack，npm等工具。在debug的时候，只是想看当前代码的执行情况。但是调试就会经常进入到vue.esm.js等一些源码文件。一进去就一直跳不出来了，十分麻烦。

Chrome调试

也是才知道，谷歌浏览器其实有一个黑盒功能，可以设置忽略的文件。设置后，debug就不会进入到这些文件。
F12 点击设置按钮
在 Ignor List 里添加要忽略的文件名称即可。

Debugger for Chrome 调试

1.安装插件

2.添加launch.json配置文件
点击设置按钮，vscode会创建一个launch.json配置文件。

修改配置文件如下
注意这里的url对应你本地项目的启动地址。

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Vue Debugger",
            "url": "http://localhost:9538",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "smartStep": true,
            "skipFiles": [
                "node_modules",
                "${workspaceRoot}/node_modules/**/*.js",
                "<node_internals>/**/*.js",
                "node_modules/**/*.js"
            ],
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///./~/*": "${webRoot}/node_modules/*"
            }
        }
    ]
}

我尝试使用skipFiles属性去跳过node_modules的相关文件，但是怎么试都没有效果，有大佬知道的带带~。

3.按F5启动调试
启动后会自动弹出一个浏览器，打开你填写的url。然后就可以在代码里打断点调试了。