扒一扒2023谷歌调试工具Chrome DevTools 的新功能,说不定用的上
devtools
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
项目地址:https://gitcode.com/gh_mirrors/de/devtools
免费下载资源
·
使vue3中的reactive object 在Chrome在console中更易理解的方式展现
平常在vue3.0打印一个响应式的数据时候会有很多无用的属性,想看到原本的属性可能不明显,用下面方法让你更好的输出ref 和reactive对象
启用步骤:
1.打开控制台,然后打开console设置
2.前往proferences中的Console,勾选’Enable custom formatters’选项
3.刷新页面
使用css Overview看页面css报告
使用步骤:
Customize and control DevTools > More tools > CSS Overview
然后点击Capture overview生成报告,观察无用属性
更好的支持源代码映射
树结构显示编写代码。这使得该树更类似于您在 IDE 中看到的源文件,并且这些文件现在已与已部署代码分离开来。
启用方式如下:
或者:
补充Source Maps:
源代码与打包之后的映射,在生成的 JavaScript 中查询特定行号和列号时,您可以在源映射中执行查询,该映射会返回原始位置。
X-SourceMap: /path/to/file.js.map
具体参考链接:https://developer.chrome.com/blog/sourcemaps?hl=zh-cn
GitHub 加速计划 / de / devtools
24.59 K
4.14 K
下载
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:1 个月前 )
79116147 - 2 个月前
f0359002 - 3 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)