欢迎来到魔豆IT网-IT综合知识分析平台

CSS开发中需要了解的16种开发工具技巧

2020-10-16 12:51:47栏目 : 网络编程围观 : 21次

大部分开发人员基本都是用浏览器开发工具调试前端的,但是即使用了几年Chrome开发工具,还是会遇到以前没见过的技能和功能。

在这篇文章中,我已经在开发者工具中写了很多与CSS相关的函数和技巧,我认为这会把你的CSS开发水平提升到一个新的水平。这些技术有的不只是针对CSS,我还是把它们放在一起了。

有些是关于工作流和调试的简单技巧,有些是近几年引入的新功能。大部分都是基于Chrome的开发工具,但也涵盖了一些Firefox的技巧。

检查通过JavaScript显示的元素的CSS在开发人员工具的“元素”面板中找到大多数元素的CSS并不难。在大多数情况下,您只需右键单击该元素,单击“检查”,然后(如有必要)小心地单击“元素”面板来找到它。选择一个元素后,它的CSS将出现在“样式”面板中,并且可以随时编辑。

有时,由于一些基于JavaScript的用户操作,比如单击或鼠标悬停,元素会被动态显示。查看它们最直观的方法是临时更改您的JavaScript或CSS,使它们在默认情况下可见,这样您就可以在不模仿用户操作的情况下处理它。

但是,如果您正在寻找一种仅使用开发人员工具就能使元素可见的更快的方法,您可以遵循以下步骤:

1.打开开发工具

2.打开“来源”面板

3.执行用户操作以使对象可见(如鼠标悬停)

4.当元素可见时,按F8(与“暂停脚本执行”按钮相同)

5.单击开发工具左上角的“选择元素”按钮

6.点击页面上的元素

我们可以通过Bootstrap的工具提示测试,只有鼠标悬停在链接上触发JavaScript才会显示。以下是演示:

如你所见,在GIF开始的时候,我一开始无法选择一个元素来查看,因为鼠标一移开它就消失了。但是,如果我在脚本可见时停止运行,它将保持可见,以便我可以正确地检查它。当然,如果元素只是一个简单的CSS :hover效果,我可以用Styles面板的“切换元素状态”(:hov按钮)来切换状态,使其显示出来。但是当JavaScript切换样式时,停止脚本可能是获得它们CSS样式的最好方法。

您可能知道,您可以使用内置函数(CTRL+F或CMD+F)在“元素”面板中搜索元素。但请注意“查找”栏,它会给你以下提示:

正如我在截图中指出的,您可以通过字符串、选择器和XPath找到元素。之前一直在用字符串,直到最近才意识到可以用选择器。

您不必使用您的CSS中使用的选择器,它可以是任何合法的CSS选择器。find函数将告诉您选择器是否匹配任何元素。这对于查找元素和测试选择器是否有效很有用。

下面是一个使用body >: Div选择器来搜索和遍历body的所有直接子Div元素的示例:

如上所述,这些搜索可以由任何合法的选择器来完成,类似于JavsScript的querySelector()和querySelectorAll()方法。

直接编辑盒子模型是你开始使用CSS时首先要学的东西之一。由于这是CSS布局的重要部分,开发人员工具允许您直接编辑盒子模型。

如果查看页面上的元素,请单击右侧面板上“样式”面板旁边的“计算”面板。您将看到这个元素的可视化方框模型图,其中包含每个部分的数值:

但也许您不知道您可以双击这些值来编辑它们:

您所做的任何更改都会以在“样式”面板中编辑CSS的相同方式反映在页面上。

增加或减少“样式”面板中的属性值。您可能已经意识到可以在“样式”面板中编辑CSS。只需单击属性或值并键入更改。

但是也许你没有意识到值可以以不同的方式增加或减少。

向上箭头键/向下箭头键可以将属性值增加/减少1

ALT+上箭头/下箭头可以增加/减少属性值0.1

SHIFT+上箭头/下箭头可以增加/减少属性值10

CTRL+上箭头/下箭头可以增加/减少属性值100

您也可以使用“向上翻页”或“向下翻页”按钮来代替方向键。

与其他地方相比,“源”面板的文本编辑器功能可能更熟悉样式面板中的编辑。但是Sources面板是开发人员工具中被高度低估的功能,它模仿了常规代码编辑器和IDE的工作模式。

这里有一些你可以在源代码面板中做的有用的事情(打开开发者工具,点击“源代码”按钮)。

使用CTRL键进行多重选择

如果您需要在单个文件中选择多个区域,您可以通过按住CTRL键并选择您想要的内容来实现,即使它不是连续的文本。

在上面的演示中,我在源面板中选择了main.css文件的三个任意部分,然后将它们粘贴回文档中。另外,可以使用多个光标同时在多个地方输入,使用CTRL键点击多个位置。

使用ALT键选择列

有时候,你可能想选择一个文本列表,但通常你不能。有些文本编辑器允许您使用ALT键以及在“源”面板中执行此操作。

使用CTRL+SHIFT+O通过CSS选择器搜索元素。在“源”面板中打开一个文件后,按CTRL+SHIFT+O打开一个输入框,您可以跳转到任何地方。这是崇高的一个著名功能。

按下CTRL+SHIFT+O后,就可以在这个文件中输入想要查找的元素的CSS选择器,开发者工具会给你提供匹配选项。单击以跳转到文件的指定位置。

Chrome和Firefox的响应设计功能您可能已经看过一些网站,只需点击几下就可以测试您的响应布局。其实用Chrome的设备模式也可以这么做。

打开你的开发工具,点击左上角的切换设备工具栏按钮(快捷键CTRL+SHIFT+M):

如您所见,设备工具栏有几个选项可以根据设备的大小和类型更改视图,您甚至可以手动调整宽度和高度值,或者在视口区域拖动手柄。

Firefox的附加“@media rules”面板也有类似的功能,允许你从站点的样式表中点击断点。你可以在下面的演示中看到,我在我的一个网站上使用它。

DevTools的颜色函数在CSS中处理颜色值是很正常的。开发人员工具使您更容易编辑和测试颜色值。以下是你可以做的一些事情:

对比率

首先,开发者工具具有查看可访问性的功能。当您在“样式”面板中看到“颜色”属性值时,您可以单击颜色值旁边的框来打开颜色收集器。在颜色收集器中,您将看到“对比度”选项指示所选文本颜色是否与具有可访问对比度的背景相匹配。

正如您在上面的演示中看到的,颜色收集器在色谱图中显示了一条弯曲的白线。这条线表示最小可接受对比度的起点和终点。当我将颜色值移动到白线上方时,对比度旁边的绿色复选标记将消失,表示对比度差。

调色板

除了查看辅助功能之外,您还可以访问不同的选项板,包括“材质设计”选项板和与当前查看的页面相关联的选项板。

切换颜色值语法

最后,开发人员工具中一个鲜为人知的知识是,您可以在查看颜色值时切换它们的语法。默认情况下,“样式”面板显示用CSS编写的颜色语法。但是开发人员工具允许您按住shift并单击颜色值左边的小方块,在十六进制、RGBA和HSLA之间切换颜色值的语法:

编辑CSS Shadows文字-shadow和box-shadow手写比较枯燥,语法容易忘记,两者语法略有不同。

方便的是,Chrome的开发工具允许你使用可视化编辑器添加文本阴影或框阴影。

如演示所示,您可以使用“样式”面板中任何样式右下角的选项栏向任何元素添加文本阴影或框阴影。添加阴影后,您可以使用可视化编辑器编辑不同的属性值。通过单击属性值左侧的小方块,可以再次从可视化编辑器中调用现有的阴影。

Firefox的网格布局检查器现在最常用的浏览器都支持网格布局,越来越多的开发者使用它们作为默认的布局方式。火狐的开发工具现在将网格选项作为一个特性放在布局标签中。

此功能允许您打开一个完全覆盖的网格,以帮助可视化网格布局的不同部分。您还可以显示行号、区域名称,甚至选择无限延长网格线——如果这对您有用的话。在示例演示中,我使用了Jen Simmons的示例网站,该网站响应迅速,因此当布局因不同的视口而发生变化时,您可以看到可视化网格的优势。

Firefox的CSS滤镜编辑器滤镜是另外一个新功能,手机和PC都支持。Firefox再次提供了一个方便的小工具来帮助您编辑过滤器的值。

一旦你的代码中有了filter(提示:如果你不知道实际的语法,可以先写filter: none),你会注意到在filter值的左边有一个黑白堆叠框,点击它打开filter编辑器。

您可以向单个值添加多个过滤器,删除单个过滤器值,以及拖放单个过滤器来重新排列其应用程序顺序。

在Chrome的“样式”面板中编辑CSS动画,很容易在Chrome的“样式”面板中编辑静态元素。编辑用动画属性和@关键帧创建的动画怎么样?

在开发人员工具中有两种编辑动画的方法。首先,当您在“元素”面板中查看元素或选择元素时,该元素的所有样式都将出现在“样式”面板中,包括已定义的@关键帧。在下面的演示中,我用动画选择了一个元素,然后调整了一些关键帧设置。

但这还不是全部。Chrome的开发工具提供了一个动画面板,允许您使用可视时间线编辑动画及其不同部分。您可以选择更多工具,并通过单击开发人员工具右上角的“自定义和控制开发工具”按钮(三个垂直按钮)打开动画面板。

如上图,可以编辑每个动画元素的时间线,然后编辑后可以浏览动画看到页面上的变化。这是一个很酷的设计和调试复杂CSS动画的功能!

在开发工具中查看未使用的CSS最近,有很多工具可以帮助您跟踪特定页面上未使用的CSS。所以你可以选择完全删除或者只在需要的时候加载。这样会有明显的性能优势。

Chrome允许你通过开发者工具的“覆盖”面板来查看未使用的CSS。可以通过单击开发人员面板右上角的“自定义和控制开发工具”选项(三个垂直按钮),选择“更多工具”并找到“覆盖率”来打开该面板。

如演示所示,一旦您打开覆盖率面板,您就可以在源面板中打开一个源文件。当打开文件时,您会注意到CSS文件中每个样式的右侧都有一条绿色或红色的线,指示该样式是否应用于当前页面。

结论你的浏览器开发工具是CSS编辑调试的宝库。当您将上述建议与Chrome的功能(如工作区)相结合(允许您将开发人员工具中所做的更改保存到本地文件中)时,整个调试过程将变得更加完整。

希望这些技巧和建议能提高你在以后的项目中编辑调试CSS的能力。这些是开发工具技能的细节,需要在16个CSS开发中知道,等等

展开剩余内容

分享到:

猜你喜欢

  • solidworks2013免费版附序列号安装教程 32&64

    solidworks2013免费版将易用性与广泛的定制化相结合,让新用户能够很快学会该软件,还让资深用户能够在以前看来非常复杂和精密的任务中迅速获得更高的生产能力。这款新产品建...

    2020-10-21
  • 浩辰cad电气2017简体中文版 64位&32位

    浩辰cad电气2017是由于浩辰cad官方最新推出电气cad设计软件。浩辰cad电气2017能帮助用户轻松的设计各种大型电气工程图,对比2016版而言功能更加的齐全完善,全面的...

    2020-10-21
  • wps和office的兼容性怎么样

    在我们使用wps和office的时候,可能会想wps和office之间的文件兼容性怎么样。小编觉得这两个软件的兼容性还是可以的,毕竟都是类似的办公软件,除了自身带有的软件本身的...

    2020-10-20
  • 黑客声称获取育碧尚未发布游戏《看门狗:军团》源代码

    10月16日消息:日前,育碧和Crytek(欧洲的电子游戏开发商)这两家当今最大的游戏公司数据遭泄露,原因是一个名为Egregor的勒索软件团伙在窃取了这家两家公司内部网络窃取...

    2020-10-20
热门标签