文章翻译自:https://developer.chrome.com/docs/devtools/css/grid/

本指南将向您展示如何在页面上发现 CSS 网格、检查它们并在Chrome DevTools的Elements面板中调试布局问题

本文中出现的截图中显示的示例来自这两个网页:Fruit boxSnack box

发现 CSS 网格

  • 当页面上的 HTML 元素已经display: grid或display: inline-grid应用到它时,您可以grid在“Elements”面板中看到它旁边的徽章
    在这里插入图片描述
  • 单击旁边的徽章可以显示网格线的位置,再次点击,网格线消失
    在这里插入图片描述
  • 当页面上包含网格时,Layout 窗格将包含一个Grid部分,其中包含许多用于查看这些网格的选项
    在这里插入图片描述
    在这里插入图片描述
下面来介绍这些选项
Overlay display setting
  • 一些设置,自己点点就知道啥意思了
Grid overlays
  • 是这个页面出现的所有网格,可以点击前面的选择框来选择显示与否
GitHub 加速计划 / de / devtools
24.59 K
4.14 K
下载
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:2 个月前 )
79116147 - 3 个月前
f0359002 - 4 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐