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保持原样,不会丢失输出

相关推荐
人工智能训练师5 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny075 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy6 小时前
css的基本知识
前端·css
昔人'6 小时前
css `lh`单位
前端·css
Nan_Shu_6148 小时前
Web前端面试题(2)
前端
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队9 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光9 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql52010 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days205010 小时前
LeaferJS好用的 Canvas 引擎
前端·开源