如何使用 Chrome 开发者工具改进您的 WordPress 网站

已发表: 2015-07-06

铬开发工具 Chrome 开发者工具 (DevTools) 是一组令人惊叹的 Google Chrome 网络创作和调试工具。 DevTools 提供对构建网页的元素的访问。 您可以使用 DevTools 解决布局问题、查看和修改 CSS、设置 JavaScript 断点、检查代码以进行优化等等。 DevTools 是免费的，并且已经内置在您的 Chrome 浏览器中。 因此，如果您拥有 Chrome，那么您已经拥有它们。

在本文中，我们将概述这些工具是什么以及如何使用它们来改进您的 WordPress 网站。

打开工具

打开工具

有几种打开工具的方法：

  1. 选择 Chrome 菜单，选择工具，然后选择开发者工具。
  2. 右键单击屏幕上的任何元素并选择检查元素（我的首选方法）。
  3. Ctrl + Shift + I（适用于 PC）| Cmd + Opt + I（适用于 Mac）

开发工具窗口

工具窗口包含两个面板。 它们都包含可以一起使用的工具。 下面来看看这些工具。

第一个包含 8 组工具。 这些工具包括：

  • 元素
  • 网络
  • 来源
  • 时间线
  • 简介
  • 资源
  • 审计
  • 安慰

第二部分包含：

  • 风格
  • 计算
  • 事件监听器
  • DOM（文档对象模型）断点
  • 特性

您可以通过多种不同的方式查看这些工具。 您可以调整窗户的大小以腾出空间。 您还可以将窗口重新定位到屏幕的右侧，以便为您提供一个分屏，其中一侧是工具，另一侧是您的网站。

元素

元素

此面板向您显示 DOM 树，它代表您页面的 HTML 元素，并允许您检查或编辑任何元素。 您可以实时查看 CSS 调整。

您可以通过单击节点（它们看起来像箭头或三角形）来打开和折叠任何面板，以便更轻松地查看和导航。 DOM 树视图显示树的当前状态，而不是原始 HTML（例如，它可能已被 JavaScript 修改）。

当您将鼠标悬停在树视图中的元素上时，网页上的元素将突出显示。 它将显示诸如字体样式、图像大小等信息。

如果单击其中一个元素，右侧的窗口将显示 CSS。 在这里，您可以选择样式并对字体、颜色、大小、边距、边框、填充等进行修改。

在页脚中，您会看到面包屑，因此您可以在需要时回溯。 您只需单击它们并输入您的更改即可编辑任何元素。 当您按 Enter 时，您会看到更改发生。

元素 1

例如，此图像当前为 600 像素宽。 我可以选择宽度并输入一个新值，然后按 Enter。

元素 2

图像立即更改为新尺寸。

要更改字体的样式，只需选择字体并在右侧的样式窗口中选择要更改的内容。

要素 3

您甚至可以拖动元素并将它们放在新位置以更改页面布局。

元素 4

我只是通过拖动 div 将最近的评论移到最近的帖子之上。

要素 5

右键单击为您提供了一组新功能。 您可以查看各种元素状态、修改为 HTML、设置中断、复制 CSS 路径等等。 您也可以右键单击并删除节点。 这太容易了，几乎令人恐惧。

我已经使用这个工具来查找图像大小并检查代码片段。

网络

网络

网络面板显示请求和下载您网站的哪些资源。 它是实时绘制的。 查看哪些元素的下载时间最长，可以让您深入了解要解决哪些问题以优化您的页面。

您可以过滤和显示不同的视图和类型的图表，例如瀑布图。 您可以记录网络活动并将其保存，以便以后进行分析。

您可以查看资源的详细信息。 详细信息包括：

  • HTTP 请求和响应标头——显示请求 URL、HTTP 方法、响应状态代码，并列出 HTTP 响应和请求标头及其值以及查询字符串参数。
  • 资源预览 - 显示图像和 JSON 资源的预览。
  • HTTP 响应——这显示了资源的未格式化内容。
  • Cookie 名称和值——显示在资源的 HTTP 请求和响应标头中传输的 cookie，并清除 cookie。
  • WebSocket 消息——这个显示通过 WebSocket 连接发送或接收的消息。
  • 资源网络计时——这显示了加载资源所涉及的网络阶段所花费的时间图表。

瀑布视图是查看每个元素从请求开始到传递元素的最后一个字节所花费的时间的好方法。 通过查看哪些元素花费的时间最多，您可以更好地了解在哪里进行调整。

您可以保存网络数据以供将来分析。

来源

来源

您可以使用源面板来查看和调试您的代码，例如作为加载页面一部分的 JavaScript 和脚本。 您可以暂停、恢复、单步执行代码以及在出现异常时暂停。 它包括基本的代码执行功能，因此您可以单步执行、单步执行、单步执行和切换断点。 您可以使用断点来调试 JavaScript、DOM 更新和网络调用。 您还可以设置条件断点，任何表达式都可以返回为真或假。 如果满足条件，断点将暂停代码。

有一个漂亮的打印功能，使缩小的代码易于阅读。 这也使您更容易查看断点的放置位置。 如果这不能像您需要的那样工作，您可以使用基于 JSON 的映射格式，称为源映射。 源映射由内置此功能的缩小器创建。

时间线

时间线

时间轴面板显示页面加载和使用所花费的时间。 它将在时间线上绘制和绘制每个事件。 它将显示 JavaScript、计算样式和重新绘制等资源。 您可以记录事件并逐步分析它们。 共有三种模式：

  • 事件 - 按类型组织的所有事件的列表。 这会向您显示哪些任务花费的时间最多。
  • 框架——这显示了在您网站的渲染性能的每个框架中必须完成的工作。 例如，如果您的网站以每秒 60 帧的速度呈现，它将向您显示在 1/60 秒内完成的工作。 这包括加载脚本、绘制布局、处理事件等。您可以使用它来查看页面加载中的任何异常活动。
  • 内存 - 这会随着时间的推移绘制出您的内存使用情况。 它向您展示了保存在内存中的所有文档、节点和事件侦听器。 这有助于找出导致内存泄漏的原因。

简介

简介

在这里，您可以分析网页和应用程序的执行时间和内存使用情况。 这向您显示了资源的使用位置。 这是优化代码的好工具。

它将记录三种 Profile 类型：

  • 收集 JavaScript CPU 配置文件——这显示了 JavaScript 函数的执行时间。
  • Take Heap Snapshot——这显示了你的 JavaScript 对象的内存使用和分布。
  • Record Heap Allocations - 这会记录您的对象分配以显示随时间的内存泄漏。

资源

资源

您可以使用此面板检查资源。 它将向您显示有关 IndexedDB、Web SQL 数据库、应用程序缓存 cookie、本地和会话存储等的信息。 您还可以检查您的视觉资源，例如字体、图像和样式表。

IndexedDB选项卡允许您检查 IndexedDB 数据库和对象存储，以及查看和删除记录。

您可以运行SQL 命令并以表格格式查看结果。 当您键入命令时，它将为您提供有关表名、命令和子句的提示。

cookie选项卡显示有关由 HTTP 或 JavaScript 创建的 cookie 的信息。 您可以单独或分组删除它们。

Chrome 缓存应用程序资源。 应用程序缓存选项卡可让您查看这些资源的状态。 它还将显示资源的 URL、资源类型及其大小。

本地和会话 存储面板允许您查看、创建、删除和编辑使用存储 API 创建的本地和会话存储键/值对。

审计

审计

审核面板会在页面加载时对其进行分析，并建议修复以优化页面加载。 它有两个审计，将信息分为两类：网络利用率和网页性能。 您可以同时运行两种审计，也可以只运行您想要的一种。 您可以在页面的当前状态下运行审核，或重新加载页面并在加载时进行审核。

它没有像 Google PageSpeed Insights 那样详细，但它确实为您提供了足够的信息来解决低垂的果实。 在通过 PageSpeed Insights 之后，我的页面状态良好，但它确实为我提供了一些关于我的网站的信息，而 Insights 没有。

安慰

安慰

控制台用于调试。 您可以记录诊断、输入命令、评估 JavaScript、创建 JavaScript 配置文件等。您可以通过命令行将信息写入控制台。 使用命令行，您可以使用函数来选择和检查 DOM 中的元素、监视事件以及停止和启动分析器。

设备模式

设备模式

我最喜欢的功能之一是设备模式。 您可以使用菜单中元素左侧的小按钮访问它。 设备模式可让您从 23 种不同的流行移动设备（Kindle Fire、几款 iPhone、几款 Galaxies、笔记本电脑等）中进行选择，并查看您的网站在该设备上的外观和反应。

您还可以拖动屏幕来创建自己的自定义屏幕尺寸。 光标模仿您的指尖，因此屏幕对鼠标的反应就像对您的手指一样。 您还可以在设置屏幕中创建自己的自定义设备。

您还可以选择网络类型（3G、4G、Wi-Fi 等），以便分析网站在不同网络和速度下的外观和反应。

抽屉

抽屉

在屏幕底部，您会找到抽屉。 这可以使用工具栏右侧的 >_ 按钮打开或关闭。 抽屉包含：

  • 控制台——控制台命令行。 这使控制台在使用其他面板时可用。
  • 搜索 - 查找任何来源。 您可以选择忽略大小写并搜索正则表达式。
  • 仿真——设备模式的工具和设置。 它包括加速度计和地理位置坐标等功能。
  • 渲染 - 显示渲染功能，例如 fps 仪表、复合分层边框等。关于这个的最好的部分是它会显示潜在的瓶颈。

将这些工具放在抽屉中很有用，因为某些面板不包括对这些工具的访问。

最后的想法

Chrome 开发人员工具 (DevTools) 是一组令人惊叹的 Web 创作和调试工具，可帮助您改进您的网站。 您可以快速拖放元素来更改站点的布局、解决内存泄漏、解决页面加载问题、在几乎任何移动设备和屏幕尺寸上查看您的网站等等。 本概述只是触及这些工具的强大功能的皮毛。 最好的一点是它已经内置在 Google Chrome 中，因此您无需下载任何内容。

我想听听你的意见。 你使用 Chrome 开发者工具吗？ 你最喜欢的功能是什么？ 你最常使用什么？ 您对使用这些工具有什么建议吗？ 在评论中告诉我们。