浏览器DevTools概述

浏览器DevTools是前端开发人员工具箱中的基本元素，并且在所有现代浏览器中都可用。了解他们可以为您做什么的基础

浏览器开发工具

我认为，就后端技术而言，没有一个网站和Web应用程序易于构建的时代，但是从总体上来说，客户端开发肯定比现在容易得多。

一旦弄清了Internet Explore和Netscape Navigator之间的区别，并且避免了专有标签和技术，您只需要使用HTML和更高版本的CSS。

JavaScript是一种用于创建对话框的技术，但它的功能还远远不如今天。

尽管许多网页仍然是纯HTML + CSS，但与此网页一样，许多其他网站都是在浏览器中运行的真实应用程序。

仅仅提供页面源（就像浏览器曾经一样）是远远不够的。

浏览器必须提供有关如何呈现页面以及页面当前正在做什么的更多信息，因此他们引入了开发人员功能： 他们的开发者工具。

每个浏览器都不同，因此他们的开发工具也略有不同。在撰写本文时，Chrome提供了我最喜欢的开发人员工具，这是我们将在这里讨论的浏览器，尽管Firefox和Edge也具有出色的工具。

HTML结构和CSS

最基本的使用形式（也是最常见的一种使用形式）是检查网页的内容。当您打开面板的DevTools时，您会看到“元素”面板：

Elements panel of the Browser Dev Tools

HTML面板

左侧是组成页面的HTML。

将鼠标悬停在HTML面板中的元素上将突出显示页面中的元素，单击工具栏上的第一个图标可让您单击页面中的元素，并在检查器中对其进行分析。

您可以在检查器中拖放元素以实时更改其在页面中的位置。

CSS样式面板

在右侧，应用于当前选定元素的CSS样式。

除了编辑和禁用属性外，您还可以通过单击+图标。

另外，您可以触发所选元素的状态，因此您可以查看处于活动状态，悬停在焦点上时应用的样式。

在底部，盒子模型选定元素的外观可帮助您快速浏览边界，填充，边框和尺寸：

Box model in the CSS styles panel

控制台

DevTools的第二个最重要的元素是控制台。

控制台可以在其自己的面板上查看，也可以通过按Esc在“元素”面板中，它将显示在底部。

控制台主要用于两个目的：执行自定义JavaScript和错误报告。

执行自定义JavaScript

在控制台的底部，有一个闪烁的光标。您可以在此处键入任何JavaScript，它将立即执行。例如，尝试运行：

alert('test')

特殊标识符$0允许您引用元素检查器中当前选定的元素。如果要将其作为jQuery选择器引用，请使用$($0)。

您可以使用shift-enter。在脚本末尾按Enter即可运行它。

错误报告

此处列出了呈现页面并随后执行JavaScript时发生的任何错误，警告或信息。

例如，无法从网络加载资源，并显示以下信息：为什么，在控制台中报告。

Console Error Reporting

在这种情况下，单击资源URL会将您带到“网络”面板，显示更多信息，您可以使用这些信息来确定问题的原因。

您可以按级别（错误/警告/信息）过滤这些消息，也可以按内容过滤它们。

您可以使用以下代码在用户自己的JavaScript中生成这些消息：控制台API：

console.log('Some info message')
console.warn('Some warning message')
console.error('Some error message')

模拟器

Chrome DevTools嵌入了一个非常有用的设备仿真器，您可以使用该仿真器以所需的每种设备尺寸可视化页面。

The device emulator

您可以从预设中选择最受欢迎的移动设备，包括iPhone，iPad，Android设备等等，也可以自己指定像素尺寸以及屏幕清晰度（1倍，2倍视网膜，3倍视网膜HD）。

在同一面板中，您可以设置网络节流针对特定的Chrome标签，以模拟低速连接并查看页面的加载方式，显示媒体查询”选项显示了媒体查询如何修改页面的CSS。

网络面板

DevTools的网络面板允许您查看呈现页面时浏览器必须处理的所有连接。

The network panel

快速浏览页面显示：

  • 工具栏，您可以在其中设置一些选项和过滤器
  • 整个页面的加载图
  • 每个请求，带有HTTP方法，响应代码，大小和其他详细信息
  • 页脚，其中包含总请求摘要，页面总大小以及一些时间指示。

工具栏中一个非常有用的选项是保存日志。通过启用它，您可以移至另一页，并且不会清除日志。

跟踪加载时间的另一个非常有用的工具是禁用缓存。也可以在DevTools设置中全局启用此功能，以在打开DevTools时始终禁用缓存。

单击列表中的特定请求将显示详细信息面板，其中包含“ HTTP标头”报告：

The HTTP headers report in the network panel

以及加载时间明细：

The loading time breakdown

JavaScript调试器

如果您在DevTools控制台中单击一条错误消息，则会打开“源”选项卡，除了将您指向发生错误的文件和行之外，您还可以选择使用JavaScript调试器。

The Javascript debugger

这是功能齐全的调试器。您可以设置断点，观察变量并收听DOM更改或中断特定XHR（AJAX）网络请求或事件侦听器。

应用与储存

“应用程序”选项卡为您提供了许多信息，这些信息与哪些信息相对于您的网站存储在浏览器中有关。

Application and storage

贮存

您可以访问与应用程序存储进行交互的详细报告和工具：

您可以快速擦除所有信息，从头开始。

应用

此选项卡还为您提供了用于检查和调试渐进式Web应用程序的工具。

点击显现获取有关Web应用程序清单的信息，该信息用于允许移动用户将应用程序添加到他们的家中，并模拟“添加到主屏幕”事件。

服务人员让您检查您的应用程序服务工作者。如果您不知道服务人员是什么，简而言之，它们是为现代Web应用程序提供动力的一项基本技术，可提供通知，脱机运行以及跨设备同步等功能。

安全标签

“安全性”选项卡为您提供浏览器相对于网站连接安全性的所有信息。

The Security Tab

如果HTTPS连接有任何问题，如果该站点通过TLS提供服务，它将为您提供有关造成该问题的原因的更多信息。

稽核

“审核”选项卡将帮助您查找和解决一些与性能有关的问题，这些问题通常与用户访问您的网站时的体验质量有关。

您可以根据网站的类型执行各种审核：

Audits by Lighthouse

审核由灯塔，这是一种开放源代码的自动化网站质量检查工具。它需要一段时间才能运行，然后为您提供了非常不错的报告，其中包含要检查的关键操作。

Lighthouse audit report

如果您想进一步了解Chrome DevTools，请查看此内容Chrome DevTools提示列表😀


更多devtools教程：


在线技术百科！