Visual Inspector(前端重构+视觉走查辅助工具)
A helper tool for fast front-end development and visual inspection.
Visual Inspector(前端重构+视觉走查辅助工具)คืออะไร?
Visual Inspector(前端重构+视觉走查辅助工具) เป็นส่วนขยายของ Chrome ที่พัฒนาโดย paul และคุณลักษณะหลักของมันคือ "A helper tool for fast front-end development and visual inspection."
ภาพหน้าจอของส่วนขยาย
ดาวน์โหลดไฟล์ CRX ของส่วนขยาย Visual Inspector(前端重构+视觉走查辅助工具)
ดาวน์โหลดไฟล์ส่วนขยาย Visual Inspector(前端重构+视觉走查辅助工具) ในรูปแบบ crx และติดตั้งส่วนขยาย Chrome ด้วยตนเองในเบราว์เซอร์หรือแชร์ไฟล์ crx กับเพื่อนๆ เพื่อติดตั้งส่วนขยาย Chrome อย่างง่ายดาย
คำแนะนำในการใช้ส่วนขยาย
## Visual Inspector
> This is a chrome plugin to help front-end engineers and designers to quickly locate differences between design mockups and web pages. as well as front-end engineers UI self-examination, reducing the cost of communication with designers.
> You can modify the `size`, `position`, `transparency`, `mix mode` of the design manuscript at will, to facilitate UI comparison of various design styles.
> If you are doing page refactoring, the real-time function can be easily restored to the state before the page is refreshed after the page is refreshed (such as the size, position, transparency, etc. of the design draft).
> At the same time, if you do not need to move the stretch design, it is recommended to open the freeze function, so that the design will no longer respond to mouse events, can not stretch and drag, and will not affect the interactive function of the page itself.
> Preset shortcuts for frequently used commands for easier operation and comparison
### New version(1.3.9+) removed ruler. for those who need this functionality, please install a ruler such as [better ruler](https://chrome.google.com/webstore/detail/better-ruler/ilcnadaaninblgbekoaihdhoiecaflie), which supports snapping elements.
### shortcut keys:
- h: show or hide mockup
- f: show or hide the bottom toolbar
- d: freeze or unfreeze mockup
- Number keys (0-9): Quickly set the mockup transparency. For example, if you press 5 twice in 1 second, the transparency of the mockup will be set at 55%. If only the number key is pressed once in 1 second, such as 5, it will automatically fill 0 after one second, that is, set the mockup transparency to 50%.
- Arrow keys: Move the mockup and move 1px at a time. If you press the Shift key at the same time, you will move 10px at a time.
- Quick adaptation:
- alt + 0: Reset
- alt + 1: Original image size
- alt + 2: Original size *2
- alt + 3: Original size /2
- alt + 4: Window Width
- If the shortcut does not work, please check if the current page's focus is inside other form controls (such as input, textarea...)? The easiest way, click on the mockup, or on the blank area in the page and to try again :) ข้อมูลพื้นฐานของส่วนขยาย
| ชื่อ |  Visual Inspector(前端重构+视觉走查辅助工具) |
| ID | jgimcbonbekgeahallgcmiibdidjeeim |
| URL อย่างเป็นทางการ | https://chromewebstore.google.com/detail/visual-inspector%E5%89%8D%E7%AB%AF%E9%87%8D%E6%9E%84+%E8%A7%86%E8%A7%89%E8%B5%B0%E6%9F%A5/jgimcbonbekgeahallgcmiibdidjeeim |
| คำอธิบาย | A helper tool for fast front-end development and visual inspection. |
| ขนาดไฟล์ | 174 KB |
| จำนวนการติดตั้ง | 3,325 |
| เวอร์ชันปัจจุบัน | 1.6.8 |
| อัปเดตครั้งล่าสุด | 2022-07-26 |
| วันที่เผยแพร่ | 2020-04-04 |
| คะแนน | 4.30/5 รวมทั้งหมด 10 คะแนน |
| ผู้พัฒนา | paul |
| อีเมล | [email protected] |
| ประเภทการชำระเงิน | free |
| ภาษาที่รองรับ | en,zh-CN |
| manifest.json | |
{
"update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
"name": "Visual Inspector(\u524d\u7aef\u91cd\u6784+\u89c6\u89c9\u8d70\u67e5\u8f85\u52a9\u5de5\u5177)",
"short_name": "VI",
"version": "1.6.8",
"manifest_version": 2,
"default_locale": "zh_CN",
"author": "paul",
"description": "__MSG_pluginDesc__",
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';",
"icons": {
"128": "icon.png"
},
"browser_action": {
"default_icon": "icon_gray.png",
"default_title": "Visual Inspector",
"default_popup": "popup_loading.html"
},
"permissions": [
"unlimitedStorage",
"storage",
"activeTab"
],
"content_scripts": [
{
"matches": [
"http:\/\/*\/*",
"https:\/\/*\/*"
],
"js": [
"content.js"
],
"run_at": "document_end"
}
],
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"web_accessible_resources": [
"content.css"
]
} | |
