在网站开发过程中，会定期检查结果。每个浏览器都有一个 DOM 检查器，用于查看正在查看的页面内有哪些元素。 Google Chrome 包含一个高级版本的“开发者工具”，也称为 DevTools。在FireFox中这个工具被称为“FireBug”。
在此博客中，将解释 Google Chrome DevTools 的各种功能，并提供一些有关如何最佳地使用 DevTools 的技巧。
如何打开 DevTools？
DevTools 可以通过多种方式打开。下面介绍四种最常用的方法。
Google 开发者工具中的不同标签
打开开发人员工具后，您将看到有多个选项卡。下面我们将解释最重要的选项卡以及它们的功能。
元素
在“元素”选项卡下，您可以找到当前页面上使用的所有 dom 元素。这些元素可以实时调整，以立即了解调整对页面的影响。这些更改仅发生在浏览器中，并且当页面刷新或浏览器关闭时就会消失。
右键单击 dom 元素时，会出现一个包含多个选项的菜单。
- “添加属性”允许您向元素添加属性，例如类、id、样式等。
- “编辑属性”允许您编辑现有属性，仅当鼠标右键单击属性时才会显示此选项。
- “以 HTML 形式编辑”允许您自定义整个元素。如果该元素有子元素，这些子元素也将显示在编辑屏幕中。
- 在 Windows 上按 Del 或在 Mac 上按 fn+Backspace 将删除整个元素。如果该元素包含子元素，它们也将从页面中删除。
除了自定义元素之外，还可以自定义元素的CSS。 dom 元素下方有一个“样式”选项卡。当选择 dom 屏幕中的元素时，所有样式都会出现在样式下。如果在 喀麦隆电话号码库 不同的类或 ID 上使用了 CSS 样式，则它们都会显示出来。只有元素上使用的类或 id 显示为黑色，其他选择器为灰色。
要添加样式，只需在现有 CSS 规则的末尾单击左键即可。这将显示一个带有自动完成功能的空输入字段，可以在其中添加行。 Tab 允许将值放在 CSS 属性后面。
样式选项卡的顶部是“element.style”。当在此处添加 CSS 规则时，该规则将作为“styles”属性添加到 dom 元素。
样式的右侧是显示元素宽度和高度的图像。这些尺寸分布在边距、边框、填充和元素宽度上。可以通过双击值或破折号来调整值。
安慰
在“控制台”中显示有关 Javascript 的各种内容。当页面包含 JS 错误时，它将在控制台中以红色显示。
Console.log 也显示在控制台中，此文本显示为黑色。线条下方是一个带有蓝色箭头的输入字段。该字段允许在当前页面中使用JS。如果页面中使用了框架，也可以通过控制台来调用。
当在输入框中输入代码并按下回车键时，代码 [未提供] 会立即执行。如果需要添加多行代码，可以使用 Shift+Enter 来完成。
控制台顶部还有一些选项：
- “保存日志”保留控制台中的所有错误、警告、日志和代码。但是这个日志里的代码已经不再执行了，只是在屏幕上显示而已。
- 点击漏斗时，会出现各种过滤选项来过滤显示的错误、警告和其他规则。这使您可以按行类型进行过滤并按文本进行搜索。
网络
“网络”选项卡显示加载到网站的所有 kh 列表 图像、脚本和其他元素。这也显示了所有元素的加载时间。这可以用来确定页面的总加载时间是否太长以及原因是什么。
当页面中加载了无法找到的图像或其他元素时，它将在此屏幕上显示为红色。这也表明了它涉及什么状态。
例如，当在网站上进行 JSON 调用时也会显示。点击 JSON 调用时，可以在“Headers”下查看该调用的响应和请求标头。这对于查看正在发送和检索的数据类型非常有用。
应用
最后，在“应用程序”中显示了网站上使用的所有 cookie。您可以在“存储 > Cookies”下找到这些 cookies。此图表显示了所有 cookie 数据。通过右键单击 cookie，您可以删除该 cookie 以查看这对网站的影响。
在按下十字键时删除层或 cookie 条等。通过删除 cookie 可以测试该层是否在网站上正确显示。