最近环境有点湿，整点干货使用编辑器内调试 --- vscode webstorm 开启 debug attach 模式

最近环境有点湿，整点干货 --- vscode webstorm debug attach 模式

attach模式可以保留你浏览器安装的插件，同时解决非attach模式下同时debug多个项目需要打开多个浏览器窗口的问题

前置步骤

不管是vscode还是webstorm支持attach都需要的前置步骤，设置好chrome调试端口

针对windows用户

右键你的chrome快捷方式，修改目标为
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9229 --user-data-dir="C:\Users\xxx\AppData\Local\Google\Chrome\User Data" 自行修改以下参数

• --remote-debugging-port -> 修改为你需要的调试端口，默认9229，记住这个后面要用
• --user-data-dir -> 修改为你chrome用户数据目录

apple 用户自己加启动参数，应该都会吧

VSCode

1. 在项目目录下创建文件 .vscode/launch.json，新增内容为以下（注意看注释，需要改端口）

  {
      "type": "chrome",
      "request": "attach",
      "name": "debugger:web",
      // 这个是项目启动的访问地址，需要自己改
      "url": "http://localhost:15173",
      // 这个是对应的代码位置，一般不用改，指到对应的web项目目录就行
      "webRoot": "${workspaceFolder}",
      // 这个端口就是前置条件中让你记住的端口
      "port": 9229,
      "sourceMaps": true,
      "restart": true
    }

2. 把项目跑起来，打开配置好的浏览器
3. 看图，启动调试
4. 把项目跑起来，控制台点一下链接访问一下重要需要从控制台点连接访问才能attach上
5. 在需要的地方打断点就行，看图

6. 愉快的调试吧

WebStorm

说明: 只在2024.1.x版本上用过

webstorm 研究了好久，搜索出来都是让使用javascript调试器，很不好用，只能同时启动一个窗口

1. 打开运行/调试配置，新增一个配置，选择附加到Nodejs/Chrome
2. 修改端口为上面要你记住的端口
3. 把项目跑起来，打开配置好的浏览器，访问一下
4. 点debug，看图
5. 第4步点了之后会让你选，你就选你项目的那个地址就行

6. 找个地方点个红点，试一下子

Over