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的兩種調試方式和要點進行了詳細的分析，希望對大家有所幫助。

最后分享一下代碼調試時的截圖，有圖有真相。