VS Code - Debugger for Chrome调试JavaScript的两种方式

VS Code - Debugger for Chrome调试JavaScript的两种方式

最近因为出差的缘故，博客写的不是不少，一直想写一篇VS Code - Debugger for Chrome相关的文章，没想到一直拖到了今天。VS Code 开源之后确实在社区获得了不少人的支持，当中不少优势想必不用我多说，今天讨论的主题是Debugger for Chrome这个插件的使用。在网上简单找了一下，没有找到这个主题讲的特别好的文章，因而笔者写了这篇文章。

说实话，看了以下这篇文章，对于如何上手可能不少人仍是只知其一;不知其二，以为说的不够透彻，由于关于如何new instance和attach，这篇文章写得不够透彻，也不够详细。

https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

下面咱们来简单分析一下VS Code - Debugger for Chrome调试JavaScript的两种方式的要点

1. 首先是要有一个.vscode/launch.json文件，这个文件须要建在源码文件夹下，其中.vscode是个目录，launch.json是一个调试用的文件，调试器靠他来new instance和attach，示例以下，前半部分配置用于new instance方式的调试，后半部分的配置用于attach方式调试。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome and new instance of Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080/Test/index.html",
            "sourceMaps": true,
            "webRoot": "E:/apache-tomcat-8.0.21/webapps/Test"
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

2. 对于url方式的调试须要web server支持，不然会有网络链接问题，对于本机attach的方式Chrome的启动须要启动参数，好比：

”--remote-debugging-port=9222”

3. 不论attach 仍是 new chrome instance都须要经过webroot参数指定源文件的路径，这一点从体验上完败给直接的浏览器调试，由于直接的浏览器调试不须要这个配置也能调试，打断点，若是调试者自己没有源代码更麻烦。

 

总结

本文对VS Code - Debugger for Chrome的两种调试方式和要点进行了详细的分析，但愿对你们有所帮助。

最后分享一下代码调试时的截图，有图有真相。