Laman » Reka Bentuk Web » Firefox Developer Edition 6 Coolest Tools to Try

    Firefox Developer Edition 6 Coolest Tools to Try

    Edisi pemaju Firefox adalah satu-satunya pelayar hari ini yang dibuat khas untuk pemaju. Alat pemaju dalam edisi standard muncul pertama di edisi pembangun dan ada alat dalam edisi pembangun yang tidak dan tidak akan tersedia dalam edisi standard. Hari ini kita akan melihat beberapa alat yang pada masa ini boleh didapati hanya dalam edisi pembangun.

    Jika anda seorang yang tidak pernah menggunakan atau yang tidak biasa dengan alat pemaju walaupun mereka dalam edisi standard, periksa ini "DevTools Challenger" yang sejuk oleh Mozilla pertama. Di sini anda boleh berlatih dengan beberapa alat yang disebut di bawah di pelayar edisi pembangun Firefox. Contohnya adalah menyeronokkan dan mudah untuk diikuti, arahan terus dan jika anda tidak dapat mengejar, ikuti tutorial video sahaja.

    1. Alat pemeriksa animasi

    Animasi CSS menjadi lebih dan lebih biasa, dan alat animasi CSS yang disediakan oleh edisi pemaju Firefox memudahkan untuk mengikuti dan memeriksa setiap langkah animasi yang dibuat. Anda boleh menjeda, bermain dan memutar semula animasi mana-mana; anda juga boleh melihat ia berlaku bingkai dengan bingkai melalui penyental.

    Untuk mengakses alat tersebut, buka Inspektor alat dengan mengklik kanan pada elemen animasi dan memilih "memeriksa unsur", kemudian di sebelah kanan tetingkap alat dev, klik "Animasi".

    2. Editor fungsi masa animasi

    Waktu animasi boleh diedit dalam alat dev, anda hanya klik ikon di sebelah fungsi di Peraturan seksyen Inspektor alat dan pop yang menunjukkan keluk fungsi terbuka. Anda boleh menyeret dan mengubah suai ini untuk menyesuaikan masa animasi anda. Sebaik sahaja anda membuat perubahan pada lengkung, kelajuan animasi anda akan berubah sewajarnya.

    Jika anda tidak terbiasa dengan fungsi animasi Bezier kubik, saya cadangkan siaran ini untuk mengetahui lebih lanjut mengenainya.

    3. Picker Warna untuk Hartanah CSS

    Terdapat pemetik warna yang tersedia dalam edisi standard Firefox (baca lebih lanjut mengenainya dalam catatan ini), yang memilih warna dari halaman dan salinannya ke papan klip. Pemetik warna yang saya sebutkan sekarang adalah bagaimanapun khusus untuk nilai warna CSS sifat-sifatnya.

    Di samping setiap nilai warna CSS di dalam Peraturan seksyen Inspektor alat, ada ikon yang akan membuka roda warna apabila diklik. Anda boleh memilih warna yang anda mahu dari roda.

    Sekiranya anda sudah mempunyai warna yang anda mahu, dan satu yang berlaku di halaman, cuma klik alat eyedropper di bahagian bawah popup untuk membuka pemetik warna, kemudian seret pemilih ke warna yang anda mahu, dan klik padanya . Nilai warna CSS akan ditukar kepada warna yang dipilih.

    4. Mengukur alat

    Alat ini membolehkan anda melihat kedudukan XY kursor, dan ketinggian, lebar dan pengukuran pepenjuru dalam piksel dari bahagian yang dipilih. Untuk menggunakan alat ini, anda perlu terlebih dahulu mendayakannya dalam pemaju Pilihan Kotak Alat, dengan menyemak kotak semak yang dinamakan "Ukur bahagian halaman" di bawah "Butang Toolbox Tersedia".

    Apabila diaktifkan, ikon penguasa akan muncul di bahagian atas tetingkap alat dev, klik ikon itu dan alihkan kursor ke atas halaman. Anda akan melihat kedudukan XY berhampiran kursor. Untuk mengukur lebar, ketinggian dan pepenjuru, klik dan seret untuk memilih bahagian yang ingin diukur.

    5. Editor penapis CSS

    Jika anda telah menggunakan penapis CSS pada elemen pada halaman, anda akan melihat ikon di sebelahnya di dalam Peraturan seksyen Inspektor alat, yang membuka editor penapis CSS setelah klik.

    Untuk mengalih keluar penapis, klik tanda x pada hujung kanan nama penapis. Untuk menambah penapis, klik kotak penapis di bahagian bawah dan pilih yang anda mahu tambah dan klik + tanda. Anda juga boleh menyusun semula penapis ke dalam sebarang pesanan dengan menyeret setiap item.

    6. Alat memori

    Anda boleh mengetahui apa yang mengambil memori di laman web anda, dengan bantuan alat ini. Ini membantu anda mengambil langkah untuk mengurangkan penggunaan memori dan meningkatkan kelajuan halaman anda.

    Untuk menggunakan alat ini, anda perlu mendayakannya terlebih dahulu Pilihan Kotak Alat dengan menyemak kotak semak bernama "Memori" di bawah "Alat Pembangun Firefox Default". Setelah disemak, anda akan melihat bahagian "Memori" di bahagian atas tetingkap alat dev selepas "Prestasi". Pilih itu.

    Untuk menggunakan alat tersebut, klik pada "Ambil snapshot" atau butang kamera. Anda akan melihat senarai item, seperti objek dan skrip yang mengambil memori .