VSCode调试Angular

配置Chrome的Debugger实例

  • 创建Chrome Debgger实例快捷方式
    • 右键桌面->新建快捷方式->输入chrome.exe的路径
    • 修改快捷方式的属性
    • 将目标更改为C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9221 --user-data-dir=/tmp/chrome-debug -- "%1
  • 通过命令行打开Chrome Debug实例
    • 打开cmd窗口
    • 通过下面的命令导航到chrome.exe的文件夹
      1
      cd C:\Program Files (x86)\Google\Chrome\Application
    • 执行下面的命令打开Chrome Debug实例
      1
      chrome.exe --remote-debugging-port=9221 --user-data-dir=/tmp/chrome-debug
  • 启动Angular项目
  • 在Chrome Debug实例输入Angular的调试地址
  • 修改.vscode/launch.json
    1
    2
    3
    4
    5
    6
    7
    {
        "type": "chrome",
        "request": "attach",
        "name": "Debug Angular",   
        "port": 9221,  
        "urlFilter": "https://localhost:44358*",        
    }
  • 启动项目测试