使用源文件标记HTML元素

时间:2016-06-05 09:54:14

标签: html asp.net debugging data-binding

问题

所以我们有一个很大的项目,有很多不同的部分视图和客户端数据绑定框架(在我们的例子中是Knockout.js)。

更棘手的部分之一就是越来越难以弄清楚哪个部分视图呈现了我在页面上看到的元素。

所以我需要调试这个特定的DIV。好的,我在哪里可以找到它?

通常我会尝试通过此元素找到一个非常特定的类或ID,并在整个平台上进行搜索 - 远非理想。

问题

所以我在考虑以下事项;使用生成它们的源文件标记所有元素(在调试模式中)。

现在我正在考虑像预编译器那样为每个元素添加data-source=""的东西。我可能会引用字典中的ID来防止重复所有长文件名。

在我重新发明轮子之前:

  • 有类似的东西吗?
  • 有更好的选择吗?

我们正在使用ASP.NET MVC,但是其他平台如何做到这一点的任何提示都是完美的。

2 个答案:

答案 0 :(得分:2)

如果您使用的是Visual Studio,我强烈推荐使用Web Essentials扩展名。在许多出色的功能中,它有一个名为“Inspect Mode”的功能,它是较大的“浏览器链接”功能的一部分,可以完全满足您的需求;它标识特定DOM元素来自的文件。如果该选项对您开放,可能值得一试。

答案 1 :(得分:1)

@Dirk,根据我的理解,您的问题是轻松识别元素/视图。添加data-source可以是一个选项,但在此之前,请查看此链接

Editing Styles and DOM - Chrome Dev Tools

此页面有许多可能对您的问题有帮助的演示。此外,我同意凯文的建议。