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 调试文档