设计师前端工具集 by jinfeng
网页元素信息查看、取色器、尺寸测量、资源批量下载,设计师和前端的必备效率工具
Extension Metadata
Screenshots
About this extension
v1.0.1 初始版本
四大核心功能:
🔍 元素查看器
- 悬停查看网页元素的标签、ID、类名、尺寸和位置
- 点击查看元素的计算样式(颜色、字体、边距、边框等)
- 一键复制 CSS 选择器、HTML 结构和完整样式代码
- 支持连续查看多个元素
🎨 取色器
- 带 150px 放大镜的屏幕取色工具
- 实时显示 HEX/RGB/HSL 颜色值(可在设置中切换)
- 点击取色自动复制到剪贴板
- 自动保存最近 20 个取色历史
📏 尺寸测量
- 拖拽测量页面任意区域的宽高像素值
- 十字准星辅助定位,测量结果实时显示
- 测量完成自动复制尺寸(可在设置中关闭)
- 按 G 键切换网格辅助线,网格大小可自定义
📥 资源批量下载
- 一键收集当前页面所有资源:图片、视频、音频、字体、CSS、JS
- 支持按类型筛选查看,资源数量实时统计
- 单个资源可单独下载,多个资源可批量打包为 ZIP
- 下载时弹出保存对话框,用户可选择保存路径
⌨ 快捷键
- Alt+Shift+I:元素查看器
- Alt+Shift+C:取色器
- Alt+Shift+R:尺寸测量
⚙ 设置功能
- 取色器默认颜色格式(HEX/RGB/HSL)
- 取色/测量后自动复制开关
- 网格大小自定义(1-100px)
🔒 隐私说明
- 所有功能均在本地浏览器中运行,不上传任何数据
- 不收集用户浏览历史、个人信息或网页内容
- 颜色历史和设置仅保存在用户本地浏览器中
四大核心功能:
🔍 元素查看器
- 悬停查看网页元素的标签、ID、类名、尺寸和位置
- 点击查看元素的计算样式(颜色、字体、边距、边框等)
- 一键复制 CSS 选择器、HTML 结构和完整样式代码
- 支持连续查看多个元素
🎨 取色器
- 带 150px 放大镜的屏幕取色工具
- 实时显示 HEX/RGB/HSL 颜色值(可在设置中切换)
- 点击取色自动复制到剪贴板
- 自动保存最近 20 个取色历史
📏 尺寸测量
- 拖拽测量页面任意区域的宽高像素值
- 十字准星辅助定位,测量结果实时显示
- 测量完成自动复制尺寸(可在设置中关闭)
- 按 G 键切换网格辅助线,网格大小可自定义
📥 资源批量下载
- 一键收集当前页面所有资源:图片、视频、音频、字体、CSS、JS
- 支持按类型筛选查看,资源数量实时统计
- 单个资源可单独下载,多个资源可批量打包为 ZIP
- 下载时弹出保存对话框,用户可选择保存路径
⌨ 快捷键
- Alt+Shift+I:元素查看器
- Alt+Shift+C:取色器
- Alt+Shift+R:尺寸测量
⚙ 设置功能
- 取色器默认颜色格式(HEX/RGB/HSL)
- 取色/测量后自动复制开关
- 网格大小自定义(1-100px)
🔒 隐私说明
- 所有功能均在本地浏览器中运行,不上传任何数据
- 不收集用户浏览历史、个人信息或网页内容
- 颜色历史和设置仅保存在用户本地浏览器中
Rated 0 by 0 reviewers
Permissions and data
Required permissions:
- Download files and read and modify the browser’s download history
- Access your data for all websites
Data collection:
- The developer says this extension doesn't require data collection.
More information
- Add-on Links
- Version
- 1.0.1
- Size
- 65.19 KB
- Last updated
- 18 days ago (Sep 14, 2026)
- Related Categories
- License
- MIT License
- Version History
- Add to collection