前端调试新姿势，还能这么玩？

文章预览

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