讲师中心 微信公众号

工具推荐

视频效率加速
Seko
Seko

AI短剧一键生成成片

updream

一键生成高质量推广成片

Laper
Laper

剧本策划到成片协作

立刻MV
立刻MV

低成本歌曲 MV、视频生成

VSCode的Debugger for Chrome已过时?了解内置调试器

夏强吖_4835

夏强吖_4835

发布时间:2026-01-11 21:34:02

|

700人浏览过

|

来源于php中文网

原创

VSCode内置JavaScript Debugger已替代Debugger for Chrome插件,需启用官方调试器、将launch.json中"type":"chrome"改为"pwa-chrome"、配置sourceMapPathOverrides映射、确保sourcemap正确生成,并可选attach模式调试。

vscode的debugger for chrome已过时?了解内置调试器

如果您在VSCode中尝试使用Debugger for Chrome插件进行前端调试,却发现插件未生效、断点无法命中或扩展市场显示“已弃用”,则可能是由于该插件已被官方整合或替代。以下是解决此问题的步骤:

本文运行环境:MacBook Pro M2,macOS Sequoia。

一、切换至内置 JavaScript Debugger

VSCode 自 1.46 版本起已将 Debugger for Chrome 功能合并进官方内置调试器,不再依赖独立插件。该调试器以 JavaScript Debugger (Nightly) 或默认启用的 JavaScript Debugger 形式存在,支持 Chrome、Edge 及其他基于 Chromium 的浏览器。

1、打开 VSCode 扩展视图(快捷键 Cmd+Shift+X)。

2、搜索 JavaScript Debugger,确认其状态为“已启用”且来源为 Microsoft。

3、若存在已安装的 Debugger for Chrome 插件,点击其右下角“卸载”按钮并重启 VSCode。

二、验证 launch.json 中 type 字段是否适配新调试器

旧版 launch.json 使用 "type": "chrome",而内置调试器要求使用 "type": "pwa-chrome" 或 "type": "pwa-msedge",否则调试会静默失败。

1、在项目根目录打开 .vscode/launch.json 文件。

2、将原配置中 "type": "chrome" 替换为 "type": "pwa-chrome"。

3、确保 "request" 字段仍为 "launch" 或 "attach",其余字段如 "url" 和 "webRoot" 保持不变。

三、检查 sourceMapPathOverrides 映射是否兼容 Webpack/Vite 构建路径

现代构建工具(如 Vite、Vue CLI、Webpack 5+)生成的 sourcemap 路径与旧版 debugger 不一致,需显式声明映射规则,否则断点无法定位到原始源码。

1、在 launch.json 的对应 configuration 中添加 "sourceMapPathOverrides" 字段。

HISUI 前端框架开发指南(IRIS版)
HISUI 前端框架开发指南(IRIS版)

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库,专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考,支持声明式与编程式两种初始化方式,提供 $cm/$m 数据访问方法。

下载

2、针对 Vite 项目,设置为:{"*": "${webRoot}/*"}。

3、针对 Webpack 项目,设置为:{"webpack:///src/*": "${webRoot}/src/*"}。

四、启用自动 sourcemap 识别并验证构建输出

内置调试器依赖有效的 sourcemap 文件(.js.map)与源码文件共存,若构建未生成或路径错误,调试将退化为压缩后代码断点。

1、检查项目开发服务器启动日志,确认输出中包含 "sourcemap: true" 或类似提示。

2、打开浏览器开发者工具 → Sources 面板 → 展开 localhost → 查看是否存在 src/ 目录及可展开的原始 .vue 或 .ts 文件。

3、若仅显示 bundle.js 且无 src 层级,说明 sourcemap 未正确注入,需修改 vite.config.ts 或 vue.config.js 中的 build.sourcemap 或 devtool 配置。

五、以调试模式启动 Chrome 并手动附加

当 launch 模式失效时,attach 模式可绕过 VSCode 启动流程,直接连接已运行的、启用远程调试端口的 Chrome 实例。

1、完全退出所有 Chrome 进程(包括后台进程)。

2、终端执行:open -a "Google Chrome" --args --remote-debugging-port=9222(macOS)。

3、手动访问 http://localhost:3000(或对应开发地址)。

4、在 launch.json 中新增 configuration,"request": "attach","port": 9222,"webRoot": "${workspaceFolder}"。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2315

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3802

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1256

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4399

2025.09.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2966

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

6159

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

4387

2026.03.24

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

3142

2023.08.21

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

80

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn