Google Chrome Developer Tools - Download

好东西

伙计，元素面板改变了游戏规则。我遇到了一个布局问题，即 div 在较小的屏幕上始终未对齐。刚刚打开 DevTools，检查元素，并开始实时切换类和样式。 Boom - 看到导致溢出的精确边距。无需保存文件、重新加载、猜测。这是即时的。控制台呢？对于测试快速 JS 片段非常方便。我曾经通过实时记录变量来修复损坏的表单验证。刚刚输入document.getElementById('form').checkValidity()并立即看到结果。为我节省了至少 15 分钟的反复试验时间。 “网络”选项卡也很可靠。您可以准确地看到哪些资产加载缓慢，哪些资产占用了带宽，甚至可以模拟较慢的连接。我用它找到了一张我忘记压缩的巨大图像。审计工具还为我提供了一份关于性能和可访问性的清晰报告 - 对于在投入生产之前进行快速检查非常有用。

不太好的

如果您以前从未接触过开发人员工具，那么它不是最适合初学者的界面。标签（来源、配置文件、时间轴）一开始可能会让人感到不知所措。我记得盯着“时间轴”选项卡思考“为什么会出现在这里？”直到我意识到它随着时间的推移跟踪渲染帧。不直观，但一旦你知道要寻找什么，它就会很有帮助。 此外，由于它内置于 Chrome 中，因此不需要像其他开发工具那样单独下载。如果您使用的是 Windows 并且还没有 Chrome，则需要先安装它。虽然它是免费的，但 Appopedia 上的“下载”链接不会去任何地方 - 所以你实际上只是获取 Chrome 并通过浏览器使用它。可能会让一些期待单独应用程序的人感到困惑。 是的，这对于移动优先的开发人员来说并不是很好，除非您使用 Chrome 的设备模拟。但老实说，这更多是浏览器的限制，而不是工具本身的限制。

底线

如果您正在做任何类型的网络工作 - 即使只是修复博客文章 - Google Chrome 开发人员工具 - 下载 Windows 版也是值得的。它是免费的，充满了有用的功能，而且它可能是网络开发领域使用最广泛的工具。您不需要下载任何额外的东西。只需打开 Chrome，按 Ctrl+Shift+I，然后开始挖掘。对于那些曾经盯着破损的页面并思考“这里发生了什么？”的人来说。 - 这就是你的答案。