当前位置:首页>WordPress资讯>如何使用Chrome开发者工具Debug页面HTML/CSS代码

如何使用Chrome开发者工具Debug页面HTML/CSS代码

如何使用Chrome开发者工具Debug页面HTML/CSS代码

今天的文章主要是针对那些正在开始他们的IT之旅的人。最近,我经常与那些正在学习他们的第一门或想转行做技术的人打交道,我注意到许多教程都在展示如何构建东西,但几乎没有展示如何阅读现有的代码、调试错误或找到修复错误的方法。这很令人惊讶,因为在 “现实生活 “中,我们经常使用现有的代码库(添加新功能、修复错误、改变业务逻辑等),而不是从头开始编。此外,知道如何在你的代码中发现问题也是非常重要的–不仅仅是按部就班地学习教程。

在这篇文章中,我想向你展示浏览器中的一些免费功能,它们可以帮助你解决这些问题。我希望它能激励你更多地尝试编程,并成为一个更好的!

什么是Chrome开发工具

让我们先简单介绍一下Chrome DevTools。这是一套内置于Chrome浏览器的开发者工具,完全免费。要开始使用它们,你只需要在Chrome浏览器中打开要测试的页面,然后打开Chrome DevTools。你可以用很多方法来做:

右键点击页面上的任何元素,从菜单中选择检查选项使用浏览器右上方的3点菜单–>选择更多工具,然后–>选项使用快捷键(/Windows上的ctrl + shift + I或Mac上的cmd + shift + I)之后,你会看到一个类似于下面截图中可见的面板。

如何使用Chrome开发者工具Debug页面HTML/CSS代码

提示:你的面板可以作为一个单独的窗口可见,也可以在页面的右/左/下侧。如果你想改变这一点,在Chrome DevTools面板的右上方找到3点菜单,点击Dock side的首选模式选项。

如何使用Chrome开发者工具Debug页面HTML/CSS代码

有许多标签和选项可用,但在今天的文章中,我们将专注于最基本的一个- Elements。它主要用于预览页面的结构和样式。我们可以在这里做什么?

预览整个页面的HTML结构

是的,我以前说过,但让我们把这个话题延伸一下。正如你所看到的,在Elements标签中,你可以预览页面上所有可见的HTML节点。为什么这很重要?例如,你可以检查所有的是否正确显示(在初学者中,为一些小工具创建一个单独的组件而忘记在页面上使用它们,这是一个超级流行的错误)。你还可以检查页面上元素的顺序和嵌套(哪个元素在哪个里面)。要扩展/折叠节点,只需使用该行开头的箭头。

预览特定节点

当你在网页上看到一些问题时,你可能想把注意力集中在某个特定的区域/节点上,而不是看整个页面。有几种方法可以做到这一点:你可以直接右键点击页面上的元素,然后从菜单中选择检查选项(即使页面上没有打开Chrome DevTools,它也能发挥作用),你可以在元素预览中通过扩展部分找到该元素,或者你可以点击Chrome DevTools中的选择器图标(在面板的左上方)并选择页面上的节点。

如何使用Chrome开发者工具Debug页面HTML/CSS代码

选择后,给定的节点将在DevTools面板的Elements预览中被突出显示,所以你可以看到哪个确切的HTML标签负责显示给定的部分。这个元素也会在页面上突出显示,并有额外的信息–边缘部分将被标记为橙色,填充部分为绿色,一个小的弹出窗口将显示应用于该元素的样式预览。你可以在下面的截图中看到它。

如何使用Chrome开发者工具Debug页面HTML/CSS代码

我们在这里可以看到什么?”How to start programming in 2022″ 是一个标有id=”32bb” 的h1标签的标题元素,并应用了许多样式类(不要担心它们的命名–这是Javascript丑化和减化对页面的影响,使源代码更小,加载更快,更难被其他开发者窃取:) ). 这个弹出窗口向我们展示了造型的摘要–颜色、字体、边距和元素的对比。橙色区域显示了应用于该元素的上边距(注意,在DevTools中,右侧有一个彩色的盒子,从这里我们可以读出上边距为19.2px)。还有一个部分是关于应用于这个元素的所有样式的信息。我将在下面的章节中多写一点关于样式的内容,但不要害怕玩一下所有这些选项。你不会破坏任何东西–我保证(你的所有改动在重新加载页面后会被删除)。

隐藏/编辑/删除/复制给定元素

当你想快速预览页面上的一些变化时,你可以使用Chrome DevTools在页面上直接修改元素。只要选择你感兴趣的节点,并在元素标签中右键点击它,或者在有该元素的行中点击开头的3点菜单。之后,你会看到一个有许多选项的菜单,例如,隐藏/编辑/删除或复制一个给定的元素,添加一个属性,作为HTML编辑,等等。选择你感兴趣的选项,并看到页面上的视觉变化。

重要提示:这只是一个预览,你的改变在重新加载页面后不会被保存。

如何使用Chrome开发者工具Debug页面HTML/CSS代码

改变元素的样式

这是我最喜欢的选项之一–预览元素的样式变化。你不必在本地进行修改,也不必在每次改变一个属性时等待重新加载页面。或者你可以预览你无法访问的页面会是什么样子,例如,不同的字体颜色。就像我在前几节中描述的那样,选择给定的节点,并查看靠近HTML树的样式标签。在第一个视图中,你可以看到应用于该元素的所有CSS类,你可以改变它们的值(只需双击该值),添加新的属性等。你也可以取消靠近属性的复选框来禁用给定的规则。当某些规则被划掉时,意味着一些其他属性覆盖了它。

如何使用Chrome开发者工具Debug页面HTML/CSS代码

在可能的情况下,自动建议将为给定的属性提供可用的值(有时会有关于它们的含义的视觉提示),所以当你不记得属性值的确切名称时,这是一个找到例如正确选项的简单方法!

如何使用Chrome开发者工具Debug页面HTML/CSS代码

在最近的一个版本中,Chrome还增加了一些信息,即当某些规则不能应用于某个特定元素时。你可以通过灰色的字母和靠近数值的'i'图标来识别它。当你将鼠标悬停在 “i” 图标上时,你会看到一个弹出窗口,解释为什么不能应用某个特定的规则。

如何使用Chrome开发者工具Debug页面HTML/CSS代码

重要提示:请记住,这些变化不会被保存,在重新加载页面后会被删除!这里有很多很多其他可用于造型的选项(所以强烈建议你只是玩玩),但我希望你再关注一件事–在靠近 “样式 “标签的地方还有 “计算 “标签。你可以用它来轻松地预览应用于元素的所有规则,而不用把它们拆分成CSS类。

切换元素状态

有时,页面上的元素因其状态不同而显得不同–例如,已访问的与未访问的链接看起来不同,按钮在鼠标悬停时可能有不同的背景色,等等。幸运的是,你也可以轻松地玩弄不同元素状态的造型。只要选择给定的节点,在 “样式 “选项卡中找到:hov按钮,然后拨动你想强制执行的状态上的复选框。这样,即使你停止在元素上悬停,你仍然可以预览和编辑应用于这个状态的样式。

如何使用Chrome开发者工具Debug页面HTML/CSS代码

重新排列页面上的元素

有时你可能想在你的网页上重新排列元素,但你不确定哪个顺序是最好的。幸运的是,你可以轻松地进行预览! 只需在Chrome DevTools的Elements选项卡中选择你想移动的元素,拖动它,并将它放到正确的位置。就可以了! 新的顺序将在用户界面中可见,直到你重新加载页面。

预览移动端/模式

现代网页开发并不容易–我们必须确保我们的网页不仅在笔记本电脑上看起来不错,而且在手机、平板电脑、大屏幕等设备上也是如此。而Chrome DevTools在检查我们的网页的响应性时也可能是有用的。只要点击靠近选择器图标的移动预览按钮(顶部菜单中从左边开始的第二个图标),然后在页面预览上方的菜单中选择设备、宽度、高度和设备方向。玩不同的尺寸–由于这一点,你可以注意到你的网页在不同设备上的行为的一些问题!Pixel 5手机上的网页预览。注意启用响应模式的图标–它以蓝色标记,下面有一个工具提示。

如何使用Chrome开发者工具Debug页面HTML/CSS代码

小结

当然,本文所描述的选项并不是Chrome DevTools中唯一可用的选项–你可能会惊讶于这里有这么多了不起的功能(我在预览文章中写了一些不太为人所知的功能)。请自由地尝试和玩一下这个工具–我相信它将帮助你更好地理解和更容易地调试你的项目。

原文地址:https://www.wbolt.com/use-chrome-devtools-to-debug-webpage.html

WordPress资讯

AI聊天机器人之间的较量:Bard vs Bing vs ChatGPT

2024-1-22 1:07:42

WordPress资讯

如何优化你的React应用程序的性能

2024-1-22 1:07:44

个人中心
今日签到
有新私信 私信列表
搜索