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

背景

之前一直用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不同,无法更改快捷方式加启动参数,最后用命令行解决

  1. 创建sh文件,复制代码并保存
  2. 运行 mv start-chrome.sh /usr/local/bin/sc 移动到启动目录并改名
  3. 直接命令行执行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保持原样,不会丢失输出

相关推荐
@大迁世界2 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙2 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump3 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD3 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro3 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin3 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马3 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端
用户1456775610374 小时前
干净的图片批量处理,处理速度飞快
前端
用户1456775610374 小时前
亲测好用!简单实用的图片尺寸调整工具
前端
索西引擎4 小时前
npm、yarn、pnpm
前端·npm·node.js