https://blog.csdn.net/xdcx950288/article/details/80640918
號稱2018最火的編輯器，不用用怎麼行？
不多說直接開始踩坑之路。
要在vs中啓動chrome控制檯怎麼辦？vscode並沒有集成環境，這裏我們需要藉助一個插件Debugger for Chrome。
選擇左邊安裝包選項，點擊商店搜索Debugger for Chrome，然後點擊安裝，重新加載。。。
安裝完之後,點擊調試，選擇chrome，我們萬分激動的等待控制檯打開。。。
結果卻是
這樣：
或者這樣：
反正就是不能啓動。無奈去插件主頁翻了翻插件說明，才明白問題所在。下面一一給大家講解問題原因，順帶翻譯部分插件說明，以便大家能順利使用chrome控制檯以及一些其他調試插件。
先貼一張vs官網對debug模塊的整體描述圖，左側圖標欄第三個就是進入調試面板，右下角是控制檯輸入輸出，最下方式調試工具信息。
接着是官方推薦的常用調試工具，今天我們主要講講Debugger for Chrome。
下面是重點。。。
首先我們要搞明白一個重要文件，launch.json。先看下官網對這個文件的描述：
大致意思就是，要使用大多數調試插件，你得創建一個文件用來保存這些插件的配置。vscode把調試插件的文件保存在.vscode文件夾下面的launch.json文件裏。.vscode文件夾作用不用多說，裏面基本就是保存用戶配置或者工作區配置。（這裏再羅嗦一句，用戶配置就相當於全局配置，在所有的工作空間都有效，工作區配置只在當前的項目目錄中生效。）
從這裏打開launch.json配置文件。
一般來說，一個調試工具的配置大概長這樣：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}"
}
]
}
官網對於配置選項的描述如下：
俺帶着高中水平都不如的英文加上百度翻譯，給大家說下大致意思，造福下英文水平跟我一樣的渣渣，英文好的略過。。。
這些選項中，其中最上面的3條是必須的。
type：就是debugger工具的類型，每一個安裝好的調試插件都有自己的類型。比如說node調試工具的type就是node，同理php調試工具的type就是php，我們安裝的Debugger for Chrome的type就是chrome。
request：可以理解爲調試工具的啓動方式，目前官網提供兩種，launch和attach，翻譯過來就是“啓動”和“附加”。就是直接啓動或者掛載到進程啓動，稍後在插件配置中再詳細說明兩種方式的差別。
name：給調試器起一個名字，這個可以自己隨便寫，就是調試器啓動以後最下面顯示的名字。
preLaunchTask：控制檯啓動一次調試之前需要執行的任務，可以把任務命令寫到 文件夾中的 文件，在調試器啓動前會先執行這些任務。
postDebugTask：跟上面差不多，不同的是結束後執行。
internalConsoleOptions：控制調試臺的標籤是否在調試過程可見。
port：當調試工具需要掛載到進程的時候，就要配置端口號了。
Debugger for Chrome插件用到的配置也不多，其他配置有興趣的同學自己瞭解。上面這些配置是所有調試工具的通用配置。下面開始重點說明 Debugger for Chrome插件的配置。
附上插件地址：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
type：選項沒啥說的，就是“chrome”；
request：啓動方式官網給了兩種。關於啓動要先搞明白一件事，vscode並沒有集成chorme控制檯，而這個插件也沒有集成控制檯，那麼插件如何做到使用chrome控制檯呢？很簡單，插件會打開chrome瀏覽器，然後掛載到chrome進程，掛載完成之後，你在vscode中輸入的命令，比如“var a=1”，vscode是並不能識別的，它會把這條語句傳送給chrome進程，由瀏覽器處理這條語句並輸出結果，然後再顯示給vscode的調試器。明白這個原理之後我們就知道：調試器必須要啓動瀏覽器程序。
事實上，調試器控制瀏覽器打開指定html文件，我們手動一樣能完成，它只是幫我們省略了頻繁切換和自己手動打開瀏覽器控制檯的過程。我們知道，瀏覽器打開html文件有兩種方式：1、本地打開。2、通過http服務打開（這兩種方式不用我解釋了吧。。。）
下面先說第一種launch，官網給出兩種方案：
{
"version": "0.1.0",
"configurations": [
{
"name": "Launch localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost/mypage.html",
"webRoot": "${workspaceFolder}/wwwroot"
},
{
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceFolder}/index.html"
},
]
}
其實就是對應瀏覽器打開html文件的兩種方式：有url選項的時候，表示在本地用http服務打開（怎樣在本機開啓http服務不用多說了吧，apache或者iis或者node都可以，反正必須開啓本地http服務）；如果不想開啓服務器，就選擇file配置，這樣瀏覽器會打開本地html文件。
注意：不管選用哪個方式，指定一個文件都是必須的。如果是url，webRoot選項用於將url解析到磁盤上的文件。比如寫localhost/app.js會解析到工作目錄裏面的app.js文件。本地的話，也就是file，直接設置要打開的html文件路徑，${workspaceFolder}意思就是當前工作目錄，如果你寫了${workspaceFolder}/index.html,就必須確保在相應的工作目錄下有這個index.html文件才行。如果找不到這個文件，那麼控制檯是不會啓動成功的。
舉例來說，如果我的工作空間是PRACTICE文件夾，創建好index.html後，調試器打開瀏覽器，地址欄像這樣纔是正確的打開了文件。
如果像是這樣，about:blank
那就是沒有找到對應文件，調試器打開肯定會失敗！只有找到正確文件路徑，才能打開控制檯。
再說說attach，如果選擇了這個選項，就意味着chrome要連接到遠程服務器，所以在瀏覽器啓動的時候要在選項中加上--remote-debugging-port=9222。這個選項是要連接到遠程調試服務器上的，如果不是chrome內核，就沒法連接。還有被牆的話也可能會有影響，反正我是沒有用這個。
attach選項不能設置runtimeExecutable。這個遠程調用時chrome特有的，不允許自己設置瀏覽器。
具體做法就是：
windows下：找到瀏覽器圖標，右鍵單擊，選擇屬性，在目標這一欄加上
Linux：在啓動命令後面直接加上就行。
下面我寫一個常用配置：
{
"version": "0.2.0",
"configurations": [
{
"name": "這裏隨便寫名字1",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/index.html",
"runtimeExecutable":"D:/Program Files/360safebrowser/360Chrome/Chrome/Application/360chrome.exe"
},
{
"name": "這裏隨便寫名字2",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}",
"runtimeExecutable":"D:/Program Files/360safebrowser/360Chrome/Chrome/Application/360chrome.exe"
},
{
"name": "這裏隨便寫名字3",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
上面這3種配置你可以選擇一個適合自己的，也可以3個都選上，如果3個都寫上
隨後可以在左上角選擇切換要啓動的方式，由於我寫了3個，左上角就有了3個，對應也就是name屬性。
再說下你可能會遇到和我一樣的問題：
1、當出現Error processing "launch": Error: 找不到 Chrome，的提示時，意味着vscode找不到默認的chrome路徑，此時
需要我們手動添加瀏覽器路徑，runtimeExecutable: 後面寫上你要使用的瀏覽器路徑，上面圖中我寫的是我自己的路徑，你們換成自己的就好。
2、無法連接到運行中的進程，將在10000毫秒後超時 - （原因：無法連接到目標：connect ECONNREFUSED 127.0.0.1:9229）
按照理論來說，只有使用attach的時候纔會出現這個問題。而事實是，即是你採用哪種方式都有可能會出現這個問題，原因在插件主頁找到答案。
我們看第三條，如果你使用launch出現了這個報錯，因爲chrome實例存在，所以無法掛載到chrome進程，需要關閉正在運行的chrome程序，也就是關掉瀏覽器，必須要關掉全部窗口，然後再從vscode調試工具啓動瀏覽器，這樣就可以愉快的玩耍了。
讓我們來打個window對象試一下：
最後再強調一點，文件路徑非常重要，很多問題都是路徑有問題，要記着，必須找到對應的文件才能啓動瀏覽器控制檯。