ดูเครื่องมือ Firefox ที่จำเป็นสำหรับนักพัฒนาเว็บ

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

ก่อนอื่นเราต้องทำการติดตั้ง Firebug.

Firebug

Firebug เป็นโปรแกรมเสริมที่ต้องติดตั้งสำหรับการพัฒนาเว็บ สมมติว่าคุณไม่รู้ว่าจะรับ Firebug ได้ที่ไหนคุณสามารถติดตั้งได้ที่นี่ อาจเป็นไปได้ว่าคุณต้องรีสตาร์ท Firefox ก่อนที่จะเปิดใช้งาน.

หลังจากนั้นคุณสามารถดู Firebug ผ่านหนึ่งในวิธีต่อไปนี้: ทำตามเมนูนี้ เครื่องมือ> นักพัฒนาเว็บ> Firebug, คลิกขวาที่หน้าเว็บและเลือก “ตรวจสอบองค์ประกอบด้วย Firebug”.

หรือคุณสามารถหาไอคอน Firebug ใน Firefox และคลิกที่ไอคอนนี้จะแสดงหน้าต่าง firebug

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

การปรับขนาดกล่อง

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

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

รูปแบบที่คำนวณ

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

การตรวจสอบตระกูลตัวอักษร (วิธีที่ง่าย)

คุณมักจะพบสิ่งนี้ใน font-family คุณสมบัติใน CSS ที่มีตระกูลแบบอักษรต่างๆ น่าเสียดายที่สิ่งนี้ไม่ได้บอกเราว่าแบบอักษรใดที่เบราว์เซอร์ใช้ เพื่อให้การระบุง่ายขึ้นเราสามารถติดตั้งส่วนขยาย Firebug นี้ FireFontFamily.

หลังจากติดตั้งเสร็จแล้วให้โหลดหน้าเว็บของคุณและตอนนี้เราสามารถเห็นได้อย่างชัดเจนว่าใช้ตระกูลแบบอักษรใด ในกรณีของเรามันเป็นความจริง Helvetica Neue (ดูช็อต).

การวิเคราะห์ประสิทธิภาพ

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

แผงสุทธิ

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

จากนั้นคุณสามารถเรียงลำดับคำขอ HTTP ตามประเภทของพวกเขาเช่น HTML, CSS และรูปภาพ.

Yslow!

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

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

ความเร็วหน้า

นอกจากนี้คุณยังสามารถติดตั้ง Page Speed ​​ได้จาก Google คล้ายกับ Yslow!, มันทดสอบประสิทธิภาพความเร็วเว็บไซต์แม้ว่าผลการทดสอบอาจแตกต่างกันเล็กน้อย ตัวอย่างนี้แสดงให้เห็นว่าหน้าเว็บเดียวกัน คะแนน 82 ตาม Page Speed.

เครื่องมือสำหรับนักพัฒนาเว็บ

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

การตรวจสอบภาพ

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

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

และตัวอย่างนี้แสดงวิธีที่เราแสดงขนาดภาพและขนาดไฟล์ภาพพร้อมกัน:

เครื่องมือในตัว Firefox

ในเวอร์ชันล่าสุด Firefox ได้ปรับปรุงฟีเจอร์ที่มีอยู่ในตัวสำหรับนักพัฒนาเว็บบางส่วน ได้แก่ :

องค์ประกอบการตรวจสอบพื้นเมือง

คนพื้นเมืองนี้ ตรวจสอบองค์ประกอบ จาก Firefox อาจมีลักษณะคล้ายกับ “ตรวจสอบองค์ประกอบใน Firebug”, แต่มันทำหน้าที่ในรูปแบบที่แตกต่างกัน.

เวลานี้ฉันจะไม่ผ่านคุณสมบัตินี้ต่อไปเนื่องจากเป็นหลักเหมือนกับแผง Firebug HTML และ CSS แม้ว่าจะมีความแตกต่างในรูปแบบและการออกแบบ แต่มีคุณสมบัติที่โดดเด่นอย่างหนึ่งที่ควรค่าแก่การลองคือ มุมมอง 3 มิติ.

การใช้ มุมมอง 3 มิติ คุณสามารถดูโครงสร้างเว็บเพจได้ในเชิงลึก ในการเปิดใช้งานมุมมองนี้คุณสามารถค้นหาปุ่มที่ด้านล่างขวาของ “องค์ประกอบการตรวจสอบดั้งเดิมของ Firefox”. นี่คือวิธีที่ มุมมอง 3 มิติ ดูเหมือนกับ.

ฉันไม่ได้ใช้มันบ่อยเท่าที่คุณสมบัติอื่น ๆ แต่มันเป็นคุณสมบัติที่เป็นนวัตกรรมใหม่จาก Mozilla ฉันยอมรับและมีประโยชน์มากในบางสถานการณ์.

มุมมองออกแบบเว็บไซต์

ตั้งแต่ความนิยมที่เพิ่มขึ้นใน Responsive Web Design Firefox ได้เริ่มต้น Bookmarklet ที่ตอบสนองต่อเบราว์เซอร์ เครื่องมือนี้จะช่วยให้เราสามารถทดสอบเว็บไซต์ตอบสนองของเราในวิวพอร์ตต่าง ๆ โดยไม่ต้องปรับขนาดหน้าต่างเบราว์เซอร์.

มุมมองนี้สามารถใช้ได้จากเมนูนี้: เครื่องมือ> นักพัฒนาเว็บ> มุมมองออกแบบเว็บ. และนี่เป็นลักษณะของมุมมอง.

แก้ไขสไตล์

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

ฟีเจอร์นี้เจ๋งพอ ๆ มุมมองออกแบบเว็บไซต์, มันช่วยให้คุณแก้ไข CSS ดูผลกระทบทันทีบนเบราว์เซอร์และบันทึกการเปลี่ยนแปลงที่มีผลโดยตรงกับไฟล์ต้นฉบับ CSS.

ตัวแก้ไขสไตล์พร้อมใช้งานจากเมนูต่อไปนี้: เครื่องมือ> นักพัฒนาเว็บ> เครื่องมือแก้ไขสไตล์.

ความคิดสุดท้าย

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

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