实时查看 javascript 个对象模型

Question

是否有工具或技术（除了重复 console.log() 调用）来实时查看网页中使用的 javascript 对象模型？例如：

    firstUser (User)
    -- userName Joe Bloggs (String)
    -- userEmail joe.bloggs@gmail.com (String)
    -- userSelections (Array)
    ----[1,2,4]

    secondUser (User)
    -- userName John Doe (String)
    -- userEmail jogn.doe@gmail.com (String)
    -- userSelections (Array)
    ----[1,2,3]

我知道这可以使用 console.log(firstUser) 和 console.log(secondUser) 来实现，但是能够显示整个数据模型以便我可以看到变量是有用的实时修改。

Answer 1

一个选项是使用 source 选项卡内右侧的 watch 面板来帮助您监控不同的变量

您也可以使用 console.table() 方法（而不是 console.log）将表格数据显示为 table.

Answer 2

最好的方法是配置记录器包（我真的推荐 pinojs ）并为您的应用程序配置“日志级别”策略，您可以阅读更多关于 here

但你也可以这样做：

console.log(JSON.stringefy(user))

Answer 3

您可以在Chrome或Firefox中使用开发工具的调试器。打个断点，查看header.

范围下所有变量的状态

实时查看 javascript 个对象模型

View javascript object model in real time

javascript

browser