使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