A Look Into Tools Firefox Essential Untuk Pemaju Web
Firefox telah lama menjadi penyemak imbas pilihan untuk pembangunan web. Terdapat beberapa tambahan berguna untuk melakukan kerja. Dalam catatan ini, kita akan melihat beberapa tambahan yang saya fikir penting untuk dipasang jika anda akan melakukan pembangunan web. Juga kami akan membongkar beberapa ciri dalam add-on ini yang boleh membantu.
Pertama sekali, kita perlu memasang Firebug.
Firebug
Firebug adalah tambahan mesti dipasang untuk pembangunan web. Dengan mengandaikan bahawa anda tidak tahu di mana untuk mendapatkan Firebug, anda boleh memasangnya di sini. Mungkin, anda perlu memulakan semula Firefox anda sebelum diaktifkan.
Selepas itu, anda boleh melihat Firebug melalui salah satu cara berikut: ikuti menu ini Alat> Pembangun Web> Firebug, klik kanan pada laman web dan pilih “Periksa Elemen dengan Firebug”.
Sebagai alternatif, anda boleh mencari ikon Firebug di Firefox dan klik padanya, ini akan menunjukkan tetingkap pembakar;
Firebug agak sama dengan Alat Pembangun Chrome. ia mempunyai panel untuk melihat struktur HTML dan gaya, dan juga panel Konsol untuk melihat kesilapan, amaran dan log. Tetapi, saya mempunyai beberapa petua lagi yang semoga anda dapat mencari berguna.
Laraskan Pengaturan Kotak
Elemen HTML dibuat dengan model kotak CSS yang terdiri daripada margin, padding dan dimensi objek (lebar / ketinggian). Ada kalanya kita mungkin perlu mengubah suai sifat-sifat ini. Dalam kes itu, anda boleh memilih salah satu unsur yang anda ingin ubahnya, kemudian pergi ke Susun atur panel.
Dalam panel ini, anda akan dapati satu ilustrasi model kotak CSS bersama dengan maklumatnya, termasuk lebar dan ketinggian. Walaupun kedua-dua sifat ini tidak dinyatakan dalam CSS, alat ini pandai untuk menentukan nilai. Jika anda perlu mengubah suai mereka, anda boleh klik pada nilai dan gunakan kekunci anak panah atas atau ke bawah untuk meningkatkan atau mengurangkan nilai.
Gaya yang dikira
Dalam banyak situasi, anda mungkin tertanya-tanya mengapa gaya tertentu tidak digunakan. Salah satu cara yang lebih mudah dan lebih cepat, terutamanya apabila anda mempunyai ribuan garis gaya, adalah dengan memeriksa ia dari Gaya Dikira panel. Contoh ini menunjukkan bahawa warna teks tag anchor diganti oleh .butang kelas, manakala latar belakang .butang kelas ditindih oleh .button.add.
Memeriksa Keluarga Font (cara mudah)
Anda mungkin sering mencari sesuatu seperti ini keluarga font harta dalam CSS dengan pelbagai keluarga font. Malangnya, ini tidak akan memberitahu kami dengan jelas font yang mana penyemak imbas diperlukan. Untuk membuat pengenalpastian lebih mudah, kami boleh memasang pelanjutan Firebug ini iaitu FireFontFamily.
Selepas pemasangan selesai, muatkan halaman web anda, dan kini kami dapat melihat dengan jelas keluarga font yang mana. Dalam kes kita sebenarnya Helvetica Neue (lihat gambar).
Menganalisa Prestasi
Ini mungkin platitud, tetapi Speed Site kini merupakan salah satu parameter Google (algoritma) dalam menentukan kualiti laman web; laman web yang memuat lebih cepat dianggap maju dan kedudukan lebih tinggi dari segi kandungan. Jadi kelajuan bukan sesuatu yang harus diabaikan.
Panel Bersih
Tempat pertama yang mungkin perlu anda lawati untuk memeriksa prestasi laman web anda ialah Bersih panel. Panel ini akan merakamkan permintaan HTTP laman web anda apabila dimuatkan. Gambar di bawah ini menunjukkan laman web yang memuatkan 42 permintaan dan mengambil sekitar 4.36 saat untuk memuatkan.
Anda kemudian boleh menyusun permintaan HTTP pada jenis mereka seperti HTML, CSS, dan Imej.
Yslow!
Selain itu, anda juga boleh memasang YSlow, lanjutan untuk Firebug dari Yahoo !. Selepas ia diaktifkan, anda akan menemui panel tambahan secara ekspresif yang dipanggil Yslow!.
Sama seperti Bersih panel, Yslow! akan merakam prestasi laman web apabila ia dimuatkan, tetapi ia juga akan memberitahu anda mengapa halaman web lambat dan apa yang boleh kita lakukan untuk menyelesaikannya. Dalam contoh ini, kami menjalankan ujian ke laman web dan mendapat markah 86 untuk prestasi keseluruhan, yang dianggap OK.
Kelajuan Halaman
Sebagai alternatif, anda juga boleh memasang Speed Page dari Google. Sama seperti Yslow!, ia menguji prestasi kelajuan laman web, walaupun keputusan ujian mungkin sedikit berbeza. Contoh ini menunjukkan bahawa laman web yang sama menjaringkan 82 mengikut kelajuan halaman.
Alat Pembangun Web
Alat Pembangun Web adalah jelas untuk pemaju web dan mempunyai banyak ciri yang dibungkus dalam bar alat ini. Tetapi yang berikut adalah salah satu kegemaran saya.
Pemeriksaan imej
Ada kalanya kita mungkin perlu mendapatkan maklumat imej dari halaman web. Saya sering melihat orang melakukan ini dengan tersandung di pelayar atau dengan mengklik kanan imej dan pilih Lihat Maklumat Imej, seperti itu:
Tetapi cara ini tidak begitu cekap apabila kita perlu mendapatkan maklumat dari banyak imej. Dalam hal ini, kita boleh menggunakannya Imej ciri dari add-on. Ciri ini mudah diakses dari menu Imej dari bar alat.
Dan, contoh ini menunjukkan bagaimana kita memaparkan dimensi imej dan saiz fail imej serentak:
Alat Binaan Firefox Firefox
Dalam versi terkini, Firefox telah meningkatkan ciri terbina dalamnya untuk pemaju web, sebahagian daripadanya adalah:
Elemen Pemeriksaan Asli
Ini asli Periksa Elemen dari Firefox mungkin kelihatan serupa dengan “Periksa Elemen di Firebug”, tetapi ia sebenarnya bertindak dengan cara yang berbeza.
Kali ini, saya tidak akan meneruskan ciri ini lagi, kerana ia pada dasarnya sama dengan Firebug HTML dan panel CSS, walaupun dengan perbezaan susun atur dan reka bentuk. Tetapi, terdapat satu ciri tersendiri yang patut dicuba, iaitu Paparan 3D.
Menggunakan Paparan 3D anda boleh melihat struktur laman web secara mendalam. Untuk mengaktifkan pandangan ini, anda boleh menemui butang di bahagian bawah kanan “Elemen Senjata Asli Firefox”. Inilah caranya Paparan 3D kelihatan seperti.
Saya tidak menggunakannya sesetengah ciri lain walaupun, tetapi ia agak merupakan ciri inovatif dari Mozilla Saya mengaku, dan pastinya sangat berguna dalam situasi tertentu.
Paparan Reka Bentuk Web
Sejak peningkatan populariti dalam Reka Bentuk Web Responsif, Firefox telah memulakan Bookmarklet Responsif kepada Penyemak Imbas. Alat ini akan membolehkan kami menguji laman web responsif kami di dalam viewports yang berbeza tanpa mengubah saiz tetingkap penyemak imbas.
Pandangan ini tersedia dari menu ini: Alat> Pemaju Web> Paparan Reka Bentuk Web. Dan, bagaimana pandangan ini kelihatan seperti.
Editor Gaya
Terakhir, jika anda bekerja dengan CSS secara kerap, anda mungkin akan jatuh cinta dengan ciri ini. Sejak versi 11, Firefox telah menambah Editor Gaya dalam alat pemaju asalnya.
Ciri ini seronok sebagai Paparan Reka Bentuk Web, ia membolehkan anda untuk mengedit CSS, melihat kesan serta-merta pada pelayar dan menyimpan perubahan yang memberi kesan langsung kepada fail sumber CSS.
Editor Gaya tersedia dari menu berikut: Alat> Pembangun Web> Editor Gaya.
Pemikiran Akhir
Terdapat banyak ciri yang dikemas dalam Firefox add-on ini dan yang dibincangkan di sini adalah beberapa ciri yang saya gunakan agak kerap semasa pembangunan web. Walau bagaimanapun, anda mungkin mempunyai beberapa tip lain yang mungkin berguna untuk meningkatkan produktiviti pembangunan web di Firefox.
Ciri-ciri apa yang sering anda gunakan? Anda boleh berkongsi pendapat anda di dalam kotak komen di bawah.
