Firefox Developer Edition 6 สุดยอดเครื่องมือที่น่าลอง

Firefox Developer Edition เป็นเบราว์เซอร์เดียวในปัจจุบันที่สร้างขึ้นเพื่อนักพัฒนาโดยเฉพาะ เครื่องมือของนักพัฒนาซอฟต์แวร์ในรุ่นมาตรฐานจะปรากฏขึ้นเป็นครั้งแรกในรุ่นของนักพัฒนาซอฟต์แวร์และมีเครื่องมือในรุ่นสำหรับนักพัฒนาที่ไม่ได้และจะไม่สามารถใช้ได้ในรุ่นมาตรฐาน วันนี้เราจะมาดูเครื่องมือบางอย่างที่ตอนนี้ สามารถพบได้ในรุ่นสำหรับนักพัฒนาเท่านั้น.

หากคุณเป็นคนที่ไม่เคยใช้หรือไม่คุ้นเคยกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แม้แต่ในรุ่นมาตรฐานลองดู "DevTools Challenger" สุดเจ๋งของ Mozilla ก่อน ที่นี่คุณสามารถฝึกฝนด้วยเครื่องมือบางอย่างที่กล่าวถึงด้านล่างในเบราว์เซอร์ Firefox Developer Edition ตัวอย่างคือความสนุกและง่ายต่อการปฏิบัติตามคำแนะนำที่ตรงไปตรงมาและหากคุณไม่สามารถติดตามได้ให้ทำตามวิดีโอสอนแทน.

1. เครื่องมือตรวจสอบภาพเคลื่อนไหว

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

ในการเข้าถึงเครื่องมือให้เปิด ผู้ตรวจการ เครื่องมือโดยคลิกขวาที่องค์ประกอบภาพเคลื่อนไหวและเลือก "ตรวจสอบองค์ประกอบ" จากนั้นที่ด้านขวาของหน้าต่างเครื่องมือ dev คลิก "ภาพเคลื่อนไหว".

2. ตัวแก้ไขฟังก์ชันกำหนดเวลาภาพเคลื่อนไหว

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

หากคุณยังไม่คุ้นเคยกับฟังก์ชั่นภาพเคลื่อนไหว Bezier ลูกบาศก์ฉันแนะนำโพสต์นี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับมัน.

3. Color Picker สำหรับคุณสมบัติ CSS

มีตัวเลือกสีที่มีอยู่ใน Firefox รุ่นมาตรฐาน (อ่านเพิ่มเติมเกี่ยวกับมันในโพสต์นี้) ซึ่งเลือกสีจากหน้าและคัดลอกไปยังคลิปบอร์ด ตัวเลือกสีที่ฉันพูดถึงตอนนี้คือ เฉพาะสำหรับค่าสี CSS ของคุณสมบัติ.

ข้างทุกค่าสี CSS ใน กฎระเบียบ ส่วนของ ผู้ตรวจการ เครื่องมือมีไอคอนที่จะเปิดวงล้อสีขึ้นมาเมื่อคลิก คุณสามารถเลือกสีที่คุณต้องการจากวงล้อ.

หากคุณมีสีที่คุณต้องการอยู่แล้วและสีที่ปรากฏบนหน้าเว็บให้คลิกเครื่องมือ eyedropper ที่ด้านล่างของป๊อปอัปเพื่อเปิดตัวเลือกสีจากนั้นลากตัวเลือกไปยังสีที่คุณต้องการและคลิกที่สี . ค่าสี CSS จะเปลี่ยนเป็นสีที่เลือก.

4. เครื่องมือวัด

เครื่องมือนี้ช่วยให้คุณเห็นตำแหน่ง XY ของเคอร์เซอร์และความสูงความกว้างและการวัดเส้นทแยงมุมเป็นพิกเซลของส่วนที่เลือก ในการใช้เครื่องมือคุณจะต้องเปิดใช้งานเครื่องมือก่อนในนักพัฒนาซอฟต์แวร์ ตัวเลือกกล่องเครื่องมือ, โดยทำเครื่องหมายที่ช่องทำเครื่องหมายชื่อ "วัดส่วนหนึ่งของหน้า" ใต้ "ปุ่มกล่องเครื่องมือที่ใช้ได้".

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

5. แก้ไขตัวกรอง CSS

หากคุณใช้ตัวกรอง CSS กับองค์ประกอบในหน้าคุณจะเห็นไอคอนข้างใน กฎระเบียบ ส่วนของ ผู้ตรวจการ เครื่องมือซึ่งเปิดตัวแก้ไขตัวกรอง CSS เมื่อคลิก.

หากต้องการลบตัวกรองให้คลิกเครื่องหมาย×ที่ด้านขวาสุดของชื่อตัวกรอง หากต้องการเพิ่มตัวกรองให้คลิกกล่องตัวกรองที่ด้านล่างและเลือกตัวกรองที่คุณต้องการเพิ่มแล้วคลิก + สัญญาณ นอกจากนี้คุณยังสามารถจัดเรียงตัวกรองใหม่ในลำดับใดก็ได้โดยลากแต่ละรายการ.

6. เครื่องมือหน่วยความจำ

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

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

ในการใช้เครื่องมือให้คลิกที่ "ถ่ายภาพ" หรือปุ่มกล้อง คุณจะเห็นรายการสิ่งของเช่นวัตถุและสคริปต์ที่ใช้หน่วยความจำ .