วิธีการใช้เครื่องมือสำหรับนักพัฒนาเว็บของ Firefox เพื่อดูโครงสร้างเว็บไซต์ในแบบ 3 มิติ

Firefox 11 เพิ่มเครื่องมือสำหรับนักพัฒนาเว็บไซต์ใหม่สองรายการลงในคลังแสงที่น่าประทับใจของ Firefox คุณลักษณะการเอียงแสดงโครงสร้างเว็บไซต์ในแบบ 3 มิติในขณะที่ตัวแก้ไขสไตล์สามารถแก้ไข CSS สไตล์ได้ทันที.

คุณสมบัติ 3D หรือที่เรียกว่า Tilt เป็นวิธีการแสดงภาพ DOM ของเว็บไซต์ มันทำงานร่วมกับ Document Inspector ที่มีอยู่และใช้ WebGL เพื่อแสดงกราฟิก 3 มิติในเบราว์เซอร์ของคุณ.

Tilt - การสร้างภาพเว็บไซต์ 3D

คุณสามารถเข้าถึง Tilt จากภายในตัวตรวจสอบหน้าของ Firefox ในการเริ่มต้นให้เปิดตัวตรวจสอบหน้าโดยเลือก "ตรวจสอบ" จากเมนูนักพัฒนาเว็บ คุณสามารถคลิกขวาในหน้าปัจจุบันและเลือก "ตรวจสอบองค์ประกอบ" เพื่อเริ่มต้นการตรวจสอบที่องค์ประกอบที่เฉพาะเจาะจง.

คลิกปุ่ม“ 3D” บนแถบเครื่องมือตรวจสอบ.

คุณจะเห็นโครงสร้างของหน้าหลังจากเปิดใช้งานโหมด 3 มิติ แต่มันจะดูแบนจนกว่าคุณจะหมุน.

หมุนแบบจำลองด้วยการคลิกซ้ายเลื่อนภาพไปรอบ ๆ ด้วยการคลิกขวาและซูมเข้าและออกโดยใช้ล้อเลื่อนของเมาส์.

มุมมองนี้ถูกรวมเข้ากับเครื่องมืออื่น ๆ ในตัวตรวจสอบ หากคุณเปิด HTML หรือสไตล์พาเนลคุณสามารถคลิกองค์ประกอบบนหน้า hte เพื่อดูรหัส HTML หรือคุณสมบัติ CSS ขององค์ประกอบนั้น.

คุณสมบัติ 3D เพิ่มเติม

คุณลักษณะการสร้างภาพ 3D นั้นใช้พื้นฐานของส่วนขยาย Tilt แต่ไม่มีคุณลักษณะทั้งหมดของส่วนขยาย Tilt หากคุณต้องการปรับแต่งสีหรือส่งออกการสร้างภาพเป็นไฟล์โมเดล 3 มิติสำหรับใช้กับโปรแกรมแก้ไข 3D คุณจะต้องติดตั้งโปรแกรมเสริม Tilt 3D เมื่อคุณมีแล้วคุณจะได้รับตัวเลือก“ Tilt” ใหม่ในเมนู Web Developer.

คลิกปุ่มยกเลิกเพื่อใช้ Tilt เวอร์ชันเก่าเมื่อได้รับแจ้ง.

คุณจะพบตัวควบคุมในการปรับแต่งการสร้างภาพทางด้านซ้ายของหน้าต่างและตัวเลือกอื่น ๆ รวมถึงคุณสมบัติการส่งออกที่ด้านบนของหน้า.

CSS Style Editor

หากต้องการดูและแก้ไขสไตล์ชีต CSS ของเพจให้เปิดตัวแก้ไขสไตล์จากเมนูนักพัฒนาเว็บ.

ตัวแก้ไขสไตล์แสดงรายการสไตล์ชีตในหน้าปัจจุบัน สลับเปิดหรือปิดสไตล์ชีทโดยคลิกที่ไอคอนรูปตาทางด้านซ้ายของชื่อสไตล์ชีท แก้ไขสไตล์ชีทโดยเลือกและแก้ไขโค้ด.

การเปลี่ยนแปลงจะปรากฏบนหน้าทันที หากคุณสลับสไตล์ชีทออกเพจจะสูญเสียข้อมูลสไตล์ของมัน หากคุณแก้ไขสไตล์ชีทคุณจะเห็นการแก้ไขปรากฏขึ้นบนหน้าขณะที่คุณพิมพ์.

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

คุณสมบัติการสร้างภาพ 3 มิติคอยดูการเปลี่ยนแปลงในหน้าปัจจุบันและการแจ้งเตือนเมื่อมีการเปลี่ยนแปลงเกิดขึ้น เมื่อคุณใช้ Style Editor พร้อมกับตัวตรวจสอบ 3 มิติเปิดการเปลี่ยนแปลงของคุณจะปรากฏทันทีในมุมมอง 3 มิติ สิ่งนี้ยังทำงานกับส่วนขยายของบุคคลที่สามที่ปรับเปลี่ยนหน้าเว็บเช่น Firebug.