Cara Menggunakan Alat Pengembang Peramban Web

2024 Pengarang: Abigail Brown | [email protected]. Terakhir diubah: 2023-12-17 06:51

Selain sebagian besar pembuat browser yang berfokus pada pengguna sehari-hari yang ingin menjelajahi web, mereka juga melayani pengembang web, perancang, dan profesional jaminan kualitas yang membantu membangun aplikasi dan situs yang diakses pengguna tersebut dengan mengintegrasikan alat langsung ke browser itu sendiri.

Lewatlah sudah hari-hari di mana satu-satunya alat pemrograman dan pengujian yang ditemukan dalam browser memungkinkan Anda untuk melihat kode sumber halaman dan tidak lebih. Peramban saat ini memungkinkan Anda menyelam lebih dalam dengan melakukan hal-hal seperti mengeksekusi dan men-debug cuplikan JavaScript, memeriksa dan mengedit elemen DOM, memantau lalu lintas jaringan waktu nyata saat aplikasi atau laman Anda dimuat untuk mengidentifikasi kemacetan, menganalisis kinerja CSS, memastikan bahwa kode Anda tidak menggunakan terlalu banyak memori atau terlalu banyak siklus CPU, dan banyak lagi.

Dari perspektif pengujian, Anda dapat mereproduksi bagaimana aplikasi atau halaman web akan dirender di browser yang berbeda serta pada perangkat dan platform yang berbeda melalui keajaiban desain responsif dan simulator bawaan. Bagian terbaiknya adalah Anda dapat melakukan semua ini tanpa harus meninggalkan browser Anda!

Tutorial di bawah ini memandu Anda melalui cara mengakses alat pengembang ini di beberapa browser web populer.

Google Chrome

Alat pengembang Chrome memungkinkan Anda mengedit dan men-debug kode, mengaudit komponen individual untuk mengungkap masalah kinerja, menyimulasikan berbagai layar perangkat termasuk yang menjalankan Android atau iOS, dan melakukan beberapa fungsi berguna lainnya.

1. Pilih menu utama Chrome, ditandai dengan tiga garis horizontal dan terletak di sudut kanan atas browser.

2. Saat menu tarik-turun muncul, arahkan kursor mouse Anda ke opsi Alat lainnya.

   

3. Sebuah sub-menu sekarang akan muncul. Pilih opsi berlabel Developer tools. Anda juga dapat menggunakan pintasan keyboard berikut sebagai pengganti item menu ini: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Antarmuka Alat Pengembang Chrome sekarang harus ditampilkan, seperti yang ditunjukkan pada contoh tangkapan layar ini. Bergantung pada versi Chrome Anda, tata letak awal yang Anda lihat mungkin sedikit berbeda dari yang disajikan di sini. Hub utama alat pengembang, biasanya terletak di sisi bawah atau kanan layar, berisi tab berikut.

5. Selain bagian ini, Anda juga dapat mengakses alat berikut melalui ikon >>, yang terletak di sebelah kanan Performance tab.

   • Memori: Memantau dan merekam penggunaan memori pada halaman web. Anda dapat melihat seberapa berat JavaScript di situs Anda.
   • Keamanan: Menyoroti masalah sertifikat dan masalah terkait keamanan lainnya dengan halaman atau aplikasi yang aktif.
   • Application: Memeriksa sumber daya yang digunakan oleh aplikasi web. Dapatkan rincian lengkap tentang apa yang sedang digunakan.
   • Audit: Menawarkan cara untuk mengoptimalkan waktu buka halaman atau aplikasi dan kinerja umum.

   

6. Mode Perangkat memungkinkan Anda untuk melihat halaman aktif dalam simulator yang membuatnya hampir persis seperti yang akan muncul di salah satu dari lebih dari selusin perangkat, termasuk beberapa Android terkenal dan model iOS seperti iPad, iPhone, dan Samsung Galaxy. Anda juga diberi kemampuan untuk meniru resolusi layar khusus agar sesuai dengan kebutuhan pengembangan atau pengujian khusus Anda.

   Untuk mengaktifkan dan menonaktifkan Device Mode, pilih ikon ponsel yang terletak tepat di sebelah kiri Elemen tab.

   

7. Anda juga dapat menyesuaikan tampilan dan nuansa alat pengembang Anda dengan terlebih dahulu memilih tombol menu yang diwakili oleh tiga titik yang ditempatkan secara vertikal dan terletak di sisi paling kanan dari tab yang disebutkan di atas.

   Dari dalam menu tarik-turun ini, Anda dapat memposisikan ulang dok, menampilkan atau menyembunyikan alat yang berbeda serta meluncurkan item yang lebih canggih seperti pemeriksa perangkat. Anda akan menemukan bahwa antarmuka alat dev itu sendiri sangat dapat disesuaikan melalui pengaturan yang ditemukan di bagian ini.

   

Mozilla Firefox

Bagian pengembang web Firefox mencakup alat untuk desainer, pengembang, dan penguji seperti editor gaya dan eyedropper penargetan piksel.

1. Pilih menu utama Firefox, diwakili oleh tiga garis horizontal dan terletak di sudut kanan atas jendela browser.

2. Saat menu drop-down muncul, pilih Web Developer.

   

3. The Menu Web Developer sekarang akan ditampilkan, yang berisi opsi berikut. Anda akan melihat bahwa sebagian besar item menu memiliki pintasan keyboard yang terkait dengannya.

   • Toggle Tools: Menampilkan atau menyembunyikan antarmuka alat pengembang, biasanya ditempatkan di bagian bawah jendela browser. Pintasan keyboard: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Memungkinkan Anda untuk memeriksa dan/atau mengubah kode CSS dan HTML pada halaman aktif serta pada perangkat portabel melalui debugging jarak jauh. Pintasan keyboard: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: Memungkinkan Anda untuk mengeksekusi ekspresi JavaScript dalam halaman aktif serta meninjau beragam set data yang dicatat termasuk peringatan keamanan, permintaan jaringan, pesan CSS, dan banyak lagi. Pintasan keyboard: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript Debugger memungkinkan Anda menentukan dan memperbaiki cacat dengan menyetel breakpoint, memeriksa node DOM, sumber eksternal kotak hitam, dan banyak lagi. Seperti halnya dengan Inspector, fitur ini juga mendukung debugging jarak jauh. Pintasan keyboard: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Style Editor: Memungkinkan Anda membuat stylesheet baru dan menggabungkannya dengan halaman web aktif, atau mengedit sheet yang ada dan menguji bagaimana perubahan Anda ditampilkan di browser hanya dengan satu klik. Pintasan keyboard: Mac OS X, Windows (SHIFT+F7)
   • Performance: Memberikan rincian rinci tentang kinerja jaringan halaman aktif, data kecepatan bingkai, waktu dan status eksekusi JavaScript, cat berkedip, dan banyak lagi. Pintasan keyboard: Mac OS X, Windows (SHIFT+F5)
   • Network: Mencantumkan setiap permintaan jaringan yang diprakarsai oleh browser bersama dengan metode yang sesuai, domain asal, jenis, ukuran, dan waktu berlalu. Pintasan keyboard: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Lihatlah cache dan cookie yang disimpan oleh sebuah situs web. Pintasan keyboard: (SHIFT+F9)
   • Developer Toolbar: Membuka interpreter baris perintah interaktif. Masukkan help ke dalam interpreter untuk daftar semua perintah yang tersedia dan sintaks yang tepat. Pintasan keyboard: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Menyediakan kemampuan untuk membuat dan menjalankan aplikasi web melalui perangkat aktual yang menjalankan Firefox OS atau melalui Firefox OS Simulator. Pintasan keyboard: Mac OS X, Windows (SHIFT+F8)
   • Konsol Browser: Menyediakan fungsionalitas yang sama seperti Konsol Web (lihat di atas). Namun, semua data yang dikembalikan adalah untuk seluruh aplikasi Firefox (termasuk ekstensi dan fungsi tingkat browser) bukan hanya halaman web yang aktif. Pintasan keyboard: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Tampilan Desain Responsif: Memungkinkan Anda untuk langsung melihat halaman web dalam berbagai resolusi, tata letak, dan ukuran layar untuk meniru beberapa perangkat termasuk tablet dan ponsel cerdas. Pintasan keyboard: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Menampilkan kode warna hex untuk piksel yang dipilih secara individual.
   • Scratchpad: Scratchpad memungkinkan Anda menulis, mengedit, mengintegrasikan, dan mengeksekusi potongan kode JavaScript dari dalam jendela pop-out Firefox. Buka dokumen JavaScript interaktif yang memungkinkan Anda menulis kode dan mengujinya di situs web. Pintasan keyboard: (SHIFT+F4)
   • Pekerja Layanan: Debug pekerja layanan aplikasi web Anda. Dapatkan informasi rinci tentang kinerja dan kesalahan mereka.
   • Page Source: Alat pengembang berbasis browser asli, opsi ini hanya menampilkan kode sumber yang tersedia untuk halaman aktif. Pintasan keyboard: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Dapatkan Alat Lainnya: Membuka Kotak Alat Pengembang Web di situs pengaya resmi Mozilla, yang menampilkan sekitar selusin ekstensi populer seperti sebagai Firebug dan Greasemonkey.

   

Microsoft Edge/Internet Explorer

Biasanya disebut sebagai F12 Alat Pengembang, sebuah penghormatan kepada pintasan keyboard yang telah meluncurkan antarmuka sejak versi Internet Explorer sebelumnya, perangkat pengembang di IE11 dan Microsoft Edge telah berkembang jauh sejak awal dengan menawarkan sekelompok monitor, debugger, emulator, dan compiler on-the-fly yang sangat berguna.

Microsoft tidak lagi mendukung Internet Explorer dan menyarankan Anda memperbarui ke browser Edge yang lebih baru. Buka situs mereka untuk mengunduh versi terbaru.

1. Pilih Tindakan lainnya, diwakili oleh tiga titik dan terletak di sudut kanan atas jendela browser.

   

2. Saat menu drop-down muncul, pilih opsi berlabel Developer Tools.

   

3. Antarmuka pengembangan sekarang harus ditampilkan, biasanya di bagian bawah jendela browser. Alat-alat berikut tersedia, masing-masing dapat diakses dengan mengklik judul tab masing-masing atau menggunakan pintasan keyboard yang menyertainya.

   

   • DOM Explorer: Memungkinkan Anda untuk mengedit stylesheet dan HTML di halaman aktif, menampilkan hasil yang dimodifikasi saat Anda pergi. Memanfaatkan fungsionalitas IntelliSense untuk melengkapi kode secara otomatis jika berlaku. Pintasan keyboard: (CTRL+1)
   • Console: Menyediakan kemampuan untuk mengirimkan informasi debug termasuk penghitung, pengatur waktu, pelacakan, dan pesan yang disesuaikan melalui API terintegrasi. Juga, memungkinkan Anda menyuntikkan kode ke halaman web aktif dan mengubah nilai yang ditetapkan ke variabel individual secara real-time. Pintasan keyboard: (CTRL+2)
   • Debugger: Memungkinkan Anda mengatur breakpoint dan men-debug kode Anda saat dijalankan, baris demi baris jika perlu. Pintasan keyboard: (CTRL+3)
   • Network: Mencantumkan setiap permintaan jaringan yang diprakarsai oleh browser selama pemuatan halaman dan eksekusi termasuk detail protokol, tipe konten, penggunaan bandwidth, dan banyak lagi. Pintasan keyboard: (CTRL+4)
   • Performance: Detail frame rate, penggunaan CPU, dan metrik terkait kinerja lainnya untuk membantu Anda mempercepat waktu pemuatan halaman dan aktivitas lainnya. Pintasan keyboard: (CTRL+5)
   • Memori: Membantu Anda mengisolasi dan memperbaiki potensi kebocoran memori pada halaman web saat ini dengan menampilkan garis waktu penggunaan memori bersama dengan cuplikan dari interval waktu yang berbeda. Pintasan keyboard: (CTRL+6)
   • Emulation: Menunjukkan kepada Anda bagaimana halaman aktif akan dirender dalam berbagai resolusi dan ukuran layar, meniru ponsel cerdas, tablet, dan perangkat lain. Ini juga menyediakan kemampuan untuk memodifikasi agen pengguna dan orientasi halaman, serta mensimulasikan geolokasi yang berbeda dengan memasukkan garis lintang dan garis bujur. Pintasan keyboard: (CTRL+7)

4. Untuk menampilkan Konsol saat berada di dalam salah satu alat lain, tekan tombol persegi dengan tanda kurung siku di dalamnya, yang terletak di sudut kanan atas antarmuka alat pengembangan.

   

5. Untuk melepas antarmuka alat pengembang sehingga menjadi jendela terpisah, pilih dua persegi panjang berjenjang atau gunakan pintasan keyboard berikut: CTRL+P. Anda dapat mengembalikan alat ke lokasi semula dengan menekan CTRL+P untuk kedua kalinya.

   

Apple Safari (Hanya Mac)

Alat pengembangan Safari yang beragam mencerminkan komunitas pengembang besar yang menggunakan Mac untuk kebutuhan desain dan pemrograman mereka. Selain konsol yang kuat dan fitur logging dan debugging tradisional, mode desain responsif yang mudah digunakan dan alat untuk membuat ekstensi browser Anda sendiri juga disediakan.

1. Pilih Safari di menu browser, yang terletak di bagian atas layar Anda. Ketika menu drop-down muncul, pilih Preferences. Anda juga dapat menggunakan pintasan keyboard berikut sebagai pengganti item menu ini: COMMAND+COMMA(,)

   

2. Safari Preferences antarmuka sekarang harus ditampilkan, menutupi jendela browser Anda. Pilih ikon Advanced, yang terletak di ujung kanan header.

   

3. Preferensi Lanjutan sekarang akan terlihat. Di bagian bawah layar ini terdapat opsi berlabel Show Develop menu di bilah menu, disertai dengan kotak centang. Jika tidak ada tanda centang yang ditampilkan di kotak, klik sekali untuk menempatkannya di sana.

   

4. Tutup antarmuka Preferences.

5. Anda sekarang akan melihat opsi baru di menu browser bernama Develop, terletak di antara Bookmark dan Window. Klik item menu ini. Menu drop-down sekarang akan ditampilkan, yang berisi opsi berikut.

   • Open Page With: Memungkinkan Anda untuk membuka halaman web aktif di salah satu browser lain yang saat ini diinstal pada Mac Anda.
   • User Agent: Memungkinkan Anda memilih lebih dari selusin nilai agen pengguna yang telah ditentukan sebelumnya termasuk beberapa versi Chrome, Firefox, dan Internet Explorer, serta menentukan kustom Anda sendiri string.
   • Masuk ke Mode Desain Responsif: Menampilkan halaman saat ini seperti yang akan muncul di berbagai perangkat dan pada resolusi layar yang berbeda.
   • Show Web Inspector: Meluncurkan antarmuka utama untuk alat pengembang Safari, biasanya ditempatkan di bagian bawah layar browser Anda dan berisi bagian berikut: Elements, Network, Resources, Timelines, Debugger, Penyimpanan, Konsol.
   • Tampilkan Konsol Kesalahan: Juga meluncurkan antarmuka alat pengembang, langsung ke tab Konsol yang menampilkan kesalahan, peringatan, dan pencarian lainnya data log.
   • Show Page Source: Membuka tab Resources, yang menampilkan kode sumber untuk halaman aktif yang dikategorikan oleh dokumen.
   • Show Page Resources: Melakukan fungsi yang sama seperti opsi Show Page Source.
   • Show Snippet Editor: Membuka jendela baru tempat Anda dapat memasukkan kode CSS dan HTML, melihat pratinjau outputnya saat itu juga.
   • Show Extension Builder: Menyediakan kemampuan untuk membuat atau mengedit ekstensi Safari dengan CSS, HTML, dan JavaScript.
   • Show Timeline Recording: Membuka tab Timelines dan mulai menampilkan permintaan jaringan, tata letak, dan rendering informasi serta eksekusi JavaScript secara real-time.
   • Empty Cache: Menghapus seluruh cache yang saat ini disimpan di hard drive Anda.
   • Disable Cache: Menghentikan Safari dari caching sehingga semua konten diambil dari server pada setiap pemuatan halaman.
   • Nonaktifkan Gambar: Mencegah gambar ditampilkan di semua halaman web.
   • Disable Styles: Mengabaikan properti CSS saat halaman dimuat.
   • Disable JavaScript: Membatasi eksekusi JavaScript di semua halaman.
   • Nonaktifkan Ekstensi: Melarang semua ekstensi yang diinstal berjalan di dalam browser.
   • Nonaktifkan Peretasan Khusus Situs: Jika Safari telah dimodifikasi untuk secara eksplisit menangani masalah khusus untuk halaman web aktif, opsi ini akan memblokir perubahan tersebut sehingga halaman beban seperti sebelum modifikasi ini diperkenalkan.
   • Nonaktifkan Pembatasan Berkas Lokal: Memungkinkan browser memiliki akses ke file di disk lokal Anda, tindakan yang secara default dibatasi untuk alasan keamanan.
   • Disable Cross-Origin Restrictions: Pembatasan ini diberlakukan secara default untuk mencegah XSS dan potensi bahaya lainnya. Namun, mereka sering kali perlu dinonaktifkan sementara untuk tujuan pengembangan.
   • Izinkan JavaScript dari Bidang Pencarian Cerdas: Saat diaktifkan, ini memberikan kemampuan untuk memasukkan URL dengan javascript: dimasukkan langsung ke bilah alamat.
   • Perlakukan Sertifikat SHA-1 sebagai Tidak Aman: Sertifikat SSL yang menggunakan algoritma SHA-1 secara luas dianggap usang dan rentan.