是否可以在 Chrome 中查看 jQuery 添加的数据

Posted 2023-03-07

【中文标题】是否可以在 Chrome 中查看 jQuery 添加的数据

【英文标题】：Is it possible to view jQuery added data in Chrome

【发布时间】：2011-08-21 22:53:25

【问题描述】：

在创建网站时，我经常使用 jQuery 的 .data() 函数向元素添加数据。

是否可以查看与 Chrome 中的元素一起存储的所有数据？

所以当我检查一个元素时，它会在 Chrome 本身中显示数据。

如果没有，是否可以编写一个插件来“扩展”到 Chrome element inspector 以也显示到数据？

【参考方案1】：

打开检查器，进入控制台，输入

$('<some selector>').data()

然后点击return来评估data()方法并直接显示它的返回值。

除非您在非交互式代码中调用它，否则无需使用 console.log。

【讨论】：

这对我没有帮助。我遍历了许多具有相同类的 div，并为每个 div 存储单独的数据。现在我想查看这些数据，但我无法轻松地使用您的方法单独选择这些 div。

@Toni Try $('<some selector>').map(function (el) return el.data(); )

提示：如果您在 Elements 窗口中选择一个元素，它在控制台中将变为 $0。然后您可以输入$($0).data() 另一个提示：使用Esc key 在分屏中查看元素和控制台。

BobStein-VisiBone：魔法！在任何地方都找不到此信息，它应该是公认的答案。

同意韦德哈特勒。这是今天对我来说第二个很棒的提示。另一个是 Chrome 的“设置为全局变量”功能。

【参考方案2】：

Chrome Query

可以在Chrome Extensions Webstore 中找到并在开发者工具的属性面板中添加另一个选项卡。

【讨论】：

完美，非常感谢！您的答案应该是新接受的答案。

扩展做了它应该做的。真的很舒服。开发栏应在安装后关闭并重新打开。

这似乎不再适用于最新版本的 Chrome

扩展类型的作品，但数据字段不会随着它们的变化而实时更新。

【参考方案3】：

在 chrome 控制台中输入：

console.log($('selector').data());

它会在该元素中列出data

【讨论】：

如果在咨询中执行此操作，您可以省略console.log(…)，直接运行$('selector').data()。结果仍将打印在控制台中。

【参考方案4】：

Chrome Query

【参考方案5】：

因此，我不使用$(selector).data() 模式，而是使用更自然的html $(selector).attr('data-name','value') 将值添加到实际的HTML。

$(selector).attr('data-name','value') 在 IE8+ 浏览器中不起作用。 .data() 是首选。此外，用户定义的 var 例如：data-name 不是 HTML 中的属性。

【讨论】：

同意，这是一种比 'data()' 更容易发现的模式

我同意原始数据类型，但复杂类型呢？

我可能会争辩说你应该有一个视图模型或数据模型，这取决于你的模式。在淘汰赛中，您可以看到节点上下文。在其他模式中，您可能只在其中存储一个 ID，然后通过基于 ID 的委托进行查找。甚至还有一些 chrome 插件可以在调试器/检查器中显示 Knockout 的节点上下文。