15 บรรทัดคำสั่งแบบกราฟิก (GCLI) คำสั่งใน Firefox สำหรับนักพัฒนา Front-End

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

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

แถบเครื่องมือ

ของ Firefox GCLI เป็นที่รู้จักกันว่า แถบเครื่องมือผู้พัฒนา. มี สามวิธี เพื่อเปิด:

1. กดแป้นพิมพ์ลัด Shift + F2.
2. คลิก “เปิดเมนู” ไอคอน (แฮมเบอร์เกอร์) ที่ด้านขวาสุดของแถบที่อยู่ (จากปุ่ม Home) จากนั้นคลิกที่ ผู้พัฒนา> แถบเครื่องมือนักพัฒนา เมนูย่อย.
3. ในแถบเมนูด้านบนทำเครื่องหมายที่ เครื่องมือ> นักพัฒนาเว็บ> แถบเครื่องมือผู้พัฒนา ตัวเลือก.

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

ตอนนี้เรามาดูงานที่มีประโยชน์ที่คุณสามารถทำได้ใน Firefox ใช้ GCLI ของมัน.

1. ลบองค์ประกอบของหน้า

คำสั่ง: pagemod ลบองค์ประกอบ

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

คุณค่าของ จะต้องเป็น ตัวเลือก CSS ที่ถูกต้องบนหน้า. พูดในเพจที่คุณต้องการลบลิงก์ทั้งหมด (โดยเฉพาะ) ของคลาส .BTN, คำสั่งเขียนเป็น: pagemod ลบองค์ประกอบ a.btn.

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

2. องค์ประกอบการวัด

คำสั่ง: วัด

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

พิมพ์และป้อน วัด คำสั่งในบรรทัดคำสั่งและเคอร์เซอร์จะ เปลี่ยนเป็นครอสแฮร์. การวัดจะเป็น แสดงเป็นพิกเซล ถัดจากเคอร์เซอร์ crosshair และเป็นของ ความกว้างความสูงและความยาวแนวทแยง ของพื้นที่ที่เลือก เพื่อปิดการใช้งานเครื่องมือ, รันใหม่อีกครั้ง วัด คำสั่ง.

3. แก้ไขไฟล์อย่างรวดเร็ว

คำสั่ง: แก้ไข

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

4. ค้นหาคุณสมบัติ CSS ที่ไม่คุ้นเคย

คำสั่ง: mdn css

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

ป๊อปอัปจะปรากฏขึ้น กับ “คำนิยาม” สำหรับคุณสมบัติ CSS นั้น ด้านบนขวาของแถบเครื่องมือ คำจำกัดความคือ แยกจากหน้า Mozilla Developer Network (MDN) อย่างเป็นทางการ ของทรัพย์สินที่ได้รับ อภิธานศัพท์ของ MDN เกี่ยวกับคุณสมบัติ CSS, องค์ประกอบ HTML และ API เว็บมีการอ้างถึงอย่างมาก.

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

5. ปรับขนาดหน้า

คำสั่ง: ปรับขนาดเป็น

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

Firefox ยังมี แป้นพิมพ์ลัดเพื่อเปิดเครื่องมือนี้: Ctrl + Shift + M (Cmd + Alt + M สำหรับ Mac) แต่ถ้าคุณแล้ว รู้ขนาดที่แน่นอน ที่จะใช้สำหรับการปรับขนาดวิธีที่เร็วที่สุดคือการเรียกใช้ ปรับขนาด สั่งขนาดที่คุณต้องการ.

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

6. รีสตาร์ทเบราว์เซอร์

คำสั่ง: เริ่มต้นใหม่

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

7. เปิดโฟลเดอร์โปรไฟล์ Firefox ของคุณ

คำสั่ง: โฟลเดอร์ openprofile

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

วิธีอื่นในการเปิดโฟลเดอร์นี้คือคลิกปุ่มแสดงโฟลเดอร์บน เกี่ยวกับการสนับสนุน หน้า. โดยการรันคำสั่ง โฟลเดอร์ openprofile ใน Firefox Command Line คุณจะเห็นโฟลเดอร์โปรไฟล์ของคุณ เปิดในครั้งเดียว.

8. คัดลอกค่าสี

คำสั่ง: Eyedropper

นอกเหนือจากข้อเท็จจริงที่ว่ามันรองรับเฉพาะรูปแบบฐานสิบหก eyedropper เป็นเครื่องมือที่ยอดเยี่ยมสำหรับ คัดลอกค่าสี ของเฉดสีที่มองเห็นได้บนหน้าเว็บ ป้อนคำสั่ง Eyedropper ลงใน GCLI เพื่อสลับการทำงานของเครื่องมือ.

9. ทดสอบไลบรารีภายนอก

คำสั่ง: ฉีด

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

ในการดำเนินการคำสั่งทรัพยากรจะเป็น นำเข้าสู่หน้า โดยการใส่ > ติดแท็กใน ส่วนของเอกสาร HTML.

10. ถ่ายภาพหน้าจอ

คำสั่ง: ภาพหน้าจอ

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

ภาพหน้าจอจะถูกบันทึกใน ดาวน์โหลดโฟลเดอร์ ของเบราว์เซอร์ ในรูปแบบ PNG.

11. เปิดไม้บรรทัด

คำสั่ง: ผู้ปกครอง

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

12. เปิดคอนโซล & ดีบักเกอร์

คำสั่ง: เปิดคอนโซล และ dbg เปิด

หากคีย์บอร์ดสั้นลง การเปิดเว็บคอนโซลหรือเครื่องมือดีบั๊ก ทำให้จิตใจของคุณลื่นไหลไม่ต้องกังวลเพียงพิมพ์คำสั่งง่ายๆ เปิดคอนโซล หรือ dbg เปิด ลงใน Firefox Command Line เพื่อเปิดเครื่องมือที่เกี่ยวข้อง.

13. นับองค์ประกอบของหน้า

คำสั่ง: QSA

คำสั่งที่ดีนี้จาก GCLI จะทำการสำรวจสำมะโนประชากรอย่างรวดเร็วขององค์ประกอบในหน้าเว็บที่ ตรงกับตัวเลือก CSS ที่กำหนด. ตัวอย่างเช่นเพื่อให้ได้จำนวนทั้งหมด องค์ประกอบบนหน้าให้ใช้ qsa คำสั่ง.

14. เปิดหรือปิดการใช้งานแอดออน

คำสั่ง: รายการ addon

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

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

ในตัวอย่างด้านล่างคุณสามารถดู วิธีปิดการใช้งาน Pocket อย่างรวดเร็ว ใน Firefox.

15. จัดการการตั้งค่า

คำสั่ง: แสดงล่วงหน้า

มีตัน การตั้งค่าการปรับแต่ง ผู้ใช้สามารถเข้าถึงผ่านทาง Firefox เกี่ยวกับ config หน้า. การตั้งค่าเดียวกันสามารถดูและแก้ไขได้โดยใช้ GCLI เช่นกัน.

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

ในตัวอย่างด้านล่างคุณสามารถดูวิธีการ ตรวจสอบ URI ฉีด jQuery คำสั่งฉีดเข้าไปในหน้า (ดูส่วน # 9 ในบทความนี้):