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

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