Layout Debuggerคืออะไร?

Layout Debugger เป็นส่วนขยายของ Chrome ที่พัฒนาโดย cdsnowden และคุณลักษณะหลักของมันคือ "Chrome extension for highlighting DOM elements to better debug layout issues"

ภาพหน้าจอของส่วนขยาย

ดาวน์โหลดไฟล์ CRX ของส่วนขยาย Layout Debugger

ดาวน์โหลดไฟล์ส่วนขยาย Layout Debugger ในรูปแบบ crx และติดตั้งส่วนขยาย Chrome ด้วยตนเองในเบราว์เซอร์หรือแชร์ไฟล์ crx กับเพื่อนๆ เพื่อติดตั้งส่วนขยาย Chrome อย่างง่ายดาย

คำแนะนำในการใช้ส่วนขยาย

- Identifying too-wide overflowing objects.
- Distinguishing block from inline elements.
- Helping to keep track of element alignment.

Adds a distinct colour outline to each visible DOM element, as well as providing a visual prompt for overflowing divs.

display: block; => blue;
display: inline; => purple;
overflowing the viewport => red!
etc..

ข้อมูลพื้นฐานของส่วนขยาย

ชื่อ	Layout Debugger
ID	gkamnoiedmidgolhlihkamjpfccohilb
URL อย่างเป็นทางการ	https://chromewebstore.google.com/detail/layout-debugger/gkamnoiedmidgolhlihkamjpfccohilb
คำอธิบาย	Chrome extension for highlighting DOM elements to better debug layout issues
ขนาดไฟล์	251 KB
จำนวนการติดตั้ง	897
เวอร์ชันปัจจุบัน	1.7
อัปเดตครั้งล่าสุด	2022-04-19
วันที่เผยแพร่	2017-07-31
คะแนน	4.00/5 รวมทั้งหมด 3 คะแนน
ผู้พัฒนา	cdsnowden
อีเมล	[email protected]
ประเภทการชำระเงิน	free
เว็บไซต์ส่วนขยาย	https://github.com/Recidvst/Layout-Debugger
URL หน้าช่วยเหลือ	https://github.com/Recidvst/Layout-Debugger#support
ภาษาที่รองรับ	en-GB
manifest.json
{ "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx", "manifest_version": 2, "name": "Layout Debugger", "short_name": "Layout Debugger", "description": "Chrome extension for highlighting DOM elements to better debug layout issues", "version": "1.7", "author": "Chris Snowden", "icons": { "19": "images\/icon19dark.png", "38": "images\/icon38dark.png", "128": "images\/icon128dark.png" }, "browser_action": { "default_icon": { "19": "images\/icon19dark.png", "38": "images\/icon38dark.png" }, "default_title": "Toggle highlighter" }, "background": { "scripts": [ "background.js" ], "persistent": false }, "content_scripts": [ { "matches": [ "" ], "js": [ "highlight.js" ] } ], "permissions": [ "activeTab" ], "web_accessible_resources": [ "*.png", "highlight.js" ] }