自定义浏览器 console 输出

338 阅读1分钟

我们在开发vue3的过程的时候,经常会打印ref数据的时候,打开控制台查看打印的数据,结果如下图

image.png

我们可以发现,打印的数据是非常不直观的,我们怎么让这些输出的信息更友好一点,浏览器是允许我们编写自定义的formatter,从而自定义输出的形式,在vue3的源码中有,initCustomFormatter的函数,这个函数就是自定义formatter来使用的,

浏览器设置如下

image.png

image.png 选中后我们再去打印我们的ref数据的时候

image.png 这样就更直观的看出来是ref的数据类型

当然我们也可以自定义我们的formatter函数,而不是使用vue3中自带的initCustomFormatter的函数