สร้างโปรไฟล์การพัฒนาเว็บ Firefox ขั้นสูง

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

สร้างโปรไฟล์แยกต่างหากสำหรับการพัฒนาเว็บ

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

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

firefox.exe -P WebDev -no-remote

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

ต้องมี Web Dev Extensions

นี่คือส่วนขยายทั้งหมดที่ฉันใช้เป็นประจำเพื่อการพัฒนาเว็บ.

Firebug

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

ส่วนขยายนักพัฒนาเว็บ

หนึ่งในส่วนขยายที่ดีที่สุดสำหรับการทำงาน x ปี นี่เป็นสิ่งที่ต้องมีสำหรับนักพัฒนาซอฟต์แวร์ แต่คุณเคยได้ยินมาบ้าง.

ส่วนขยาย Aardvark

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

ColorZilla

เลือกสีได้อย่างง่ายดาย ไม่มีความเจ็บปวดจากการค้นหาสีที่ฝังอยู่ที่ไหนสักแห่งในสไตล์ชีท.

ดูแหล่งที่มาด้วย

คุณสามารถตั้งค่าโปรไฟล์แหล่งที่มาของมุมมองหลายรายการเพื่อเปิดแหล่งที่มาในแอปพลิเคชันต่างๆ.

เครื่องมือตรวจสอบ HTML

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

ลิงเกรส

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

วัดมัน

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

ดู IE / แท็บ IE / OperaView / FirefoxView / มุมมอง Safari / IE View Lite

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

ล้างปุ่มแคช

ล้างแคช มีประโยชน์อย่างยิ่งสำหรับการตรวจสอบการเปลี่ยนแปลง CSS ใหม่.

รีสตาร์ท Firefox

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

Tab Mix Plus

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

YSlow

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

หุ่นจำลอง Lorem Ipsum

ส่วนขยายตัวสร้าง Dummy Lipsum จะสร้างเนื้อหาจำลองให้คุณตามข้อความ Lorem Ipsum ที่มีชื่อเสียงซึ่งมีประโยชน์มากสำหรับการวางเนื้อหาปลอมในเว็บไซต์ของคุณ.

Screengrab!

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

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

ณ จุดนี้คุณได้เปลี่ยน Firefox เป็นเครื่องมือพัฒนาเว็บขั้นสุดยอดแล้ว ใช้เวลาในการเรียนรู้วิธีใช้ Firebug โดยเฉพาะ.