Debugger for Chrome 調試三種方法

前言

 最近在學習前端技術，由於自己之前一直是用IDE開發，所以第一次使用編輯器調試有點抓瞎。下面整理了VS Code的 三種調試方法，希望能幫助到跟我遇到同樣問題的朋友。

一、Chrome單頁調試（最簡單的一種）

1. 安裝Debugger for Chrome，安裝過程不再贅述。
2. 打開launch.json
3. 點擊添加配置
4. 選擇Chrome:launch
5. 配置啟動頁面路徑

   file": "${workspaceRoot}/hello/table.html"//每次都需要更改此路徑

6. 選擇自己配置調試名稱，Launch index.html (disable sourcemaps)
7. F5運行調試

附上我自己的配置結果

{
    "version": "0.2.0",
    "configurations": [

        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/hello/table.html"//每次都需要更改此路徑
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/ts_demo/greeter.js"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

 

二、本地IIS啟動調試

1.新建網站

2.選擇Launch Chrome against localhost調試模式，並配置IIS站點的地址

 

 

三、Attach To Chrome調試

1. 命令行進入：谷歌瀏覽器安裝目錄/chrome.exe --remote-debugging-port=9222
2. 關閉所有窗口並結束Chorme進程（如果無法附加調試做此操作，可以正常調試請忽略。）

 Debug Chorme 調試文檔