1 min read

HTML Inspector

​我们写 CSS、写 JavaScript,通常都会用到 CSSLint、JSHint 这类工具,用于辅助​检查我们代码中的错误或糟糕部分。比起人类的粗枝大叶,通常工具要靠谱多了。

HTML Inspector 是一个类似的工具,当然,它并不是用来检查我们 HTML 代码书写是否规范、是否标签未关闭这种事情。我们知道,HTML 代码里充斥着各种勾子,CSS 样式化的类名,JavaScript 选择器 ID 等等,HTML Inspector 可以帮忙检查,我们的代码是否符合最佳实践,或者说我们自己定义的最佳实践。

用法

在要检查的 HTML 页面中 </body> 前引用 HTML Inspector 代码并立即执行:

<script src="//cdnjs.cloudflare.com/ajax/libs/html-inspector/0.8.2/html-inspector.js"></script>
<script>
      HTMLInspector.inspect();
</script>

当然,我也可以使用 npm 或 bower 来安装。

之后刷新该 HTML 页面,就可以在 console(浏览器控制台)里看到当前 HTML 页面的报告,比如: