15 Perintah Perintah Grafis (GCLI) di Firefox untuk Pengembang Front-End

Tidak peduli berapa banyak tombol dan menu mewah yang kami punya, selalu ada programmer yang menghargai akses baris perintah di lingkungan kerja mereka, terutama ketika itu menghilangkan perburuan untuk tombol atau menu kanan yang menampilkan pengaturan yang diperlukan sesuai dengan pandangan kami.

Firefox telah memiliki Interpreter Baris Perintah Grafis, atau singkatnya a GCLI untuk sementara waktu sekarang, dan telah memperluas perintahnya dari waktu ke waktu. Perintah-perintah GCLI memberi para pengembang sebuah akses cepat ke alat pengembangan dan konfigurasi. Ini juga memiliki fitur pelengkapan otomatis; jika Anda menekan Tab saat mengetik perintah apa pun, perintah yang disarankan oleh GCLI akan dimasukkan.

Bilah Alat

Firefox GCLI juga dikenal sebagai Bilah Alat Pengembang. Ada tiga jalan untuk membukanya:

1. Tekan pintasan keyboard Shift + F2.
2. Klik tautan “Buka Menu” Ikon (hamburger) di sisi paling kanan bilah alamat (kanan ke tombol Beranda), lalu klik Pengembang> Bilah Alat Pengembang submenu.
3. Di bilah menu atas, centang Alat> Pengembang Web> Toolbar Pengembang pilihan.

Setelah Bilah Alat Pengembang terbuka, Anda dapat melihatnya di bagian bawah jendela browser. Jika Anda memutuskan untuk bekerja dengan GCLI, Saya menyarankan untuk membiarkannya terbuka sepanjang waktu saat bekerja.

Sekarang mari kita lihat beberapa tugas berguna yang dapat Anda lakukan di Firefox menggunakan GCLI-nya.

1. Hapus elemen halaman

Perintah: pagemod menghapus elemen

Ketika Anda perlu melihat lagi tata letak halaman web dengan beberapa elemen dihapus, cukup ketik perintah pagemod menghapus elemen ke dalam Command Line Firefox untuk menghapus elemen-elemen dari halaman.

Nilai dari harus menjadi pemilih CSS yang valid pada halaman. Katakan, di halaman Anda ingin menghapus semua tautan (khusus) kelas .btn, perintah ini ditulis sebagai: pagemod menghapus elemen a.btn.

Secara umum, perintah pagemod digunakan untuk memodifikasi halaman, dengan menghapus atau mengganti elemen atau atribut yang dipilih.

2. Mengukur elemen

Perintah: mengukur

Jika Anda menghendaki tahu pengukurannya dari setiap modul visual pada halaman web, ada alat untuk itu. Itu “mengukur” alat ini dapat diakses baik melalui perangkat pengembang web biasa dan GCLI.

Ketik dan masukkan mengukur perintah ke dalam baris perintah, dan kursor akan berubah menjadi crosshair. Pengukurannya akan ditampilkan dalam piksel di sebelah kursor crosshair, dan dari lebar, tinggi dan panjang diagonal dari area yang dipilih. Untuk menonaktifkan alat, jalankan kembali mengukur perintah.

3. Edit file dengan cepat

Perintah: sunting

Mulai mengedit sumber daya halaman Anda dengan sunting perintah. Saat mengetik perintah, Anda akan melihat URI dari semua sumber daya yang tersedia dari halaman itu, yang dapat Anda telusuri menggunakan tombol panah atas dan bawah. Setelah Anda memilih sumber daya yang ingin Anda edit, tekan Tab untuk melengkapi saran secara otomatis, dan tekan Enter, dan alat editor browser akan terbuka dengan file yang dipilih.

4. Cari properti CSS yang tidak dikenal

Perintah: mdn css

Yang ini adalah perintah yang cukup keren - itu semacam a kamus popup untuk properti CSS. Jika Anda menemukan properti CSS yang tidak dikenal, dan ingin memeriksa kepanjangan dari apa, jalankan perintah mdn css dalam GCLI dengan diganti dengan nama sebenarnya dari properti yang tidak dikenal itu.

Munculan akan muncul dengan “definisi” untuk properti CSS itu tepat di atas bilah alat. Definisi tersebut adalah ekstrak dari halaman resmi Jaringan Pengembang Mozilla (MDN) dari properti yang diberikan. Glosari properti CSS, elemen HTML, dan API web MDN banyak dikutip.

Jika teks yang ditampilkan di popup tidak cukup, dan Anda ingin tahu lebih banyak, Anda dapat mengklik tautannya Kunjungi Halaman MDN di dalam popup, dan halaman MDN masing-masing untuk properti itu akan dibuka. Saat ini, perintah ini hanya tersedia untuk properti CSS.

5. Ubah ukuran halaman

Perintah: ubah ukuran menjadi

Alat pengukur ukuran memungkinkan Anda melihat bagaimana tampilan halaman Anda diubah ukurannya ke dimensi tertentu, yang dapat berguna saat Anda ingin melihat tampilan halaman Anda di perangkat dengan dimensi yang berbeda dari yang Anda gunakan.

Firefox juga memiliki pintasan keyboard untuk membuka alat ini: Ctrl + Shift + M (Cmd + Alt + M untuk Mac). Tetapi jika Anda sudah melakukannya tahu dimensi yang tepat digunakan untuk mengubah ukuran, cara tercepat adalah menjalankan mengubah ukuran perintah dengan dimensi yang Anda butuhkan.

Dimensi adalah ditafsirkan dalam piksel. Setelah perintah dijalankan, Anda akan melihat halaman yang diubah ukurannya.

6. Mulai ulang browser

Perintah: mengulang kembali

Perintah ini jelas. Untuk me-restart Firefox, cukup ketik mengulang kembali ke dalam baris perintah, dan tekan Enter-bisa berguna ketika Anda menginstal add-on atau plugins yang membutuhkan restart.

7. Buka folder profil Firefox Anda

Perintah: folder openprofile

Setiap pengguna Firefox mendapatkan folder profil lokal sendiri bahwa menyimpan file khusus pengguna, seperti penanda dan / chrome map. Saat Anda mempersonalisasi Firefox, Anda mungkin perlu melihat dan mengubah konten folder ini.

Cara alternatif untuk membuka folder ini adalah dengan mengklik tombol Tampilkan Folder di tentang: dukungan halaman. Dengan menjalankan perintah folder openprofile di Baris Perintah Firefox, Anda akan melihat folder profil Anda buka sekaligus.

8. Salin nilai warna

Perintah: penitis mata

Selain fakta bahwa ia hanya mendukung format hex, eyedropper adalah alat yang brilian untuk menyalin nilai warna dari rona yang terlihat pada halaman web. Masukkan perintah penitis mata ke dalam GCLI untuk mengaktifkan operasional alat.

9. Tes perpustakaan eksternal

Perintah: menyuntikkan

Jika Anda menghendaki menguji beberapa perpustakaan eksternal di halaman web Anda, alih-alih masuk ke kode sumber untuk membuat penambahan sementara, cukup gunakan menyuntikkan perintah untuk masukkan perpustakaan. Misalnya, untuk memasukkan tipe jQuery saja menyuntikkan jQuery.

Pada mengeksekusi perintah, sumber daya akan diimpor ke halaman dengan memasukkan a > tag ke dalam bagian dari dokumen HTML.

10. Ambil tangkapan layar

Perintah: tangkapan layar

Itu alat pengambilan tangkapan layar bawaan di Firefox cukup kuat. Misalnya, Anda dapat menargetkan elemen individual menggunakan penyeleksi CSS, menggunakan timer, menerapkan a dpr. Anda bahkan dapat mengambil tangkapan layar hanya bagian krom dari browser (area di sekitar konten pengguna) dengan menggunakan tangkapan layar --chrome perintah.

Tangkapan layar disimpan di Unduh folder browser dalam format PNG.

11. Buka penguasa

Perintah: penguasa

Namun alat keren lain dari Firefox yang mudah diakses melalui GCLI. Itu penguasa perintah menampilkan penggaris horizontal dan vertikal di sekitar halaman. Ukuran para penguasa adalah dalam piksel. Jalankan perintah yang sama untuk menonaktifkan penggaris.

12. Buka konsol & debugger

Perintah: konsol terbuka dan dbg terbuka

Jika keyboard kekurangan untuk membuka konsol web atau alat debugger telah menyelinap pikiran Anda, jangan khawatir, cukup ketik perintah sederhana konsol terbuka atau dbg terbuka ke dalam Command Line Firefox untuk membuka alat masing-masing.

13. Hitung elemen halaman

Perintah: qsa

Perintah bagus dari GCLI ini mengambil sensus cepat elemen di halaman web itu cocok dengan pemilih CSS yang diberikan. Misalnya, untuk mendapatkan hitungan semua elemen pada halaman, gunakan qsa a perintah.

14. Mengaktifkan atau menonaktifkan add-on

Perintah: daftar addon

Jika Anda perlu mensurvei dan mengelola add-on Firefox Anda, saya sarankan Anda melakukannya gunakan perintah GCLI daripada menu Add-ons karena versi GCLI mencantumkan semua add-on dan plugin, termasuk yang sudah diinstal, yang mungkin tidak tercantum dalam menu Add-ons.

Anda dapat beralih status add-on di GCLI dengan perintah tambahan diikuti oleh sub-perintah yang relevan, baik memungkinkan atau nonaktifkan.

Pada demo di bawah ini Anda dapat melihat cara cepat menonaktifkan Pocket di Firefox.

15. Kelola pengaturan

Perintah: pertunjukan awal

Ada banyak pengaturan kustomisasi pengguna dapat mengakses melalui Firefox tentang: konfigurasi halaman. Pengaturan yang sama dapat dilihat dan dimodifikasi menggunakan GCLI juga.

Menggunakan GCLI untuk mengakses pengaturan kustomisasi adalah opsi yang lebih cepat jika Anda sudah tahu konfigurasi mana yang ingin Anda lihat atau ubah. Untuk atur nilai untuk pengaturan, menggunakan set awal perintah, dan untuk atur ulang pengaturan, mengetik mengatur ulang sebelumnya .

Pada demo di bawah ini Anda dapat melihat caranya periksa URI itu menyuntikkan jQuery perintah telah disuntikkan ke halaman (lihat bagian # 9 dalam artikel ini):