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