10 เครื่องมือนักพัฒนา Firefox ที่มีประโยชน์ที่คุณควรรู้

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

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

1. ดูไม้บรรทัดแนวนอนและแนวตั้ง

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

ในการเข้าถึงไม้บรรทัดผ่านเมนูให้ไปที่: ☰> ผู้พัฒนา > แถบเครื่องมือผู้พัฒนา (ทางลัด: Shift + F2) เมื่อแถบเครื่องมือปรากฏที่ด้านล่างของหน้าให้พิมพ์ ผู้ปกครอง และกด เข้าสู่.

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

2. ถ่ายภาพหน้าจอโดยใช้ตัวเลือก CSS

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

ในการถ่ายภาพหน้าจอผ่านเมนูไปที่☰> ผู้พัฒนา > แถบเครื่องมือผู้พัฒนา (ทางลัด SHIFT + F2) เมื่อแถบเครื่องมือปรากฏที่ด้านล่างของหน้าให้พิมพ์ สกรีนช็อต - ตัวเลือก any_unique_css_selector และกด เข้าสู่.

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

3. เลือกสีจากหน้าเว็บ

Firefox มีเครื่องมือเลือกสีในตัวโดยใช้ชื่อว่า "Eyedropper" ในการเข้าถึงเครื่องมือ "Eyedropper" ผ่านเมนูไปที่☰> ผู้พัฒนา > Eyedropper.

ในการทำให้สิ่งนี้ปรากฏบนหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ให้คลิก "ตัวเลือกกล่องเครื่องมือ" และใต้ "การตรวจสอบปุ่มเครื่องมือกล่องเครื่องมือ"หยิบสีจากหน้า"ช่องทำเครื่องหมาย.

4. ดูเค้าโครงหน้าในแบบ 3 มิติ

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

ในการทำให้สิ่งนี้ปรากฏบนหน้าต่างเครื่องมือสำหรับนักพัฒนาให้คลิก "ตัวเลือกกล่องเครื่องมือ" และใต้ส่วน "ปุ่มกล่องเครื่องมือที่ใช้ได้" ให้ตรวจสอบที่ "มุมมอง 3 มิติ"ช่องทำเครื่องหมาย.

5. ดูสไตล์ของเบราว์เซอร์

ลักษณะของเบราว์เซอร์ประกอบด้วยสองประเภท: สไตล์เริ่มต้นที่เบราว์เซอร์กำหนดให้กับทุกองค์ประกอบและสไตล์เฉพาะเบราว์เซอร์ (ประเภทที่มีคำนำหน้าเบราว์เซอร์) ด้วยการดูสไตล์ของเบราว์เซอร์ที่คุณสามารถทำได้ วิเคราะห์ปัญหาการแทนที่ในสไตล์ชีทของคุณ และรู้ถึงสไตล์เฉพาะของเบราว์เซอร์ที่มีอยู่ .

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

คุณยังสามารถเปิด "ผู้ตรวจการแท็บ "ผ่านทางลัด Ctrl + Shift + C จากนั้นเข้าถึง" เบราว์เซอร์สไตล์ ".

6. ปิดการใช้งาน JavaScript สำหรับเซสชันปัจจุบัน

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

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

7. ซ่อนสไตล์ CSS จากหน้า

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

หากต้องการลบสไตล์ CSS (อินไลน์ภายในหรือภายนอก) ที่ใช้กับหน้าเว็บ คลิกที่สัญลักษณ์รูปตาของสไตล์ชีทที่แสดง ในแท็บ "เครื่องมือแก้ไขสไตล์" คลิกอีกครั้งเพื่อเปลี่ยนกลับเป็นมุมมองดั้งเดิม.

วิธีเข้าถึง "แก้ไขสไตล์" ผ่านเมนูไปที่ to> ผู้พัฒนา > แก้ไขสไตล์ (ทางลัด: Shift + F7.

8. ดูตัวอย่างการตอบกลับเนื้อหา HTML ในคำขอ

เครื่องมือสำหรับนักพัฒนา Firefox มีตัวเลือกให้ ดูตัวอย่างการตอบกลับประเภทเนื้อหา HTML. ซึ่งช่วยให้นักพัฒนาสามารถดูตัวอย่างการเปลี่ยนเส้นทาง 302 และตรวจสอบว่ามีการแสดงข้อมูลที่ละเอียดอ่อนหรือไม่ในการตอบกลับ.

ในการเข้าถึง "ดูตัวอย่าง" ผ่านเมนูไปที่☰> ผู้พัฒนา > เครือข่าย (ทางลัด: Ctrl + Shift + Q. จากนั้นเปิดหน้าเว็บที่คุณเลือกหรือโหลดหน้าปัจจุบันใหม่คลิกที่ คำขอที่ต้องการ (พร้อมการตอบกลับ HTML) จากรายการคำขอและคลิกที่ "ดูตัวอย่างแท็บ "ในส่วนด้านขวา.

9. ดูตัวอย่างหน้าเว็บในขนาดหน้าจอที่แตกต่างกัน

ในการทดสอบหน้าเว็บสำหรับการตอบสนองให้ใช้ "มุมมองการออกแบบที่ตอบสนอง" ซึ่งสามารถเข้าถึงได้โดย☰> ผู้พัฒนา > มุมมองออกแบบที่ตอบสนอง หรือด้วยทางลัด: Ctrl + Shift + M.

ในการทำให้ปุ่มเครื่องมือ "โหมดการตอบสนองการออกแบบ" ปรากฏขึ้นให้คลิก "ตัวเลือกกล่องเครื่องมือ" และใต้ส่วน "ปุ่มกล่องเครื่องมือที่ใช้ได้" ให้เลือกช่องทำเครื่องหมาย "โหมดการตอบสนองการออกแบบ".

10. เรียกใช้ JavaScript บนหน้า

สำหรับการเรียกใช้ JavaScript อย่างรวดเร็วบนหน้าเว็บใด ๆ เพียงใช้เครื่องมือ "Scratchpad" ของ Firefox ในการเข้าถึง "Scratchpad" ผ่านเมนูไปที่; ☰> ผู้พัฒนา > Scratchpad หรือใช้แป้นพิมพ์ลัด Shift + F4.

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