## 一、概述 通過vscode的**debugger for chrome**插件實現； ## 二、安裝  ## 三、配置 1、首先，打開工程目錄；  2、選擇VSCode的左邊欄之運行調試欄：  選擇創建launch.json，即可為當前工程創建一個調試配置文件；  選擇chrome環境，創建一個launch.json， 它會在工程的根目錄下，建立一個.vscode目錄，里面包含一個launch.json配置文件，這里可以定義調試的url等信息；  3、完成配置了，可以使用該插件來進行斷點調試了； ## 四、應用 1、在代碼里設置一個斷點；  2、正常啟動的你的項目，比如npm run serve； 3、啟動完畢，點擊運行調試欄的啟動調試圖標，這樣會調出chrome瀏覽；  彈出之后，斷點就生效了，可以看到瀏覽器端的標記：  VSCode代碼端停在斷點那里了，能看到變量的值了，也能夠通過頂上的調試按鈕，操控調試進程了（跟后端調試基本沒有差異了）：   ## 五、調試命令  | 按鍵 | 操作 | | --- | --- | | F5 | 跳過當前斷點，跳到下一個斷點，如果下面沒有斷點了，則執行完所有當前代碼；| | F10 | 跳過當前斷點，單步到下一行代碼處，在當前源碼行，逐行調試，不會進入當前代碼的調用堆棧中去；| | F11 | 單步調試，在當前源碼行，進入調用堆棧中去| | Shift+F11 | 單步跳出，在當前源碼行，從調用堆棧中跳出原來代碼行| | Ctrl+Shift+F5 | 重啟當前調試 | | Shift+F5 | 停止當前調試 | ## 六、監控變量 通過調試標簽頁，可以在監視窗口，隨時增加監控的變量；  增加要觀察的變量：