今天的文章主要是针对那些正在开始他们的IT之旅的人。最近，我经常与那些正在学习他们的第一门编程语言或想转行做技术的人打交道，我注意到许多教程都在展示如何构建东西，但几乎没有展示如何阅读现有的代码、调试错误或找到修复错误的方法。这很令人惊讶，因为在 “现实生活 “中，我们经常使用现有的代码库（添加新功能、修复错误、改变业务逻辑等），而不是从头开始编写代码。此外，知道如何在你的代码中发现问题也是非常重要的–不仅仅是按部就班地学习教程。
在这篇文章中，我想向你展示Chrome浏览器中的一些免费功能，它们可以帮助你解决这些问题。我希望它能激励你更多地尝试编程，并成为一个更好的开发者!
什么是Chrome开发工具
让我们先简单介绍一下Chrome DevTools。这是一套内置于Chrome浏览器的开发者工具，完全免费。要开始使用它们，你只需要在Chrome浏览器中打开要测试的页面，然后打开Chrome DevTools。你可以用很多方法来做：
右键点击页面上的任何元素，从菜单中选择检查选项使用浏览器右上方的3点菜单–>选择更多工具，然后–>开发工具选项使用快捷键（Linux/Windows上的ctrl + shift + I或Mac上的cmd + shift + I）之后，你会看到一个类似于下面截图中可见的面板。
提示：你的面板可以作为一个单独的窗口可见，也可以在页面的右/左/下侧。如果你想改变这一点，在Chrome DevTools面板的右上方找到3点菜单，点击Dock side的首选模式选项。
有许多标签和选项可用，但在今天的文章中，我们将专注于最基本的一个- Elements。它主要用于预览页面的HTML结构和样式。我们可以在这里做什么？
预览整个页面的HTML结构
是的，我以前说过，但让我们把这个话题延伸一下。正如你所看到的，在Elements标签中，你可以预览页面上所有可见的HTML节点。为什么这很重要？例如，你可以检查所有的组件是否正确显示（在初学者中，为一些小工具创建一个单独的组件而忘记在页面上使用它们，这是一个超级流行的错误）。你还可以检查页面上元素的顺序和嵌套（哪个元素在哪个里面）。要扩展/折叠节点，只需使用该行开头的箭头。
预览特定节点
当你在网页上看到一些问题时，你可能想把注意力集中在某个特定的区域/节点上，而不是看整个页面。有几种方法可以做到这一点：你可以直接右键点击页面上的元素，然后从菜单中选择检查选项（即使页面上没有打开Chrome DevTools，它也能发挥作用），你可以在元素预览中通过扩展部分找到该元素，或者你可以点击Chrome DevTools中的选择器图标（在面板的左上方）并选择页面上的节点。
选择后，给定的节点将在DevTools面板的Elements预览中被突出显示，所以你可以看到哪个确切的HTML标签负责显示给定的部分。这个元素也会在页面上突出显示，并有额外的信息–边缘部分将被标记为橙色，填充部分为绿色，一个小的弹出窗口将显示应用于该元素的样式预览。你可以在下面的截图中看到它。
我们在这里可以看到什么？”How to start programming in 2022″ 是一个标有id=”32bb” 的h1标签的标题元素，并应用了许多样式类（不要担心它们的命名–这是Javascript丑化和减化对页面的影响，使源代码更小，加载更快，更难被其他开发者窃取:) ). 这个弹出窗口向我们展示了造型的摘要–颜色、字体、边距和元素的对比。橙色区域显示了应用于该元素的上边距（注意，在DevTools中，右侧有一个彩色的盒子，从这里我们可以读出上边距为19.2px）。还有一个部分是关于应用于这个元素的所有样式的信息。我将在下面的章节中多写一点关于样式的内容，但不要害怕玩一下所有这些选项。你不会破坏任何东西–我保证（你的所有改动在重新加载页面后会被删除）。
隐藏/编辑/删除/复制给定元素
当你想快速预览页面上的一些变化时，你可以使用Chrome DevTools在页面上直接修改元素。只要选择你感兴趣的节点，并在元素标签中右键点击它，或者在有该元素的行中点击开头的3点菜单。之后，你会看到一个有许多选项的菜单，例如，隐藏/编辑/删除或复制一个给定的元素，添加一个属性，作为HTML编辑，等等。选择你感兴趣的选项，并看到页面上的视觉变化。
重要提示：这只是一个预览，你的改变在重新加载页面后不会被保存。
改变元素的样式
这是我最喜欢的选项之一–预览元素的样式变化。你不必在本地进行修改，也不必在每次改变一个属性时等待重新加载页面。或者你可以预览你无法访问的页面会是什么样子，例如，不同的字体颜色。就像我在前几节中描述的那样，选择给定的节点，并查看靠近HTML树的样式标签。在第一个视图中，你可以看到应用于该元素的所有CSS类，你可以改变它们的值（只需双击该值），添加新的属性等。你也可以取消靠近属性的复选框来禁用给定的规则。当某些规则被划掉时，意味着一些其他属性覆盖了它。
在可能的情况下，自动建议将为给定的属性提供可用的值（有时会有关于它们的含义的视觉提示），所以当你不记得属性值的确切名称时，这是一个找到例如正确选项的简单方法！
在最近的一个版本中，Chrome还增加了一些信息，即当某些规则不能应用于某个特定元素时。你可以通过灰色的字母和靠近数值的'i'图标来识别它。当你将鼠标悬停在 “i” 图标上时，你会看到一个弹出窗口，解释为什么不能应用某个特定的规则。
重要提示：请记住，这些变化不会被保存，在重新加载页面后会被删除！这里有很多很多其他可用于造型的选项（所以强烈建议你只是玩玩），但我希望你再关注一件事–在靠近 “样式 “标签的地方还有 “计算 “标签。你可以用它来轻松地预览应用于元素的所有规则，而不用把它们拆分成CSS类。
切换元素状态
有时，页面上的元素因其状态不同而显得不同–例如，已访问的链接与未访问的链接看起来不同，按钮在鼠标悬停时可能有不同的背景色，等等。幸运的是，你也可以轻松地玩弄不同元素状态的造型。只要选择给定的节点，在 “样式 “选项卡中找到:hov按钮，然后拨动你想强制执行的状态上的复选框。这样，即使你停止在元素上悬停，你仍然可以预览和编辑应用于这个状态的样式。
重新排列页面上的元素
有时你可能想在你的网页上重新排列元素，但你不确定哪个顺序是最好的。幸运的是，你可以轻松地进行预览! 只需在Chrome DevTools的Elements选项卡中选择你想移动的元素，拖动它，并将它放到正确的位置。就可以了! 新的顺序将在用户界面中可见，直到你重新加载页面。
预览移动端/响应式模式
现代网页开发并不容易–我们必须确保我们的网页不仅在笔记本电脑上看起来不错，而且在手机、平板电脑、大屏幕等设备上也是如此。而Chrome DevTools在检查我们的网页的响应性时也可能是有用的。只要点击靠近选择器图标的移动预览按钮（顶部菜单中从左边开始的第二个图标），然后在页面预览上方的菜单中选择设备、宽度、高度和设备方向。玩不同的尺寸–由于这一点，你可以注意到你的网页在不同设备上的行为的一些问题！Pixel 5手机上的网页预览。注意启用响应模式的图标–它以蓝色标记，下面有一个工具提示。
小结
当然，本文所描述的选项并不是Chrome DevTools中唯一可用的选项–你可能会惊讶于这里有这么多了不起的功能（我在预览文章中写了一些不太为人所知的功能）。请自由地尝试和玩一下这个工具–我相信它将帮助你更好地理解和更容易地调试你的项目。
原文地址：https://www.wbolt.com/use-chrome-devtools-to-debug-webpage.html
