1. 程式人生 > >Visual Studio Code 配置斷點除錯

Visual Studio Code 配置斷點除錯

  • 安裝 Visual Studio Code 後,安裝擴充套件:

    1. Debugger for Chrome
    2. Vetur(安裝後可以打斷點)
    3. Chinese (Simplified) Language Pack for Visual Studio Code
  • 從左側欄進入除錯模組,點選右上方的齒輪,生成 launch.json,內容為:

{
  // 使用 IntelliSense 瞭解相關屬性。 
  // 懸停以檢視現有屬性的描述。
  // 欲瞭解更多資訊,請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations"
: [ { "type": "chrome", "request": "launch", "name": "vux: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}" } ] }
  • 右擊 Chrome(包括附在工作列上的Chrome圖示)進入屬性,在目標的值後面加上:(注意前面要先加空格)--remote-debugging-port=8080
  • 執行npm run dev後,點選 VS Code 除錯模組上的綠色三角形按鈕即可進入除錯狀態。