UI走查辅助工具

Latest Version

Version
1.0.5
Update
May 23, 2024
Size
29.45KiB
Developer
Category
Users
178
Rating
5 ★
Manifest Version
3
Web Store Status
Languages Support
中文 (简体)
See more
Permissions
Scripting
ActiveTab
Storage
Tabs
See more

Pixel Inspector Extension

这是一款帮助开发或设计人员检查页面元素的工具,包括测量元素距离及展示元素部分样式信息。
This is a tool designed to assist developers or designers in inspecting page elements, including measuring distances between elements and displaying partial style information of the elements.

>>>> 主要功能<<<<
✅ 查看信息: 即查看模式,点击插件图标,开启插件后,将鼠标悬浮在元素上,可显示部分样式信息。
✅ 元素测距: 即测距模式,先选中一个目标元素,将鼠标移动到其他元素,可显示两元素之间的距离尺寸。 元素选择方式:1、鼠标点击选择:点击元素选中,再次点击可取消;2、按键选择:鼠标移动到元素上,按一次Alt(Option)可选中元素,连按两次可取消。按ESC键也可取消元素选择,退出测距模式。

>>>> 快捷键<<<<
✅元素选择模式切换 Alt (Option) + Shift + A
✅复制css样式代码 Ctrl (cmd) + C
✅样式信息完整显示 E
✅只显示水平或竖直方向距离 X(Y)
✅取消选择元素 ESC
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Pixel Inspector", "version": "1.0.5", "description": "UI\u8d70\u67e5\u8f85\u52a9\u5de5\u5177", "icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "content_scripts": [ { "matches": [""], "css": ["style/index.css"] } ], "background": { "service_worker": "js/background.js" }, "action": {"default_popup": "popup/index.html", "default_icon": { "48": "images/icon48.png" } }, "options_ui": { "page": "option/index.html", "open_in_tab": true }, "permissions": ["scripting", "activeTab", "storage", "tabs"]}
Read more

Similar Extensions

icon

Pixel measurement Extension · Developer Tools 178 26 ★ 236KiB

icon

Visual Inspector(前端重构+视觉走查辅助工具) Extension · Developer Tools 178 10 ★ 174KiB

icon

LittleBee Extension · Developer Tools 178 0 ★ 3.85MiB

icon

check-ui Extension · Developer Tools 178 1 ★ 440KiB

icon

FigmaEX Extension · Productivity 178 5 ★ 751KiB

icon

Ajax Modifier Extension · Developer Tools 178 48 ★ 2.08MiB

icon

草料二维码-快速生码和解码工具 Extension · Accessibility 178 73 ★ 289KiB

icon

PixOK, A CSS design tool for FE developers Extension · Developer Tools 178 1 ★ 1.32MiB

icon

Web元素捕手 Extension · Developer Tools 178 0 ★ 24.37KiB

icon

ui-check Extension · Developer Tools 178 1 ★ 59.52KiB

icon

Console Importer Extension · Developer Tools 178 20 ★ 9.55KiB

icon

Better Ruler Extension · Developer Tools 178 52 ★ 93.66KiB

icon

稀土掘金 Extension · Productivity 178 339 ★ 4.66MiB

icon

FigmaCN Extension · Productivity 178 44 ★ 53.8KiB

icon

FeHelper(前端助手) Extension · Developer Tools 178 321 ★ 2.72MiB

icon

AlloyDesigner Extension · Developer Tools 178 22 ★ 531KiB

icon

XSwitch Extension · Developer Tools 178 18 ★ 1.6MiB

icon

Apifox Browser Extension Extension · Developer Tools 178 9 ★ 28.39KiB

icon

花瓣采集插件 Extension · Productivity 178 67 ★ 1.19MiB

icon

Metric Spy Extension · Developer Tools 178 2 ★ 268KiB

icon

Find Selector Extension · Developer Tools 178 4 ★ 62.08KiB

icon

Measuremate Extension · Developer Tools 178 42 ★ 797KiB

icon

Hover inspector like in Zeplin , Figma Extension · Developer Tools 178 29 ★ 122KiB

icon

Designer Tools Extension · Developer Tools 178 227 ★ 987KiB