Laman » Pengekodan » 10 Alat Pembangun Firefox yang Harus Anda Ketahui

    10 Alat Pembangun Firefox yang Harus Anda Ketahui

    Firefox sebagai "pelayar pemaju" mempunyai banyak alat yang hebat untuk membantu menjadikan kerja kami lebih mudah. Anda boleh mencari lebih banyak koleksi alat pada laman web Alat Pembangun Firefox dan juga boleh mencuba Pelayar Edisi Pemaju mereka yang mempunyai lebih banyak ciri dan alat yang sedang diuji.

    Untuk jawatan ini, saya telah disenaraikan 10 alat berguna anda mungkin suka dari koleksi alat pembangunnya. Saya juga memperlihatkan apa yang boleh dilakukan oleh alat ini dengan GIF dan bagaimana untuk mengaksesnya untuk rujukan cepat.

    1. Lihat penguasa mendatar dan menegak

    Firefox mempunyai alat penguasa yang memaparkan penguasa mendatar dan menegak dengan unit piksel pada halaman. Alat ini berguna untuk mengatur elemen anda di seluruh halaman.

    Untuk mengakses penguasa melalui menu, pergi ke: ☰> Pemaju > Toolbar Pemaju (pintasan: Shift + F2). Setelah bar alat muncul di bahagian bawah halaman, taipkan penguasa dan tekan Masukkan.

    Untuk menjadikannya muncul pada tetingkap alat pembangun, Pergi ke "Pilihan Kotak Alat". Di bawah bahagian "Butang Kotak Tersedia", periksa "Togol penguasa untuk halaman"kotak pilihan.

    2. Ambil tangkapan skrin menggunakan seleksi CSS

    Walaupun bar alat Firefox membolehkan anda mengambil tangkapan skrin halaman penuh atau bahagian yang kelihatan, pada pendapat saya kaedah pemilih CSS lebih berguna untuk menangkap tangkapan skrin unsur-unsur individu dan juga untuk unsur-unsur yang boleh dilihat pada mouse-hover hanya (seperti menu).

    Untuk mengambil tangkapan skrin melalui menu, pergi ke ☰> Pemaju > Toolbar Pemaju (shortcutShift + F2). Setelah bar alat muncul di bahagian bawah halaman, taipkan screenshot --selektor any_unique_css_selector dan tekan masukkan.

    Untuk membuat ini muncul pada tetingkap alat pembangun: klik "Pilihan Kotak Alat" dan di bawah "Butang Kotak Alat Tersedia", tandakan "Ambil tangkapan skrin penuh " kotak semak.

    3. Pilih warna dari laman web

    Firefox mempunyai alat pemetik warna terbina dalam dengan nama "Eyedropper". Untuk mengakses alat "Eyedropper" melalui menu pergi ke ☰> Pemaju > Eyedropper.

    Untuk membuatnya muncul pada tetingkap alat pembangun: klik "Pilihan Kotak Alat" dan di bawah "Capaian Kotak Alat Tersedia" semak "Dapatkan warna dari halaman"kotak pilihan.

    4. Lihat susun atur halaman dalam 3D

    Melihat halaman web dalam 3D membantu dengan masalah susun atur. Anda akan dapat melihat elemen berlapis yang berbeza lebih jelas dalam paparan 3D. Untuk melihat halaman web dalam 3D, klik butang "Lihat 3D" alat.

    Untuk membuat ini muncul pada tetingkap alat pemaju, klik "Pilihan Kotak Alat" dan di bawah "Butang Kotak Alat Tersedia" semak "Paparan 3D"kotak pilihan.

    5. Lihat gaya penyemak imbas

    Gaya Pelayar terdiri daripada dua jenis: gaya lalai penyemak imbas untuk setiap elemen, dan gaya khusus penyemak imbas (yang menggunakan awalan penyemak imbas). Dengan melihat gaya pelayar anda, anda boleh mendiagnosis sebarang masalah menimpa dalam helaian gaya anda dan juga mengetahui sebarang gaya tertentu penyemak imbas yang ada .

    Untuk mengakses "Gaya pelayar" melalui menu, pergi ke ☰> Pemaju > Inspektor. Kemudian klik tab "Dikompilasi" di bahagian kanan dan tandakan kotak pilihan "Pelayar gaya".

    Anda juga boleh membuka "Inspektor"tab melalui pintasan Ctrl + Shift + C dan kemudian mengakses" Gaya pelayar ".

    6. Lumpuhkan JavaScript untuk sesi semasa

    Untuk amalan terbaik dan keserasian pembaca skrin, sentiasa dinasihatkan untuk mengodkan mana-mana laman web dengan cara yang fungsinya tidak terhalang dalam lingkungan yang dilabel javascript. Untuk menguji persekitaran sedemikian, anda boleh lumpuhkan JavaScript untuk sesi yang anda sedang kerjakan.

    Untuk melumpuhkan JavaScript untuk sesi semasa klik "Pilihan Kotak Alat" dan di bawah "Tetapan lanjut" bahagian semak "Lumpuhkan JavaScript* "kotak pilihan.

    7. Sembunyikan gaya CSS dari halaman

    Sama seperti JavaScript, kerana kebimbangan kebolehaksesan adalah yang terbaik untuk mereka bentuk laman web sedemikian rupa halaman tersebut masih boleh dibaca walaupun tanpa sebarang gaya. Untuk melihat bagaimana halaman kelihatan tanpa sebarang gaya, anda boleh melumpuhkannya dalam alat pemaju.

    Untuk menghapuskan sebarang gaya CSS (sebaris, dalaman atau luaran) yang digunakan pada halaman web, hanya klik pada simbol mata stylesheet yang tersenarai dalam tab "Editor Gaya". Klik sekali lagi untuk kembali ke paparan asal.

    Untuk mengakses "Editor Gaya" melalui menu pergi ke ☰> Pemaju > Editor Gaya (pintasan: Shift + F7.

    8. Pratonton jawapan kandungan HTML pada permintaan

    Alat pemaju Firefox mempunyai pilihan untuk pratonton jawapan jenis kandungan HTML. Ini membantu pemaju untuk melihat pratonton 302 pelencongan dan semak sama ada maklumat sensitif telah diberikan atau tidak dalam respon.

    Untuk mengakses "Preview" melalui menu pergi ke ☰> Pemaju > Rangkaian (pintasan: Ctrl + Shift + Q. Kemudian buka laman web pilihan anda atau muat semula halaman semasa, klik pada permintaan yang dikehendaki (dengan respons HTML) dari senarai permintaan dan klik "Pratonton"tab di bahagian kanan.

    9. Pratonton laman web dalam saiz skrin yang berbeza

    Untuk menguji laman web untuk responsifnya menggunakan "Reka Bentuk Paparan Responsif", yang boleh diakses oleh ☰> Pemaju > Lihat Reka Bentuk Responsif atau dengan jalan pintas: Ctrl + Shift + M.

    Untuk membuat butang alat "Design Responsif Design" muncul, klik "Pilihan Kotak Alat" dan di bawah bahagian "Butang Kotak Tersedia," tandakan kotak pilihan "Mod Design Responsif".

    10. Jalankan JavaScript pada halaman

    Untuk pelaksanaan JavaScript yang cepat di mana-mana halaman web, gunakan alat "Scratchpad" Firefox. Untuk mengakses "Scratchpad" melalui menu pergi ke; ☰> Pemaju > Scratchpad atau gunakan pintasan papan kekunci Shift + F4.

    Untuk menjadikan butang alat "Scratchpad" muncul pada tetingkap alat pembangun untuk digunakan dengan cepat: klik "Pilihan Kotak Alat"dan di bawah"Butang Toolbox yang disediakan"seksyen semak" Scratchpad " kotak semak.