非开发人员专用的Google Chrome DevTools

谷歌浏览器是其中使用最广泛的浏览器之一，全球有将近65％的用户。 这是有充分的理由的， 它运作良好， 它支持大量的网络功能， 与google提供的所有内容进行本地集成，并且易于使用。

但是，不仅限于用户方面。 它也非常适合开发人员。 Firefox是另一种出色的浏览器，可提供出色的开发人员体验， 尽管它的用户群相对较小。 因此， 我们专注于Chrome及其DevTools， 但幸运的是， 大多数浏览器中的用户界面仍然非常相似， 因此这里的提示可以很好地翻译到Firefox， 苹果浏览器， Edge和其他浏览器。

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

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

开发工具 是您在上面的屏幕快照中看到的，左侧是代码，右侧是各种属性。 如果您按Command + Option + C（Mac）或Control + Shift + C（Windows， Linux， Chrome操作系统）。

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

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

这是一个很短的清单， 但它涵盖了一些更显着的功能， 我们将主要介绍。

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

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

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

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

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

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

有关的：WordPress CSS：初学者基本指南

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

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

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

设置为“乔治亚”字样的Google主页的外观如下。 为了达成这个， 我们必须更新多个物业 但是多亏了Google开发人员的出色CSS架构， 这很容易。 大多数时候， 一个写得不好的网站需要您更新大量的属性才能看到整个网站都已更新。

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

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

但是会发生什么 服务器上是否有更改，并且设置未使用最佳做法来更新资源？ 或简而言之， 即使开发人员更改了代码库， 您仍然可以看到旧样式。 出色地， 那么您就可以停止缓存并执行“硬刷新”。

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

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

刷新一次后，在同一选项卡上，您还将看到页面速度和重量的度量值。 多久才触发“加载”（附加其他脚本以执行更多工作时发生的事件）， 请求了多少个文件（以上31个请求， 相当不错的金额）， 已下载了多少等等。 这很简单， 每个值越低越好。 任何高于100-150的请求，您将开始看到较大的速度问题。

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

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

稽核 是另一个伟大的功能，可提供用户友好的页面速度分析。 您只需运行“审计”选项卡并单击“生成报告”即可运行它：

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

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

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

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

但， 如果出于某种原因在您网站上最近更新之后， 互动组件（例如下拉菜单， 菜单， 地图， 表格）停止工作， 您可以随时查看控制台。 它可能有错误，说明原因是什么。

这是此类错误的示例：

使用错误日志文档页面展示错误有点讽刺意味， 正确的？ 在任何情况下， 它有一个很好的目的。 这些错误会使某些功能无法正常工作。 您始终可以与开发人员共享此类信息并寻求帮助。 与页面互动时，日志会实时发布， 因此，如果您单击按钮并弹出错误， 它背后的脚本很可能有问题。

有关的：成为优秀的Web设计者的途径

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

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

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

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

长期发展， 支持， 和您的WordPress平台的创新。 DevriX为中小型企业和快节奏的初创企业提供技术合作伙伴关系。 我们构建WordPress解决方案并扩展平台，最多可生成20个，000，每月000次网页浏览。

DevriX的创意主管和前端开发人员
亚历克斯（Alex）的热情在于学习新的网络技术， 探索创新的方法来优化网站性能并改善用户体验。 亚历克斯（Alex）喜欢骑自行车和数字艺术，最近开始在ELSYS技术学校教授设计。