Pixel Inspector是一款专为开发和设计人员打造的工具,用于检查网页元素。它具备测量元素距离和展示部分样式信息的功能,帮助用户快速获取元素的位置和样式数据,提升开发和设计效率。该工具操作简便,界面友好,是网页开发和设计的得力助手
主要功能
✅ 查看信息: 即查看模式,点击插件图标,开启插件后,将鼠标悬浮在元素上,可显示部分样式信息。
✅ 元素测距: 即测距模式,先选中一个目标元素,将鼠标移动到其他元素,可显示两元素之间的距离尺寸。 元素选择方式:1、鼠标点击选择:点击元素选中,再次点击可取消;2、按键选择:鼠标移动到元素上,按一次Alt(Option)可选中元素,连按两次可取消。按ESC键也可取消元素选择,退出测距模式。
快捷键
✅元素选择模式切换 Alt (Option) + Shift + A
✅复制css样式代码 Ctrl (cmd) + C
✅样式信息完整显示 E
✅只显示水平或竖直方向距离 X(Y)
✅取消选择元素 ESC
插件安装说明
1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点,在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况,可以将crx文件右键,然后选择【管理员取得所有权】,再尝试重新安装
5、安装好后即可使用
Pixel Inspector下载地址

为打击盗链困扰,本站已启用公众号验证
扫码关注公众号,发【识别码】获取
扫码关注公众号,发【识别码】获取
©下载资源版权归作者所有;本站所有资源均来源于网络,仅供学习使用,请支持正版!
订阅评论
登录
0 评论