在Chrome Devtools控制台中计算Vue.js状态对象的所有属性？

每当我想在Chrome中检查Vue实例上的一些实时数据时，我都必须单击该对象以查看任何数据，因为所有值都已转换为getter和setter

图中包含了我的意思的一个例子。我在数组的索引

0

处单击了对象的

name

属性，只有在那时，我才能将该值视为字符串“永久”。当我只想一目了然地查看我的数据时，这真是令人讨厌

是我真正想要的一个例子。如您所见，通过在

JSON.parse

中使用

JSON.stringify

，我从对象中删除了“可观察性”，现在可以在控制台中轻松查看它

显然，每次执行此操作都比单击数组并单击要计算的对象属性更麻烦（如果我的数据包含

RegExp

对象或其他与JSON不兼容的数据，也不是一个选项），但希望它有助于显示我的目标

---

有人告诉我有更好的方法。我只想让Chrome Devtools自动计算我打印到控制台的对象中的所有getter值，这样我就不必一直点击我的数据结构来快速查看数据。

也许您正在寻找Vue Chrome Devtools扩展，它非常棒：

它还具有vue组件树、可编辑数据和道具、事件、时间旅行调试和路由器支持