适用于非开发人员的Google Chrome DevTools

谷歌浏览器是世界上使用最广泛的浏览器之一，全球有近65％的用户。 并且有一个很好的理由，它运行良好，它支持大量的网络功能，可以与google提供的所有内容进行本地集成，并且易于使用。

但是，不仅限于用户方面。 它也非常适合开发人员。 Firefox是另一种出色的浏览器，尽管其用户群相对较小，但可提供出色的开发体验。 因此，出于这个原因，我们将重点放在Chrome及其DevTools上，但是值得庆幸的是，大多数浏览器之间的UI仍然非常相似，因此此处的提示将可以很好地转换为Firefox，Safari，Edge和其他浏览器。

什么是Chrome DevTools？

Chrome DevTools是一组直接内置在Google Chrome浏览器中的网络开发人员工具。 DevTools可以帮助您即时编辑页面并快速诊断问题，最终可以帮助您更快地构建更好的网站。
Chrome DevTools文档首页

大多数前端（通常是后端）开发人员都使用DevTools来检查网页的性能，定义网页的HTML标签以及以其最基本形式应用的样式。 它提供了许多其他超级有用的功能，只要它们也适用于非开发人员的一般用例，我们将一目了然。

您可以在上面的屏幕快照中看到开发工具，其中代码在左侧，而各种属性在右侧。 如果您按Command + Option + C（Mac）或Control + Shift + C（Windows，Linux，Chrome OS），则将看到默认视图。

DevTools提供了很多功能，但是最值得注意的是：

• 页面加载时和加载时生成的文档结构（HTML）。
• 什么CSS适用于特定的HTML元素以及从父元素继承的元素。
  查看视口大小，元素大小，填充，边距，边界等。
• 除正在运行的脚本外，还可以修改页面上的所有内容。
• 刷新页面后对保存的代码进行更改（尽管默认情况下无法更改）
• 所有更改都在客户端-意味着，无论您进行什么更改，只有您才能看到，直到刷新页面为止。
• 无需高速缓存并模拟较慢的网络速度即可进行测试。
• 衡量性能和对页面性能进行评分的工具，并提供解决方法。
• 显示页面的控制台及其错误，警告和消息，以及在那里执行JavaScript代码的方式。

这是一个非常简短的列表，但是它涵盖了一些更显着的功能，主要是我们将要介绍的功能。

相关：如何创建您的第一个Chrome扩展程序

为什么需要DevTools，用例有哪些？

对于开发人员来说，这很明显，但是对于非开发人员呢？ 好吧，这里有一些巧妙的窍门和技巧，可以使您更接近高级用户状态。 网站所有者通常会在网站上发现问题，提出一个或两个问题，有时还会收到一小段代码以“粘贴”以解决问题。 开发人员测试此类代码片段的方法之一是直接将其应用于开发工具。 这也是一种为开发人员提供有关外观外观的漂亮预览的方法。

套用CSS程式码

DevTools的第一个也是最常见的用法是修改和应用CSS。 CSS是定义页面外观的要素，它是美观。 为此，您只需指向要设置样式的元素，右键单击并选择“检查”

多数其他浏览器也是如此，尽管菜单项文本可能会略有不同。 完成后，您将看到DevTools打开并直接选择所需的元素。 在这里，您将看到开发工具的两个主要部分。 HTML和CSS面（左右）：

在HTML部分找到自己的方式可能有些棘手，但是请放心，当您将元素悬停在左侧面板上时，DevTools会突出显示这些元素。 一旦找到所需的内容，就可以在右侧编写样式。 已经添加了一些。 因此，让我们更改背景以阅读并查看其外观：

键入时，页面中的样式将立即更新。 您可以在此处编写任何CSS，它将按照页面上已有的样式进行应用。 如果您在规则的末尾（在“宽度”下）按，它将开始添加新样式。 或者，您也可以在顶部写着“ element.style”的地方写它们。 然后，如果要与开发人员共享，则只需选择代码并复制粘贴即可。 专业提示，还可以抓住样式的“选择器”。 这是上面截图中的“ .RNNXgb”。 这将告诉开发人员要在哪个元素上添加样式。

相关：WordPress CSS：初学者基本指南

选择一种颜色

您可以做的另一件整洁的事情是找出确切使用了什么颜色，以及直接从DevTools中使用颜色选择器来查看其他颜色。 只需单击颜色代码旁边的正方形（上面的箭头指向的地方），它将打开一个颜色选择器。

查找使用什么字体

CSS开发人员还定义了使用的字体，字体大小，行高，颜色，字体粗细和其他与排版有关的属性。 所有这些都将显示在右侧。 只要不交叉，就会应用您看到的样式。 让我们找出在Google表单上用于搜索的字体。 右键单击，检查并向下滚动，直到看到字体为止，或者仅在右部分顶部上方的“过滤器”字段中搜索：

如果继续更新字体，您将看到该网站使用另一种字体的外观，您可能希望立即切换到另一种字体。 当然，开发人员以后将不得不修改代码并解决字体更改将导致的任何问题，但是这种方法非常有用，可以在不设置任何开发环境的情况下快速地进行测试。

设置为“乔治亚”字样的Google主页的外观如下。 为此，我们必须更新多个属性，但是由于Google开发人员提供了良好的CSS体系结构，因此相当容易。 在大多数情况下，写得不好的网站需要您更新大量属性才能查看整个网站的更新。

相关：如何为您的网站选择最佳字体

缓存，油门和速度

什么是缓存？ 用最简单的术语来说，就是保存在计算机上以供将来使用的资源。 资源可以是JS，CSS文件或图像。 如果每次打开页面都没有改变，就不需要每次都下载吗？ 因此，浏览器只会将其在您的计算机上保留一段时间。

但是，如果服务器发生了变化并且设置未使用最佳实践来更新资源，会发生什么情况？ 简而言之，即使开发人员更改了代码库，您仍然可以看到旧样式。 好了，那么您就可以停止缓存并执行“硬刷新”。

打开开发工具，然后导航到“网络”选项卡。 然后单击“禁用缓存”并执行“硬刷新”：

现在，在打开DevTools的情况下浏览页面时，浏览器将不会缓存任何资源。 每次加载资源时，页面加载速度都会变慢，但是您会看到更改。 通常，开发人员默认情况下会默认启用“禁用缓存”，并且仅在重要的加载时间测试实际用户交互时才禁用它。

刷新一次后，在同一标签上，您还将看到有关页面速度和重量的度量。 触发“加载”之前需要等待多长时间（附加其他脚本来执行更多工作时发生的事件），请求了多少个文件（以上31个请求，相当数量），已下载了多少等等。 很简单，每个值越低越好。 任何高于100-150的请求，您将开始看到较大的速度问题。

DevTools还提供了慢速连接的模拟。 一项非常有用的功能，用于查看您的站点如何在速度较慢的网络（如3G）上工作。 要启用它，只需更改“禁用缓存”旁边的值，然后单击刷新即可。 刷新后，您将看到网站加载的每个步骤。 禁用缓存后，这将是常规使用的首次访问。

与使用实际连接速度的第一个示例相比，选择“慢速3G”并刷新时看到的速度差异。 在这里，您还可以测试“离线”-如果没有任何互联网连接，该站点将如何工作。 如果听起来很奇怪，那不是，渐进式Web应用程序已经允许网站运行，即使访客没有访问互联网至少一次，即使没有互联网也是如此。

审核是另一个很棒的功能，可提供用户友好的页面速度分析。 您只需通过转到“审计”标签并点击“生成报告”即可运行它：

在右侧，您可以选择一些选项来决定要测试的内容，因为有时测试可能需要一段时间（一两分钟），因此，如果您多次运行它们，则可能只选择当前测试所需的内容。 这是带有上述Google主屏幕选项的示例结果：

好极了！ 94非常好，展示了此页面上所做的出色工作。 请记住，从表面上看，它看起来非常简单，但是在后台运行的大量脚本仍处于隐藏状态，它们会使网站变慢。 还测试了许多其他指标，您可以在任何站点上执行此操作，以查找存在的问题以及可以改进的问题。

相关文章：“加速网站”的真正含义是什么，以及如何实现？

DevTools控制台

我们将介绍的最后一个视图是控制台。 只需按ESC键或转到“控制台”选项卡即可轻松访问。 不出所料，没有错误，只有一些警告不应该引起太多问题：

但是，如果由于某些原因在您网站上的最新更新后，交互式组件（如下拉菜单，菜单，地图，表单）停止工作，则可以随时查看控制台。 可能有错误说明原因是什么。

这是此类错误的示例：

使用错误日志文档页面展示错误有点讽刺，对吗？ 无论如何，它都有很好的用途。 这些错误会使某些功能无法正常工作。 您始终可以与开发人员共享此类信息并寻求帮助。 与页面交互时，日志是实时发布的，因此，如果单击按钮并弹出错误，则很可能是其后面的脚本有问题。

相关：成为优秀Web设计人员的途径

安全通知：在不了解代码功能的情况下将代码复制粘贴到控制台不是一个好主意。 特别是如果它来自不可靠的来源，并在公司的内部应用程序/网站上使用。 因此，Facebook在其控制台上发布了警告：

概要

DevTools是一个了不起的工具，可为开发人员和网站所有者提供帮助。 它为您提供了调整和修改页面所需的一切。 通过它，您可以更改CSS，修改HTML，删除和重新排列页面上的元素，查看速度报告和报告的错误。

网站所有者可以使用它向开发人员展示想法和他们的需求示例，这些想法和示例可能比编写文本段落更容易理解。 掌握了一些CSS的基本属性后，您就可以更好地描述您的需求，这将大大减少在新更改上来回花费的时间。

还有大量其他功能需要使用，不要害怕探索！