Cara Menggunakan Alat Pembangun Penyemak Imbas Web

2024 Pengarang: Abigail Brown | [email protected]. Diubah suai terakhir: 2023-12-17 06:56

Selain kebanyakan pembuat penyemak imbas yang memfokuskan kepada pengguna harian yang ingin melayari web, mereka juga memenuhi keperluan pembangun web, pereka bentuk dan profesional jaminan kualiti yang membantu membina apl dan tapak yang diakses oleh pengguna tersebut dengan menyepadukan yang berkuasa alatan terus ke dalam penyemak imbas itu sendiri.

Sudahlah sudah hari di mana satu-satunya alat pengaturcaraan dan ujian yang ditemui dalam penyemak imbas membenarkan anda melihat kod sumber halaman dan tidak lebih. Penyemak imbas hari ini membolehkan anda menyelam lebih mendalam dengan melakukan perkara seperti melaksanakan dan menyahpepijat coretan JavaScript, memeriksa dan mengedit elemen DOM, memantau trafik rangkaian masa nyata semasa apl atau halaman anda dimuatkan untuk mengenal pasti kesesakan, menganalisis prestasi CSS, memastikan kod anda tidak menggunakan terlalu banyak memori atau terlalu banyak kitaran CPU, dan banyak lagi.

Dari perspektif ujian, anda boleh menghasilkan semula cara apl atau halaman web akan dipaparkan dalam penyemak imbas yang berbeza serta pada peranti dan platform yang berbeza melalui keajaiban reka bentuk responsif dan simulator terbina dalam. Bahagian yang terbaik ialah anda boleh melakukan semua ini tanpa perlu meninggalkan penyemak imbas anda!

Tutorial di bawah memandu anda melalui cara mengakses alatan pembangun ini dalam beberapa penyemak imbas web yang popular.

Google Chrome

Alat pembangun Chrome membolehkan anda mengedit dan menyahpepijat kod, mengaudit komponen individu untuk mendedahkan isu prestasi, mensimulasikan skrin peranti berbeza termasuk yang menjalankan Android atau iOS dan melaksanakan beberapa fungsi berguna yang lain.

1. Pilih menu utama Chrome, ditandai dengan tiga garisan mendatar dan terletak di penjuru kanan sebelah atas penyemak imbas.

2. Apabila menu lungsur muncul, tuding kursor tetikus anda pada pilihan Lagi alatan.

   

3. Sub-menu kini sepatutnya muncul. Pilih pilihan berlabel Alat pembangun. Anda juga boleh menggunakan pintasan papan kekunci berikut sebagai ganti item menu ini: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Antara muka Alat Pembangun Chrome kini sepatutnya dipaparkan, seperti yang ditunjukkan dalam contoh tangkapan skrin ini. Bergantung pada versi Chrome anda, reka letak awal yang anda lihat mungkin berbeza sedikit daripada yang dibentangkan di sini. Hab utama alat pembangun, biasanya terletak sama ada di bahagian bawah atau sebelah kanan skrin, mengandungi tab berikut.

5. Selain bahagian ini, anda juga boleh mengakses alatan berikut melalui ikon >>, yang terletak di sebelah kanan Prestasi tab.

   • Memori: Pantau dan rekod penggunaan memori pada halaman web. Anda boleh melihat betapa beratnya JavaScript di tapak anda.
   • Security: Serlahkan masalah sijil dan isu berkaitan keselamatan lain dengan halaman atau aplikasi aktif.
   • Application: Periksa sumber yang digunakan oleh aplikasi web. Dapatkan butiran lengkap tentang perkara yang sedang digunakan.
   • Audit: Menawarkan cara untuk mengoptimumkan masa muat halaman atau aplikasi dan prestasi umum.

   

6. Mod Peranti membolehkan anda melihat halaman aktif dalam simulator yang menjadikannya hampir sama seperti yang dipaparkan pada salah satu daripada lebih sedozen peranti, termasuk beberapa Android yang terkenal dan model iOS seperti iPad, iPhone dan Samsung Galaxy. Anda juga diberi keupayaan untuk meniru resolusi skrin tersuai agar sesuai dengan keperluan pembangunan atau ujian tertentu anda.

   Untuk menghidupkan dan mematikan Mod Peranti, pilih ikon telefon mudah alih yang terletak terus di sebelah kiri Elemen tab.

   

7. Anda juga boleh menyesuaikan rupa dan rasa alatan pembangun anda dengan memilih butang menu yang diwakili oleh tiga titik yang diletakkan secara menegak dahulu dan terletak di bahagian paling kanan pada tab yang disebutkan di atas.

   Dari dalam menu lungsur ini, anda boleh meletakkan semula dok, menunjukkan atau menyembunyikan alatan yang berbeza serta melancarkan item yang lebih maju seperti pemeriksa peranti. Anda akan mendapati bahawa antara muka alat pembangun itu sendiri sangat disesuaikan melalui tetapan yang terdapat dalam bahagian ini.

   

Mozilla Firefox

Bahagian pembangun web Firefox termasuk alatan untuk pereka bentuk, pembangun dan penguji seperti editor gaya dan penitis mata sasaran piksel.

1. Pilih Firefox menu utama, diwakili oleh tiga garisan mendatar dan terletak di penjuru kanan sebelah atas tetingkap penyemak imbas.

2. Apabila menu lungsur muncul, pilih Pembangun Web.

   

3. Menu Pembangun Web kini sepatutnya dipaparkan, mengandungi pilihan berikut. Anda akan dapati bahawa kebanyakan item menu mempunyai pintasan papan kekunci yang dikaitkan dengannya.

   • Togol Alat: Memaparkan atau menyembunyikan antara muka alat pembangun, biasanya diletakkan di bahagian bawah tetingkap penyemak imbas. Pintasan papan kekunci: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspektor: Membolehkan anda memeriksa dan/atau mengubah suai kod CSS dan HTML pada halaman aktif serta pada peranti mudah alih melalui penyahpepijatan jauh. Pintasan papan kekunci: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: Membolehkan anda melaksanakan ungkapan JavaScript dalam halaman aktif serta menyemak pelbagai set data log termasuk amaran keselamatan, permintaan rangkaian, mesej CSS dan banyak lagi. Pintasan papan kekunci: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: Penyahpepijat JavaScript membolehkan anda menentukan dan membetulkan kecacatan dengan menetapkan titik putus, memeriksa nod DOM, sumber luaran black boxing dan banyak lagi. Seperti halnya dengan Inspektor, ciri ini juga menyokong penyahpepijatan jauh. Pintasan papan kekunci: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Editor Gaya: Membolehkan anda membuat helaian gaya baharu dan menggabungkannya dengan halaman web aktif atau mengedit helaian sedia ada dan menguji cara perubahan anda dipaparkan dalam penyemak imbas dengan hanya satu klik. Pintasan papan kekunci: Mac OS X, Windows (SHIFT+F7)
   • Prestasi: Menyediakan pecahan terperinci prestasi rangkaian halaman aktif, data kadar bingkai, masa dan keadaan pelaksanaan JavaScript, cat berkelip dan banyak lagi. Pintasan papan kekunci: Mac OS X, Windows (SHIFT+F5)
   • Rangkaian: Menyenaraikan setiap permintaan rangkaian yang dimulakan oleh penyemak imbas bersama-sama dengan kaedah yang sepadan, domain asal, jenis, saiz dan masa berlalu. Pintasan papan kekunci: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Pemeriksa Storan: Lihat cache dan kuki yang disimpan oleh tapak web. Pintasan papan kekunci: (SHIFT+F9)
   • Bar Alat Pembangun: Membuka penterjemah baris perintah interaktif. Masukkan help ke dalam penterjemah untuk senarai semua perintah yang tersedia dan sintaksnya yang betul. Pintasan papan kekunci: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Menyediakan keupayaan untuk mencipta dan melaksanakan apl web melalui peranti sebenar yang menjalankan Firefox OS atau melalui Firefox OS Simulator. Pintasan papan kekunci: Mac OS X, Windows (SHIFT+F8)
   • Konsol Penyemak Imbas: Menyediakan fungsi yang sama seperti Konsol Web (lihat di atas). Walau bagaimanapun, semua data yang dikembalikan adalah untuk keseluruhan aplikasi Firefox (termasuk sambungan dan fungsi peringkat penyemak imbas) berbanding hanya halaman web yang aktif. Pintasan papan kekunci: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Paparan Reka Bentuk Responsif: Membolehkan anda melihat halaman web dengan serta-merta dalam resolusi, reka letak dan saiz skrin yang berbeza untuk meniru berbilang peranti termasuk tablet dan telefon pintar. Pintasan papan kekunci: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Memaparkan kod warna heks untuk piksel yang dipilih secara individu.
   • Pad Conteng: Pad Conteng membolehkan anda menulis, mengedit, menyepadukan dan melaksanakan coretan kod JavaScript dari dalam tetingkap pop keluar Firefox. Buka dokumen JavaScript interaktif yang membolehkan anda menulis dalam kod dan mengujinya terhadap tapak web. Pintasan papan kekunci: (SHIFT+F4)
   • Pekerja Perkhidmatan: Nyahpepijat pekerja perkhidmatan aplikasi web anda. Dapatkan maklumat terperinci tentang prestasi dan kesilapan mereka.
   • Sumber Halaman: Alat pembangun berasaskan pelayar asal, pilihan ini hanya memaparkan kod sumber yang tersedia untuk halaman aktif. Pintasan papan kekunci: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Dapatkan Lebih Banyak Alat: Membuka koleksi Kotak Alat Pembangun Web di tapak tambahan rasmi Mozilla, menampilkan kira-kira sedozen sambungan popular seperti sebagai Firebug dan Greasemonkey.

   

Microsoft Edge/Internet Explorer

Lazimnya dirujuk sebagai Alat Pembangun F12, penghormatan kepada pintasan papan kekunci yang telah melancarkan antara muka sejak versi Internet Explorer yang lebih awal, set alat pembangun dalam IE11 dan Microsoft Edge telah berjalan jauh sejak penubuhannya dengan menawarkan kumpulan monitor, penyahpepijat, emulator dan penyusun segera yang sangat berguna.

Microsoft tidak lagi menyokong Internet Explorer dan mengesyorkan anda mengemas kini kepada penyemak imbas Edge yang lebih baharu. Pergi ke tapak mereka untuk memuat turun versi terbaharu.

1. Pilih Lagi tindakan, diwakili oleh tiga titik dan terletak di penjuru kanan sebelah atas tetingkap penyemak imbas.

   

2. Apabila menu lungsur muncul, pilih pilihan berlabel Alat Pembangun.

   

3. Antara muka pembangunan kini sepatutnya dipaparkan, biasanya di bahagian bawah tetingkap penyemak imbas. Alat berikut tersedia, setiap satunya boleh diakses dengan mengklik pada tajuk tab masing-masing atau menggunakan pintasan papan kekunci yang disertakan.

   

   • DOM Explorer: Membolehkan anda mengedit helaian gaya dan HTML dalam halaman aktif, memberikan hasil yang diubah suai semasa anda pergi. Menggunakan fungsi IntelliSense untuk autolengkap kod jika berkenaan. Pintasan papan kekunci: (CTRL+1)
   • Console: Menyediakan keupayaan untuk menyerahkan maklumat penyahpepijatan termasuk pembilang, pemasa, surih dan mesej tersuai melalui API bersepadu. Juga, membolehkan anda menyuntik kod ke dalam halaman web yang aktif dan mengubah suai nilai yang diberikan kepada pembolehubah individu dalam masa nyata. Pintasan papan kekunci: (CTRL+2)
   • Debugger: Membolehkan anda menetapkan titik putus dan nyahpepijat kod anda semasa ia dilaksanakan, baris demi baris jika perlu. Pintasan papan kekunci: (CTRL+3)
   • Rangkaian: Menyenaraikan setiap permintaan rangkaian yang dimulakan oleh penyemak imbas semasa pemuatan halaman dan pelaksanaan termasuk butiran protokol, jenis kandungan, penggunaan lebar jalur dan banyak lagi. Pintasan papan kekunci: (CTRL+4)
   • Prestasi: Butiran kadar bingkai, penggunaan CPU dan metrik berkaitan prestasi lain untuk membantu anda mempercepatkan masa muat halaman dan aktiviti lain. Pintasan papan kekunci: (CTRL+5)
   • Memori: Membantu anda mengasingkan dan membetulkan potensi kebocoran memori pada halaman web semasa dengan memaparkan garis masa penggunaan memori bersama-sama dengan syot kilat dari selang masa yang berbeza. Pintasan papan kekunci: (CTRL+6)
   • Emulasi: Menunjukkan kepada anda cara halaman aktif akan dipaparkan dalam pelbagai resolusi dan saiz skrin, meniru telefon pintar, tablet dan peranti lain. Ia juga menyediakan keupayaan untuk mengubah suai ejen pengguna dan orientasi halaman, serta mensimulasikan geolokasi yang berbeza dengan memasukkan latitud dan longitud. Pintasan papan kekunci: (CTRL+7)

4. Untuk memaparkan Konsol semasa dalam mana-mana alatan lain tekan butang persegi dengan kurungan kanan di dalamnya, terletak di sudut kanan atas antara muka alatan pembangunan.

   

5. Untuk menyahdok antara muka alatan pembangun supaya ia menjadi tetingkap yang berasingan, pilih dua segi empat tepat melata atau gunakan pintasan papan kekunci berikut: CTRL+P. Anda boleh meletakkan alatan itu kembali ke lokasi asalnya dengan menekan CTRL+P buat kali kedua.

   

Apple Safari (Mac Sahaja)

Set alat pembangun Safari yang pelbagai mencerminkan komuniti pembangun besar yang menggunakan Mac untuk keperluan reka bentuk dan pengaturcaraan mereka. Selain konsol yang berkuasa dan ciri pengelogan dan penyahpepijatan tradisional, mod reka bentuk responsif yang mudah digunakan dan alat untuk membuat sambungan penyemak imbas anda sendiri turut disediakan.

1. Pilih Safari dalam menu penyemak imbas, yang terletak di bahagian atas skrin anda. Apabila menu lungsur muncul, pilih Preferences. Anda juga boleh menggunakan pintasan papan kekunci berikut sebagai ganti item menu ini: COMMAND+COMMA(,)

   

2. Antara muka

   Safari Preferences kini sepatutnya dipaparkan, menindankan tetingkap penyemak imbas anda. Pilih ikon Lanjutan, yang terletak di hujung sebelah kanan pengepala.

   

3. Pilihan Lanjutan kini sepatutnya kelihatan. Di bahagian bawah skrin ini terdapat pilihan berlabel Tunjukkan menu Bangun dalam bar menu, disertakan dengan kotak pilihan. Jika tiada tanda semak ditunjukkan dalam kotak, klik padanya sekali untuk meletakkannya di sana.

   

4. Tutup antara muka Keutamaan.

5. Anda kini sepatutnya melihat pilihan baharu dalam menu penyemak imbas bernama Develop, terletak di antara Penanda Halaman dan Tetingkap. Klik pada item menu ini. Menu lungsur turun kini sepatutnya dipaparkan, mengandungi pilihan berikut.

   • Buka Halaman Dengan: Membolehkan anda membuka halaman web aktif dalam salah satu penyemak imbas lain yang sedang dipasang pada Mac anda.
   • Ejen Pengguna: Membolehkan anda memilih daripada lebih sedozen nilai ejen pengguna yang dipratakrifkan termasuk beberapa versi Chrome, Firefox dan Internet Explorer, serta menentukan tersuai anda sendiri rentetan.
   • Masukkan Mod Reka Bentuk Responsif: Memaparkan halaman semasa seperti yang akan dipaparkan pada pelbagai peranti dan pada resolusi skrin yang berbeza.
   • Tunjukkan Pemeriksa Web: Melancarkan antara muka utama untuk alat pembangun Safari, biasanya diletakkan di bahagian bawah skrin penyemak imbas anda dan mengandungi bahagian berikut: Elemen, Rangkaian, Sumber, Garis Masa, Penyahpepijat, Storan, Konsol.
   • Tunjukkan Konsol Ralat: Juga melancarkan antara muka alat pembangun, terus ke tab Konsol yang memaparkan ralat, amaran dan lain-lain yang boleh dicari data log.
   • Tunjukkan Sumber Halaman: Membuka tab Sumber, yang memaparkan kod sumber untuk halaman aktif yang dikategorikan mengikut dokumen.
   • Tunjukkan Sumber Halaman: Menjalankan fungsi yang sama seperti pilihan Tunjukkan Sumber Halaman.
   • Tunjukkan Editor Coretan: Membuka tetingkap baharu di mana anda boleh memasukkan kod CSS dan HTML, melihat pratonton keluarannya dengan segera.
   • Tunjukkan Pembina Sambungan: Menyediakan keupayaan untuk membuat atau mengedit sambungan Safari dengan CSS, HTML dan JavaScript.
   • Tunjukkan Rakaman Garis Masa: Membuka tab Garis Masa dan mula memaparkan permintaan rangkaian, reka letak dan maklumat pemaparan serta pelaksanaan JavaScript dalam masa nyata.
   • Caches Kosong: Memadamkan keseluruhan cache yang sedang disimpan pada pemacu keras anda.
   • Lumpuhkan Caches: Menghentikan Safari daripada menyimpan cache supaya semua kandungan diambil daripada pelayan apabila setiap halaman dimuatkan.
   • Lumpuhkan Imej: Menghalang imej daripada dipaparkan pada semua halaman web.
   • Lumpuhkan Gaya: Abaikan sifat CSS apabila halaman dimuatkan.
   • Lumpuhkan JavaScript: Mengehadkan pelaksanaan JavaScript pada semua halaman.
   • Lumpuhkan Sambungan: Melarang semua sambungan yang dipasang daripada dijalankan dalam penyemak imbas.
   • Lumpuhkan Hacks Khusus Tapak: Jika Safari telah diubah suai untuk menangani isu khusus secara eksplisit pada halaman web aktif, pilihan ini akan menyekat perubahan tersebut supaya halaman dimuatkan seperti yang akan berlaku sebelum pengubahsuaian ini diperkenalkan.
   • Lumpuhkan Sekatan Fail Setempat: Membenarkan penyemak imbas mempunyai akses kepada fail pada cakera setempat anda, tindakan yang disekat secara lalai atas sebab keselamatan.
   • Lumpuhkan Sekatan Silang Asal: Sekatan ini dilaksanakan secara lalai untuk mengelakkan XSS dan potensi bahaya lain. Walau bagaimanapun, mereka selalunya perlu dilumpuhkan buat sementara waktu untuk tujuan pembangunan.
   • Benarkan JavaScript daripada Medan Carian Pintar: Apabila didayakan, ia menyediakan keupayaan untuk memasukkan URL dengan javascript: dimasukkan terus ke dalam bar alamat.
   • Anggap Sijil SHA-1 sebagai Tidak Selamat: Sijil SSL yang menggunakan algoritma SHA-1 secara meluas dianggap sudah lapuk dan terdedah.