MacOS VS Code 使用attach mode debug 前端项目

我真的叫奥运2023-09-07 18:00

背景

之前一直用win，mac真的不熟，找了一圈方案就是为了直接在已打开的chrome上调试，launch模式下没有默认打开devtool，插件也全部没有，停止调试会关闭浏览器窗口，很不方便

基本参考how-to-make-chrome-always-launch-with-remote-debugging-port-flag

解决方法

attach mode需要在启动chrome时带上remote debugging port 参数，指定端口号，和attach mode指定的端口号一样才可以

macos和windows不同，无法更改快捷方式加启动参数，最后用命令行解决

创建sh文件，复制代码并保存
运行 mv start-chrome.sh /usr/local/bin/sc 移动到启动目录并改名
直接命令行执行sc即可

bash 复制代码

#!/usr/bin/env bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222&

注释表示指定启动env路径，用env执行bash（在$path 中找bash），可以设置sh，也可以直接指定命令位置 #!/bin/bash
最后加&表示后台运行，运行后关闭终端窗口也不会影响已打开的chrome
创建application并在执行文件内复制shell脚本的做法疑似会被m2芯片识别为x86程序，最终虚拟机启动，会导致chrome非常卡，无法正常使用（本人很菜，可能有简单的xcode编译swift执行shell之类的解决方案，欢迎共享）
终端 terminal 搜ter快速打开
执行命令之前，现有的chrome需要command + Q 完全退出，否则会被复用，无法打开远程调试

vsc attach配置

bash 复制代码

    {
      "name": "Attach to Chrome",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}",
      "url": "http://localhost:3000/*",
    },

依然存在的问题

f5调试开始之后，如果断开调试，已打开的页面会直接白屏，目前只能在vsc切换断点的状态来保证调试不影响正常编码
开机后打开chrome仍然需要先打开终端，始终多了一步

最终效果

直接在vscode中击中断点，无需在chrome devtool中断点调试

chrome插件加载齐全，无需重新点击进入问题页面，devtool保持原样，不会丢失输出