使用 Chrome 开发者工具

无论使用哪种浏览器，每个开发者都需要知道如何在浏览器中使用开发者工具。它们都具有相同的基本功能，因此，一旦你知道如何在一个浏览器中使用开发者工具，你就可以在所有的浏览器中使用它们。

没人真正谈论过开发者工具里的各种标签页。这属于那种你应该知道如何使用或者只是弄清楚的东西。我至少会给你一个基本的解释，关于这些标签页是什么以及什么时候应该使用它们。我个人是 Chrome 的粉丝，所以我所有的开发工具参考都与 Chrome 有关。在浏览器中按 F12 键调出开发者工具。

元素

如果您遇到某个输入框无法与其他输入框对齐的情况，那么首先要尝试一下这里的方法。“元素”选项卡将显示您打开开发者工具的页面的所有 HTML。您将能够看到类名、ID 以及所有注释。

“元素”选项卡的一大优点是您可以轻松操作 CSS。它有一列允许您编辑页面上任何 HTML 元素的样式。这是一个很好的方法，可以解决所有奇怪的 CSS 问题，而无需为了更改颜色等简单的操作而重新编译代码。

您甚至可以将显示器更改为模拟手机屏幕。这对于移动端样式设计非常有帮助，因为您通常无法在笔记本电脑上看到移动端样式。“元素”选项卡是您在所有与 HTML 和 CSS 调试相关的内容中真正应该熟悉的选项卡之一。

安慰

通常，您会在开发工具底部看到一个小控制台。“控制台”选项卡是完整页面版本。在这里，您可以查看已加载页面的任何错误或输出。

如果您正在调试代码，您可以仅使用控制台来检查变量值、执行函数，甚至更改变量值。它不会泄露太多信息，因此您必须寻找一些特定的行为。

大多数情况下，你的控制台可能位于开发者工具的底部，所以这个选项卡并非最重要的。只有在你需要查看更多控制台屏幕内容时，它才有用。

来源

这可以说是开发工具中最实用的选项卡了。在“Sources”选项卡中，您可以查看、编辑页面已加载的代码文件，并为其添加断点。当您查找 JavaScript 错误时，没有什么比这更好的了。这是您在页面运行时访问整个前端代码的方法。

查看这些文件实际上只有在进行本地调试时才有用。否则，你会看到很多抽象的代码，看起来像乱码。不过，你可以在这里设置断点来追踪调用堆栈，并找到某个值的来源。

您还可以在这里查看要发送到 API 或数据库的值。在所有选项卡中，这将是您花费时间最多的地方。这也是为什么您可能会将控制台停靠在开发者工具的底部。

网络

您是否遇到过在“源”选项卡中无法追踪的随机错误消息？那么您可能需要在“网络”选项卡中查找任何错误。由于“源”选项卡仅显示前端代码，如果您在那里找不到错误，最好检查后端问题。

“网络”选项卡会显示是否有任何错误的 API 调用。如果您的任何后端方法存在错误，“网络”选项卡将帮助您找到它们。您将能够查看发送到 API 的请求标头，以查看是否有任何值看起来异常。

不过，你在这里看不到任何后端代码。虽然它能帮你弄清楚从哪里开始查找后端，但你仍然需要做一些深入的挖掘。

表现

如果您的页面经常超时，并且您已经查看了其他一些可能的问题，请尝试此选项卡。在“性能”选项卡中，您可以开始记录资源加载或卸载所需的时间。如果您遇到页面超时问题，这非常有用。

在开始调用函数之前，请务必记得点击“记录”，否则您将没有任何数据可查看。它会显示每次调用耗时的细分，以及代码各部分的执行耗时。

说实话，“性能”选项卡用得不多。但用起来确实是一个不错的选择，可以用来查找代码效率提升的地方。

应用

当您的页面涉及 Cookie 或本地存储时，“应用程序”选项卡非常有用。您可以转到此选项卡查看页面包含的每个 Cookie。如果您需要了解更新未显示的原因，可以查看缓存或会话存储中的内容。

此外，如果用户权限是通过 Cookie 设置的，这也能轻松测试。它可以轻松更改值，无需进行大量额外操作。这里也是清除缓存的好地方。

这是您可能不会经常使用的另一个选项卡，但如果您知道如何使用它，它在某些情况下会非常强大。

你们可能知道 Chrome 开发者工具里还有另外三个标签页：审核、内存和安全。这些标签页很少用到，以至于被其他标签页盖过了。当然，它们在某些特殊情况下可能会用到，只是我还没遇到过足够多的情况。

嘿！你应该在 Twitter 上关注我，理由如下：https://twitter.com/FlippedCoding