使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

https://nuxt.com/blog/v3-3

GitHub 加速计划 / de / devtools
24.59 K
4.14 K
下载
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:1 个月前 )
79116147 - 2 个月前
f0359002 - 3 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐