一直想寫一篇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的兩種調試方式和要點進行了詳細的分析，希望對大家有所幫助。
最後分享一下代碼調試時的截圖，有圖有真相。
Ubuntu 14.04 安裝Visual Studio Code http://www.linuxidc.com/Linux/2016-03/129052.htm
使用Visual Studio Code開發TypeScript http://www.linuxidc.com/Linux/2015-07/119456.htm
Visual Studio Code 簡單試用體驗 http://www.linuxidc.com/Linux/2015-05/116887.htm
Visual Studio Code試用體驗 http://www.linuxidc.com/Linux/2015-07/120378.htm
Visual Studio 2010 & Help Library Manager 安裝說明 http://www.linuxidc.com/Linux/2012-11/74814.htm
OpenCV 2.3.x/2.4.x在Visual Studio 2005/2008和Visual Studio 2010配置方法詳解 http://www.linuxidc.com/Linux/2012-08/68302.htm
使用OpenCV-2.4.0.exe文件編譯x86或x64平台Visual Studio 2005/2008/2010目標文件 http://www.linuxidc.com/Linux/2012-08/68305.htm
Visual Studio LightSwitch增加對HTML5和JavaScript的支持 http://www.linuxidc.com/Linux/2012-06/63397.htm
Visual Studio 11：使用 C++ 開發一個最簡單的 Metro 應用 http://www.linuxidc.com/Linux/2012-06/62657.htm
Ubuntu 14.04如何安裝Visual studio Code http://www.linuxidc.com/Linux/2016-07/132886.htm
Visual Studio 的詳細介紹：請點這裡
Visual Studio 的下載地址：請點這裡