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

Chrome 团队还在研发一项新功能—— 全新的“溢出”标记 ，该标记旨在明确指示出页面上存在元素内容溢出的情况，从而助力开发者迅速诊断布局问题。

除了新增的 scroll 标记，其实 Chrome Devtools 的 Elements 面板中还有很多实用的标记，在元素中点击右键并选择 Badge setting.. . 即可查看和设置是否显示标记。

下面就来分别看看这些标记的作用。

grid：网格布局

如果元素的 display 属性设置为了 grid 或 inline-grid ，该元素就是网格布局中的容器。这个元素的旁边就会显示 grid 标记，点击标记可查看布局详细信息。

flex：Flex 布局

如果元素的 display 属性设置为了 flex 或 inline-flex ，该元素就是 flex 布局中的容器。这个元素的旁边就会显示 flex 标记，点击标记可查看布局详细信息。

ad：广告框架

用于标记出网页中使用的某些广告框架，以明确表示这些部分是用于展示广告的。

scroll-snap：滚动捕捉

当元素的 overflow 属性设置为 scroll 或内容溢出时设置为 auto ，这个元素就成为了滚动容器，旁边会显示 scroll-snap 标记以查看滚动内容。

container：容器查询

在CSS 容器查询中，如果元素设置了 container-type 属性，那么它就是容器，该元素旁边就会显示 container 标记，