Visual Inspector(前端重构+视觉走查辅助工具) ฉัน

รายละเอียด:

เรียกใช้ส่วนขยายเว็บร้านค้าออนไลน์ของ Chrome Visual Inspector (前端重构+视觉走查辅助工具) โดยใช้ OffiDocs Chromium ออนไลน์

## ตัวตรวจสอบภาพ > นี่คือปลั๊กอิน Chrome ที่ช่วยให้วิศวกรและนักออกแบบส่วนหน้าค้นหาความแตกต่างระหว่างแบบจำลองการออกแบบและหน้าเว็บได้อย่างรวดเร็ว

ตลอดจนการตรวจสอบ UI ของวิศวกรส่วนหน้าด้วยตนเอง ซึ่งช่วยลดค่าใช้จ่ายในการสื่อสารกับนักออกแบบ

> คุณสามารถปรับเปลี่ยน `ขนาด`, `ตำแหน่ง`, `ความโปร่งใส`, `โหมดผสม` ของต้นฉบับการออกแบบได้ตามต้องการ เพื่ออำนวยความสะดวกในการเปรียบเทียบ UI ของสไตล์การออกแบบต่างๆ

> หากคุณกำลังปรับโครงสร้างหน้าใหม่ ฟังก์ชันแบบเรียลไทม์สามารถคืนค่าเป็นสถานะได้อย่างง่ายดายก่อนที่หน้าจะถูกรีเฟรชหลังจากที่รีเฟรชหน้า (เช่น ขนาด ตำแหน่ง ความโปร่งใส เป็นต้น

ของแบบร่างการออกแบบ)

> ในเวลาเดียวกัน หากคุณไม่ต้องการเคลื่อนย้ายการออกแบบที่ยืดออก ขอแนะนำให้เปิดฟังก์ชันตรึง เพื่อให้การออกแบบไม่ตอบสนองต่อเหตุการณ์ของเมาส์อีกต่อไป ไม่สามารถยืดและลากได้ และจะไม่ส่งผลกระทบต่อการโต้ตอบ การทำงานของเพจนั่นเอง

> ทางลัดที่กำหนดไว้ล่วงหน้าสำหรับคำสั่งที่ใช้บ่อยเพื่อการทำงานและการเปรียบเทียบที่ง่ายขึ้น ### เวอร์ชันใหม่ (1.

3.

9+) ลบไม้บรรทัด

สำหรับผู้ที่ต้องการฟังก์ชันนี้ โปรดติดตั้งไม้บรรทัด เช่น [ไม้บรรทัดที่ดีกว่า](https://chrome.

Google

com/webstore/detail/better-ruler/ilcnadaaninblgbekoaihdhoiecaflie) ซึ่งรองรับองค์ประกอบการสแนป

### ปุ่มลัด: - h: แสดงหรือซ่อนการจำลอง - f: แสดงหรือซ่อนแถบเครื่องมือด้านล่าง - d: ตรึงหรือยกเลิกการตรึงการจำลอง - ปุ่มตัวเลข (0-9): ตั้งค่าความโปร่งใสของจำลองอย่างรวดเร็ว

ตัวอย่างเช่น หากคุณกด 5 สองครั้งใน 1 วินาที ความโปร่งใสของการจำลองจะถูกตั้งค่าที่ 55%

หากกดปุ่มตัวเลขเพียงครั้งเดียวใน 1 วินาที เช่น 5 ปุ่มจะเติม 0 โดยอัตโนมัติหลังจากหนึ่งวินาที นั่นคือ ตั้งค่าความโปร่งใสจำลองเป็น 50%

- ปุ่มลูกศร: ย้ายแบบจำลองและย้ายครั้งละ 1px

หากคุณกดปุ่ม Shift พร้อมกัน คุณจะเลื่อนครั้งละ 10px

- การปรับอย่างรวดเร็ว: - alt + 0: รีเซ็ต - alt + 1: ขนาดภาพต้นฉบับ - alt + 2: ขนาดดั้งเดิม *2 - alt + 3: ขนาดดั้งเดิม /2 - alt + 4: ความกว้างของหน้าต่าง - หากทางลัดไม่ทำงาน โปรดตรวจสอบว่าโฟกัสของหน้าปัจจุบันอยู่ภายในการควบคุมฟอร์มอื่นๆ หรือไม่ (เช่น input, textarea

.

.

)? วิธีที่ง่ายที่สุด คลิกที่จำลองหรือบนพื้นที่ว่างในหน้าและลองอีกครั้ง :)

ข้อมูลเพิ่มเติม:

- เสนอโดยพอล
- เรตติ้งเฉลี่ย : 4.5 ดาว (ชอบมาก)
- นักพัฒนา อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริ

ส่วนขยายเว็บ Visual Inspector (前端重构+视觉走查辅助工具) ที่รวมเข้ากับ OffiDocs Chromium ออนไลน์