百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> 16 个CSS开发中需要理解的DevTools技巧
分享文章到:

16 个CSS开发中需要理解的DevTools技巧

发布时间:10/01 来源:未知 浏览: 关键词:

大多数开发者根本都使用阅读器的开发者工具调试前端,但即便用了好几年 Chrome 的开发者工具,我依然会碰到从未见过的技巧和功效。

在本文中,我写了很多在开发者工具中与 CSS 相关的功效和技巧,我认为它们将把你的 CSS 开发水平晋升至一个新的台阶。其中一些技巧不仅仅针对 CSS,但是我还是把它们放在了一起。

一些是有关于工作流与调试的简便技巧,另一些则是比来几年推出的新功效。它们大多数基于 Chrome 的开发者工具,但也涵盖了一些 Firefox 的技巧。

审查通过 JavaScript 显示的元素的 CSS

在开发者工具的 Elements 面板查寻大多数元素的 CSS 并不艰难。大多数状况下你只需要右键该元素,点击检查,然后(如有必要)细心点在 Elements 面板寻到它。一旦元素被选中,它的 CSS 会显现在 Styles 面板,随时可以编纂。

有时一个元素会由于一些基于 JavaScript 的会员操纵动态显示,例如 click 或者 mou搜索引擎优化ver。审查它们最直不雅的办法是临时更换你的 JavaScript 或 CSS 使它们默许可见,以便于你在无需仿照会员操纵的状况下处置它。

但假如你在寻觅一种更快速的办法仅使用开发者工具让元素可见,可以遵照以下步骤:

1、翻开开发者工具

2、翻开 Sources 面板

3、施行会员操纵让对象可见(例如鼠标悬停)

4、在元素可见的时候按下 F8(与“暂停足本施行”按钮雷同)

5、点击开发者工具左上角的“拔取元素”按钮

6、点击页面上的元素

我们可以通过 Bootstrap 的 tooltips 测试,只要鼠标悬浮在链接上触发 JavaScript 它才会显示,下面是演示:

1.gif

如你所见在 GIF 的开头,我一开端没法选中元从来审查它,由于鼠标一旦移开它就消逝了。但假如我在它可见的时候休止足本运转,它将保持可见状态以便我可以准确地检查它。当然,假如元素只是简便的 CSS :hover 结果,那么我可以用 Styles 面板的 “Toggle Element State”(:hov 按钮)切换状态来让它显示。但由 JavaScript 切换样式的状况下,休止足本或许是猎取它们 CSS 样式的最好办法。

通过CSS选中器搜索元素

你或许知道你可以用内置功效(CTRL + F 或者 CMD + F)在 Elements 面板搜索一个元素。但留意看 “find” 栏,它会给你以下提醒:

2.png

正如我在截图中指出的那样,你可以通过字符串、选中器乃至 XPath 寻觅元素。此前我不断都在使用字符串,直到比来我才意识到我可以使用选中器。

你不必然要使用你 CSS 中用过的选中器,它可以是任意合法的 CSS 选中器。查寻功效将告诉你选中器可否与任何元素匹配。这对查寻元素很有用,还有助于测试选中器可否有效。

下面是一个使用 body > div 选中器来搜索乃至遍历 body 所有直接子 div 元素的 demo:

3.gif

如上所述,这些搜索可以通过任意合法选中器完成,相似于 JavsScript 的 querySelector()querySelectorAll() 办法。

直接编纂盒模型

盒模型是你开端使用 CSS 第一学习的东西之一。由于这是 CSS 规划的一个重要部分,开发者工具同意你直接编纂盒模型。

假如你审查了页面上的一个元素,请在右侧面板单击 Styles 面板旁的 Computed 面板。你将看到该元素的可视化盒模型图示,上面有各部分的数值:

4.png

但是或许您不知道可以双击这些值来对其停止编纂:

5.gif

所做的任何更换都会以与在 Styles 面板中编纂 CSS 时雷同的方式反映在页面上。

在“Styles”面板递增或递减属性值

你大概已经意识到可以在 Styles 面板中编纂 CSS。只需单击属性或值,然后键入更换即可。

但或许你没成心识到数值可以以不一样的方式递增或递减。

  • 上标的目的键 / 下标的目的键可以使属性值以 1 递增 / 递减

  • ALT + 上标的目的键 / 下标的目的键可以使属性值以 0.1 递增 / 递减

  • SHIFT + 上标的目的键 / 下标的目的键可以使属性值以 10 递增 / 递减

  • CTRL + 上标的目的键 / 下标的目的键可以使属性值以 100 递增 / 递减

6.gif

你也可以使用 Page Up 或 Page Down 按钮代替标的目的键。

“Sources”面板的文本编纂器功效

比起别的地方,你或许更熟知在 Styles 面板停止编纂,然而 Sources 面板是开发者工具中被高度低估一个功效,它仿照了常规代码编纂器和 IDE 的工作方式。

以下是一些你可以在 Sources 面板(翻开开发者工具并点击 “Sources” 按钮)可以做的有用的事情。

使用 CTRL 键停止多项选中

假如需要在单个文件中选中多个区域,可以通过按住 CTRL 键并选中所需内容来完成此操纵,即便它不是持续文本也是如此。

7.gif

在上面的 demo 中,我在 Sources 面板中选中了 main.css 文件的三个任意部分,然后将它们粘贴回文档中。此外,你还可以通过多个光标在多个地方停止同时输入,使用 CTRL 键单击多个位置即可。

使用 ALT 键选中列

有的时候,你大概但愿选中一列文本,但平常状况下没法办到。某些文本编纂器同意你使用 ALT 键来完成此操纵,在 Sources 面板中也是如此。

8.gif

使用 CTRL + SHIFT + O 组合键通过 CSS 选中器搜索元素

在 Sources 面板翻开文件后,按下 CTRL + SHIFT + O 组合键,可以翻开一个输入框让你跳转到任意地方,这是 Sublime 一个闻名的功效。

按下 CTRL + SHIFT + O 之后,你可以输入你在本文件中想查寻元素的 CSS 选中器,开发者工具会给你供给匹配选项,点击可跳转到文件的指定位置。

9.gif

Chrome 和 Firefox 的响应式设计功效

你或许已经看过一些让你只需点击几下就得以测试你的响应式规划的网站,其实,你可以用 Chrome 的设备模式做一样的事情。

翻开你的开发者工具,点击左上角的 “Toggle device toolbar” 按钮(快速键 CTRL + SHIFT + M):

10.gif

如你所见,设备工具栏有多个选项可按照设备大小和设备类型更换视图,你乃至可以通过手动调整宽度和高度数值或拖动视口区域中的手柄来手动停止更换。

Firefox 附加的 “@media rules” 面板具有相似的功效,它同意你从站点的样式表中单击断点。你可以鄙人面的 demo 中看到我在我的一个网站上使用它。

11.gif

DevTools的色彩功效

在 CSS 中处置色彩值是常态。开发者工具让可以你更简便地编纂、测试色彩值。以下是你可以做的事情:

对照度

第一,开发者工具有查看可拜访性功效,当你在 Styles 面板看到 Color 属性值时,你可以点击色彩值旁边的方块翻开色彩采集器。在色彩采集器里面,你将看到对照度选项指示你所选中的文本色彩搭配背景可否有可拜访的对照度。

12.gif

正如你在上面 demo 所看到的,色彩采集器在色谱中显示出曲折的白线。这个线表示最小可接受对照度开端和完毕的位置。当我将色彩值移到白线上方时,对照度旁的绿勾将会消逝,表白对照度较差。

调色板

除了查看可拜访性的功效之外,你还可以拜访不一样的调色板,包罗 Material Design 调色板乃至与当前查看页面关联的调色板。

13.gif

切换色彩值语法

最后,在开发者工具中一个不为人知的小知识是在查看色彩值时你可以切换色彩值的语法。默许状况下,Styles 面板会显示 CSS 里写的色彩的语法。但是开发者工具同意你按住 shift,点击色彩值左边的小方块,在 hex、RGBA 乃至 HSLA 之间切换色彩值的语法:

14.gif

编纂 CSS 暗影

text-shadow 和 box-shadow 的 CSS 手写起来很乏味,语法很容易健忘,且两种暗影的语法略有不一样。

利便的是,Chrome 的开发者工具同意你使用可视化编纂器增加 text-shadow 或 box-shadow。

15.gif

正如 demo 中显示的,你可以用 Styles 面板中任意样式右下角的选项栏给任意元素增加 text-shadow 或 box-shadow。暗影增加后,你可以用可视化编纂器编纂不一样的属性值。已存在的暗影可以通过点击属性值左边的小方块从新呼出可视化编纂器。

Firefox 的 Grid 规划检查器

此刻大多数常用的阅读器都支撑 Grid 规划,越来越多的开发者将它们用作默许的规划办法。Firefox 的开发者工具如今把 Grid 选项作为特点功效放到了 Layout 选项卡中。

16.gif

这个功效同意你开启一个全覆盖的网格帮忙可视化 Grid 规划的不一样部分。你还可以显示行号、区域名称,乃至可以选中无穷延长网格线 —— 假如这对你有用的话。在示例 demo 中,我在使用 Jen Simmons 的示例网站,它是响应式的,因此当规划由于不一样视口改动时,你可以看到可视化网格的好处。

Firefox 的 CSS filter 编纂器

filter 是此刻几乎在移动端和 PC 端都支撑的另一个新功效。Firefox 再次供给了一个好用的小工具帮忙你编纂 filter 的值。

一旦你代码里有 filter(提醒:假如你不知道实际语法,你可以先写上 filter: none),你将留意到 filter 值左边有一个黑白相间的堆叠方块,点击它可以翻开 filter 编纂器。

您可以将多个过滤器增加到单个值,删除单个过滤器值,还可以拖放单个过滤器以从新摆列其利用次序。

18.gif

在 Chrome 的 Styles 面板编纂 CSS 动画

在 Chrome 的 Styles 面板编纂静态元素非常简便,那么编纂使用 animation 属性乃至 @keyframes 创立的动画呢?

开发者工具有两种编纂动画的办法。第一,当你审查一个元素或者在 Elements 面板选中一个元素,该元素的所有样式都会显现在 Styles 面板 —— 包罗已定义的 @keyframes。鄙人面的 demo 中,我选中了一个带动画的元素,然后调整了一些关键帧设定。

但这并不是全部,Chrome 的开发者工具供给了一个 Animation 面板让你可以使用可视化时间线编纂一个动画及它的各个不一样部分。你可以通过点击开发者工具右上方的 “Customize and control DevTools” 按钮(三个竖点按钮),选中更多工具,开启 Animations 面板。

如上所示,你可以编纂每个动画元素的时间轴,然后在完成编纂后,你可以阅读动画以查看页面上的更换。这是设计和调试复杂 CSS 动画的一个很酷的功效!

在DevTools中查看未使用的 CSS

比来有大量工具可以帮忙你追踪未在特定页面上使用的 CSS。这样你就可以选中完全删除它们或仅在必要时加载它们。这将具有明显的机能优势。

Chrome 同意你通过开发者工具的 “Coverage” 面板查看未使用的 CSS。这个面板可以通过上文提到的点击开发者面板右上角的 “Customize and control DevTools” 选项(三个竖点按钮),选中“更多工具”,寻到 “Coverage” 开启。

21.gif

如 demo 所示,一旦你翻开了 Coverage 面板,你可以在 Sources 面板翻开一个源文件。当文件翻开时,你将留意到 CSS 文件中每条样式右侧都有绿色或红色的线,指示样式可否在当前页面被利用。

结论

你的阅读器开发工具是 CSS 编纂和调试的宝库。当你将以上倡议与 Chrome 的功效例如 —— Workspaces(同意你把在开发者工具所做的变动留存到当地文件)—— 结合,整个调试历程会变得愈加完全。

我但愿这些技巧与倡议将晋升你在将来的项目中编纂与调试 CSS 的能力。

以上就是16 个CSS开发中需要理解的DevTools技巧的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板