Devtools（inspect-element）中的插件，显示文件名

Question

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

Answer 1

你可能只需要包含一些注释来说明视图来源的位置，例如在该jade文件的开头包含一个// 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。我可能也会对这样的事感兴趣。但是，我给出了这个答案，但它不存在。但是，无论如何，上述工作都应该起作用。