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