首頁 >開發工具 >VSCode >vscode怎麼斷點調試

vscode怎麼斷點調試

王林原創: 2020-02-07 15:23:2616045瀏覽

vscode怎麼斷點調試

1、開啟Chrome 遠端偵錯連接埠

首先我們需要在遠端偵錯開啟的狀態下啟動Chrome, 這樣VS Code 才能attach 到Chrome 上。

Windows

右鍵點選Chrome 的捷徑圖標，選擇屬性在目標欄，最後加上 --remote-debugging-port=9222，注意要用空格隔開

macOS

開啟控制台

執行指令/Applications/Google\ Chrome.app /Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

開啟控制台執行指令google-chrome --remote-debugging-port=9222

2、安裝Chrome Debug 外掛程式

點擊Visual Studio Code 左側邊欄的擴充按鈕，然後在搜尋框輸入Debugger for Chrome 並安裝插件，再輸入，安裝完成後點選reload 重新啟動。

vscode怎麼斷點調試

3、建立Debug 設定檔

#點擊Visual Studio Code 左側側邊欄的偵錯按鈕，在彈出的偵錯設定窗口中點選設定小齒輪，然後選擇chrome, VS Code 將會在工作區根目錄生成.vscode 目錄，裡面會有一個lanch.json 檔案並會自動開啟

用下面的設定檔覆蓋自動生成的lanch.json 檔案內容。

注意：URL中的連接埠號碼要跟WEBPACK配置的啟動埠號碼一致。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}/src",
      "url": "http://localhost:8080/#/",　
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

vscode怎麼斷點調試