专栏名称: 前端充电宝
掘金LV8作者,坚持原创。分享前端技术文章、学习资料、面试经验、热点资讯,开启前端进阶之旅!
今天看啥  ›  专栏  ›  前端充电宝

前端调试新姿势,还能这么玩?

前端充电宝  · 公众号  ·  · 2024-10-27 19:00

文章预览

在 Chrome 130 版本中,DevTools的 Elements 面板新增了一个 scroll 标记,专门用于标记页面上的可滚动元素。这一改进使得定位和解决页面中意外出现的滚动条变得更加直观和便捷。 Chrome 团队还在研发一项新功能—— 全新的“溢出”标记 ,该标记旨在明确指示出页面上存在元素内容溢出的情况,从而助力开发者迅速诊断布局问题。 除了新增的 scroll 标记,其实 Chrome Devtools 的 Elements 面板中还有很多实用的标记,在元素中点击右键并选择 Badge setting.. . 即可查看和设置是否显示标记。 下面就来分别看看这些标记的作用。 grid:网格布局 如果元素的 display 属性设置为了 grid 或 inline-grid ,该元素就是网格布局中的容器。这个元素的旁边就会显示 grid 标记,点击标记可查看布局详细信息。 flex:Flex 布局 如果元素的 display 属性设置为了 flex 或 inline-flex ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览