Chrome Devtools 检查CSS网格
devtools
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
项目地址:https://gitcode.com/gh_mirrors/de/devtools
免费下载资源
·
文章翻译自:https://developer.chrome.com/docs/devtools/css/grid/
本指南将向您展示如何在页面上发现 CSS 网格、检查它们并在Chrome DevTools的Elements面板中调试布局问题
发现 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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)