Debug CSS

chrome.google.com

一款轻量 Chrome 扩展，为页面所有元素添加彩色描边，按住 Ctrl 悬停可查看元素样式详情，方便调试 CSS 布局。

免费HTML/CSS浏览器网页

被推荐 1 次

适合做什么

适合前端开发者和网页设计师在开发时快速定位布局问题、查看元素样式与层级关系。

授权

技术栈

平台

@bradtraversy/design-resources-for-developers · awesome 列表出处 ↗

Debug CSS Adds outline to all elements on the page to show the culprit element which is changing desired layout. Helps in debugging CSS of the page

浏览器扩展

Chrome 浏览器取色扩展，支持吸管取色、高级调色板、CSS 渐变生成与网页配色分析。

免费

chrome.google.com1 处推荐详情

浏览器扩展

浏览器取色扩展，支持吸管取色、高级调色板、CSS 渐变生成与网页配色分析。

免费

addons.mozilla.org1 处推荐详情

浏览器扩展

一款浏览器扩展，悬停即可识别网页所用字体，点击可查看字号、颜色等详细样式。

免费

chrome.google.com1 处推荐详情

浏览器扩展

在网页上叠加半透明设计稿，实时对比前端实现与设计稿的像素级差异。

免费+付费

chrome.google.com1 处推荐详情

配色工具

浏览器取色器扩展，支持吸管、调色板、CSS 渐变生成等，前端与设计师常用。

免费

colorzilla.com1 处推荐详情

浏览器扩展

浏览器扩展，一键识别任意网页字体，支持试用、收藏与购买，准确率极高。

免费

chrome.google.com1 处推荐详情