显示文件名的 Devtools（检查元素）中的插件答案

【问题标题】：Plugin in Devtools (inspect-element) that shows filename显示文件名的 Devtools（检查元素）中的插件
【发布时间】：2015-08-13 13:06:26
【问题描述】：

我正在开发一个应用程序，该应用程序的视图呈现在其他视图的主体中。原始视图文件是用jade编写的，但在渲染之前显然已转换为HTML。有没有办法在有或没有外部浏览器插件的情况下在 devtools/inspect-element 中查找原始的玉文件名和/或文件路径？我正在为此使用 Chrome，但如果它具有此功能，我会考虑使用其他浏览器。

【问题讨论】：

标签： debugging pug google-chrome-devtools

【解决方案1】：

您可能只需包含说明视图源所在位置的 cmets，例如在该翡翠文件的开头包含一个 // someFile.jade 并在末尾可能包含一个 // End of someFile.jade。您可能还可以包含一个条件，以便仅在调试模式下显示它很麻烦。如：

//- someFile.jade
include globals.jade //- Allows for checking if in debugging mode
if debuggingMode:
  // someFile.jade
...
if debuggingMode:
  // End of someFile.jade

我认为您需要一个构建工具来创建从 HTML 到 Jade 文件的映射（即：filename.html.map）。虽然，我已经看到它们与 CSS 和 JavaScript 文件一起使用，但不记得在 HTML 中看到过任何东西。我可能也会对类似的东西感兴趣。但是，我在它不存在的情况下给出了这个答案。但是，无论如何，以上内容都应该完成。

【讨论】：

通常情况下，这会很好。但是我没有编写我正在工作的大部分代码库，并且有太多的视图可以追溯。