号稱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": , "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對象試一下：
最後再強調一點，檔案路徑非常重要，很多問題都是路徑有問題，要記着，必須找到對應的檔案才能啟動浏覽器控制台。