Selain sebagian besar pembuat peramban yang berfokus pada pengguna sehari-hari yang ingin menjelajahi Web, mereka juga melayani para pengembang Web, perancang dan profesional jaminan kualitas yang membantu membangun aplikasi dan situs yang diakses pengguna tersebut dengan mengintegrasikan alat-alat canggih langsung ke peramban. diri.
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 hari ini memungkinkan Anda melakukan penyelaman yang jauh 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 adalah tidak menggunakan terlalu banyak memori atau terlalu banyak siklus CPU, dan masih banyak lagi. Dari perspektif pengujian, Anda dapat mereproduksi bagaimana sebuah aplikasi atau halaman Web akan ditampilkan di browser yang berbeda serta pada perangkat dan platform yang berbeda melalui keajaiban desain responsif dan simulator built-in. 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 mengekspos masalah kinerja, menyimulasikan berbagai layar perangkat termasuk yang menjalankan Android atau iOS, dan melakukan beberapa fungsi berguna lainnya.
- Klik pada tombol menu utama Chrome, ditandai dengan tiga garis horizontal dan terletak di sudut kanan atas browser.
- Ketika menu drop-down muncul, arahkan kursor mouse Anda ke atas Alat lainnya pilihan.
- Sebuah sub-menu seharusnya sekarang muncul. Pilih opsi berlabel Alat pengembang . 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 )
- 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.Elemen: Memberikan kemampuan untuk memeriksa CSS dan kode HTML serta mengedit CSS on-the-fly, melihat efek dari perubahan Anda secara real time.Menghibur: Konsol JavaScript Chrome memungkinkan entri perintah langsung serta debug diagnostik.Sumber: Memungkinkan Anda men-debug kode JavaScript melalui antarmuka grafis yang kuat.Jaringan: Mengkategorikan dan menampilkan informasi terperinci tentang setiap operasi terkait pada aplikasi atau halaman aktif, termasuk header permintaan lengkap dan respons serta metrik waktu lanjutan.Garis waktu: Memungkinkan untuk analisis mendalam dari setiap aktivitas yang terjadi di dalam browser segera setelah permintaan memuat halaman atau aplikasi dimulai.
- Selain bagian ini, Anda juga dapat mengakses alat-alat berikut melalui >> ikon, yang terletak di sebelah kanan Garis waktu tab.Profil: Dipecah menjadi Profiler CPU dan Tumpukan profiler bagian, menyediakan penggunaan memori yang komprehensif dan waktu eksekusi keseluruhan dari aplikasi aktif atau halaman.Keamanan: Menyoroti masalah sertifikat dan masalah terkait keamanan lainnya dengan halaman atau aplikasi yang aktif.Sumber daya: Di sinilah Anda dapat memeriksa cookie, penyimpanan lokal, cache aplikasi, dan sumber data lokal lainnya yang digunakan oleh halaman Web atau aplikasi saat ini.Audit: Menawarkan cara untuk mengoptimalkan waktu buka halaman dan aplikasi dan kinerja umum.
- Mode Perangkat memungkinkan Anda untuk melihat halaman aktif dalam simulator yang membuatnya hampir persis seperti yang akan muncul pada salah satu dari lebih dari selusin perangkat, termasuk beberapa model Android dan iOS terkenal seperti iPad, iPhone, dan Samsung Galaxy. Anda juga diberikan kemampuan untuk mengemulasikan resolusi layar khusus agar sesuai dengan perkembangan khusus atau kebutuhan pengujian Anda. Beralih Mode Perangkat dan mematikan, pilih ikon ponsel yang terletak tepat di sebelah kiri Elemen tab.
- Anda juga dapat menyesuaikan tampilan dan nuansa alat pengembang Anda dengan terlebih dahulu mengeklik tombol menu yang diwakili oleh tiga titik yang ditempatkan secara vertikal dan terletak di sisi paling kanan dari tab yang disebutkan sebelumnya. Dari dalam menu tarik-turun ini, Anda dapat memposisikan ulang dock, menampilkan atau menyembunyikan alat yang berbeda serta meluncurkan item yang lebih canggih seperti inspektur perangkat. Anda akan menemukan bahwa dev alat antarmuka itu sendiri sangat dapat dikustomisasi melalui pengaturan yang ditemukan di bagian ini.
Mozilla Firefox
Bagian Pengembang Web Firefox menyertakan alat untuk desainer, pengembang, dan penguji sama seperti editor gaya dan peninjau mata piksel-penargetan.
Bacaan Direkomendasikan Lifewire:Skrip Pengguna Greasemonkey dan Tampermonkey Top 25 Teratas
- Klik pada tombol menu utama Firefox, diwakili oleh tiga garis horizontal dan terletak di sudut kanan atas jendela browser.
- Ketika menu drop-down muncul, pilih ikon berlabel Pengembang . Itu Pengembang Web menu sekarang harus ditampilkan, yang berisi opsi-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 diposisikan di bagian bawah jendela browser. Pintasan keyboard: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )Inspektur: Memungkinkan Anda untuk memeriksa dan / atau menyesuaikan CSS dan kode HTML pada halaman aktif serta pada perangkat portabel melalui debug jarak jauh. Pintasan keyboard: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )Konsol Web: Memungkinkan Anda untuk mengeksekusi ekspresi JavaScript dalam halaman aktif serta meninjau beragam data login termasuk peringatan keamanan, permintaan jaringan, pesan CSS, dan banyak lagi. Pintasan keyboard: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )Debugger: Itu Debugger JavaScript memungkinkan Anda menentukan dan memperbaiki cacat dengan menetapkan breakpoint, memeriksa node DOM, sumber eksternal tinju hitam, dan banyak lagi. Seperti halnya dengan Inspektur , fitur ini juga mendukung debugging jarak jauh. Pintasan keyboard: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S) Editor Gaya: Memungkinkan Anda membuat stylesheet baru dan menggabungkannya dengan halaman Web aktif, atau mengedit lembar yang ada dan menguji bagaimana perubahan Anda ditampilkan dalam browser hanya dengan satu klik. Pintasan keyboard: Mac OS X, Windows ( SHIFT + F7 )Kinerja: Memberikan perincian terperinci kinerja jaringan halaman aktif, data frame rate, waktu dan status eksekusi JavaScript, cat berkedip, dan banyak lagi. Pintasan keyboard: Mac OS X, Windows ( SHIFT + F5 )Jaringan: Daftar setiap permintaan jaringan yang diprakarsai oleh browser bersama dengan metode yang sesuai, asal domain, jenis, ukuran, dan waktu yang berlalu. Pintasan keyboard: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )Bilah Alat Pengembang: Membuka interpreter baris perintah interaktif. Memasukkan membantu ke interpreter untuk daftar semua perintah yang tersedia dan sintaks yang tepat. Pintasan keyboard: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Memberikan kemampuan untuk membuat dan menjalankan aplikasi Web melalui perangkat yang sebenarnya menjalankan Firefox OS atau melalui Firefox OS Simulator. Pintasan keyboard: Mac OS X, Windows ( SHIFT + F8 )Konsol Browser: Menyediakan fungsi yang sama dengan Konsol Web (Lihat di atas). Namun, semua data yang dikembalikan adalah untuk seluruh aplikasi Firefox (termasuk ekstensi dan fungsi tingkat browser) yang bertentangan dengan 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 banyak perangkat termasuk tablet dan ponsel cerdas. Pintasan keyboard: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )Penitis mata: Menampilkan kode warna hex untuk piksel yang dipilih secara individual.Papan penggaris: Memungkinkan Anda menulis, mengedit, mengintegrasikan, dan mengeksekusi cuplikan kode JavaScript dari jendela Firefox pop-out. Pintasan keyboard: Mac OS X, Windows ( SHIFT + F4 )Halaman Sumber: 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: Buka Toolbox Pengembang Web koleksi di situs pengaya resmi Mozilla, menampilkan sekitar selusin ekstensi populer seperti Firebug dan Greasemonkey.
Microsoft Edge / Internet Explorer
Biasanya disebut sebagai Alat Pengembang F12 , sebuah penghormatan pada pintasan keyboard yang telah meluncurkan antarmuka sejak versi sebelumnya dari Internet Explorer, dev toolset di IE11 dan Microsoft Edge telah datang jauh sejak awal dengan menawarkan kelompok monitor, debugger, emulator, dan kompiler flyer.
- Klik pada Lebih banyak tindakan menu, diwakili oleh tiga titik dan terletak di sudut kanan atas jendela browser. Ketika menu drop-down muncul, pilih opsi yang berlabel Alat Pengembang F12 . Seperti yang sudah saya sebutkan, Anda juga dapat mengakses alat melalui F12 pintas keyboard.
- Antarmuka pengembangan sekarang harus ditampilkan, biasanya di bagian bawah jendela browser. Alat-alat berikut tersedia, masing-masing dapat diakses dengan mengklik pada judul tab masing-masing atau menggunakan shortcut keyboard yang menyertainya.DOM Explorer: Memungkinkan Anda untuk mengedit stylesheet dan HTML di halaman aktif, rendering hasil yang dimodifikasi saat Anda pergi. Memanfaatkan fungsionalitas IntelliSense untuk melengkapi otomatis kode jika berlaku. Pintasan keyboard: (CTRL + 1) Menghibur: Memberikan kemampuan untuk mengirimkan informasi debug termasuk penghitung, pengatur waktu, pelacakan, dan pesan yang disesuaikan melalui API yang terintegrasi. Juga, memungkinkan Anda menyuntikkan kode ke halaman Web aktif dan mengubah nilai yang ditetapkan ke variabel individu secara real time. Pintasan keyboard: (CTRL + 2) Debugger: Memungkinkan Anda menetapkan breakpoint dan debug kode Anda saat dijalankan, baris demi baris jika perlu. Pintasan keyboard: (CTRL + 3) Jaringan: Daftar setiap permintaan jaringan yang diprakarsai oleh browser selama pemuatan halaman dan eksekusi termasuk rincian protokol, jenis konten, penggunaan bandwidth, dan banyak lagi. Pintasan keyboard: (CTRL + 4) Kinerja: Detail frekuensi gambar, penggunaan CPU, dan metrik terkait kinerja lainnya untuk membantu Anda mempercepat waktu memuat halaman dan aktivitas lainnya. Pintasan keyboard: (CTRL + 5) Ingatan: Membantu Anda mengisolasi dan memperbaiki kebocoran memori potensial pada halaman Web saat ini dengan menampilkan garis waktu penggunaan memori bersama dengan snapshot dari interval waktu yang berbeda. Pintasan keyboard: (CTRL + 6) Emulasi: Menunjukkan kepada Anda bagaimana halaman aktif akan ditampilkan dalam berbagai resolusi dan ukuran layar, meniru smartphone, tablet, dan perangkat lain. 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)
- Untuk menampilkan Menghibur sementara di dalam alat lain, klik tombol persegi dengan kurung siku di dalamnya, terletak di sudut kanan atas antarmuka alat pengembangan.
- Untuk undock, antarmuka alat pengembang sehingga menjadi jendela terpisah, klik pada tombol yang diwakili oleh dua persegi panjang mengalir atau gunakan pintasan keyboard berikut: CTRL + P . Anda dapat menempatkan alat kembali di lokasi aslinya dengan menekan CTRL + P untuk kedua kalinya.
Apple Safari (hanya OS X)
Toolset dev yang bervariasi dari Safari mencerminkan komunitas pengembang besar yang menggunakan Mac untuk kebutuhan desain dan pemrograman mereka. Selain konsol yang kuat dan fitur penebangan dan debugging tradisional, mode desain responsif yang mudah digunakan dan alat untuk membuat ekstensi browser Anda sendiri juga disediakan.
- Klik Safari di menu browser, yang terletak di bagian atas layar Anda. Ketika menu drop-down muncul, pilih Preferensi . Anda juga dapat menggunakan pintasan keyboard berikut sebagai pengganti item menu ini: COMMAND + COMMA (,)
- Safari Preferensi antarmuka sekarang harus ditampilkan, overlay jendela browser Anda. Klik pada Maju ikon, terletak di sisi paling kanan dari header.
- Itu Maju preferensi sekarang harus terlihat. Di bagian bawah layar ini adalah opsi berlabel Tampilkan menu Kembangkan di bilah menu , disertai dengan kotak centang. Jika tidak ada tanda centang yang ditunjukkan di kotak, klik sekali untuk menempatkannya di sana.
- Tutup Preferensi antarmuka dengan mengklik 'x' merah yang ditemukan di sudut kiri atas.
- Anda sekarang harus melihat opsi baru di menu browser bernama Mengembangkan , terletak di antara Bookmark dan Jendela . Klik pada item menu ini. Menu drop-down sekarang harus ditampilkan, yang berisi opsi-opsi berikut.Buka Halaman Dengan: Memungkinkan Anda untuk membuka halaman Web aktif di salah satu browser lain yang saat ini diinstal pada Mac Anda.Agen pengguna: Memungkinkan Anda memilih lebih dari belasan nilai agen pengguna yang ditetapkan sebelumnya termasuk beberapa versi Chrome, Firefox, dan Internet Explorer, serta menentukan string khusus Anda sendiri.Masukkan Mode Desain Responsif: Merender laman saat ini seperti yang akan muncul di berbagai perangkat dan pada resolusi layar yang berbeda.Tampilkan Inspektur Web: Luncurkan antarmuka utama untuk alat pengembang dev, biasanya ditempatkan di bagian bawah layar browser Anda dan berisi bagian-bagian berikut: Elemen , Jaringan , Sumber daya , Garis waktu , Debugger , Penyimpanan , Menghibur .Tampilkan Konsol Kesalahan: Juga meluncurkan antarmuka alat dev, langsung ke Menghibur tab yang menampilkan kesalahan, peringatan, dan data log lainnya yang dapat dicari.Tampilkan Sumber Laman: Buka Sumber daya tab, yang menampilkan kode sumber untuk halaman aktif dikategorikan berdasarkan dokumen.Tampilkan Sumber Daya Laman: Melakukan fungsi yang sama dengan Tampilkan Sumber Laman pilihan.Tampilkan Editor Cuplikan: Membuka jendela baru di mana Anda dapat memasukkan kode CSS dan HTML, melihat pratinjau outputnya dengan cepat.Tampilkan Pembuat Ekstensi: Menyediakan kemampuan untuk membuat atau mengedit ekstensi Safari dengan CSS, HTML, dan JavaScript.Tunjukkan Perekaman Garis Waktu: Buka Garis waktu tab dan mulai menampilkan permintaan jaringan, tata letak, dan informasi render serta eksekusi JavaScript secara waktu nyata.Cache Kosong: Menghapus seluruh cache yang saat ini disimpan di hard drive Anda.Nonaktifkan Cache: Menghentikan Safari dari cache sehingga semua konten diambil dari server pada setiap pemuatan halaman.Nonaktifkan Gambar: Mencegah gambar dari rendering di semua halaman web.Nonaktifkan Gaya: Mengabaikan properti CSS ketika halaman dimuat.Nonaktifkan JavaScript: Batasi eksekusi JavaScript di semua halaman.Nonaktifkan Ekstensi: Melarang semua ekstensi yang terpasang untuk berjalan di dalam browser.Nonaktifkan Peretasan Khusus Situs: Jika Safari telah dimodifikasi untuk menangani masalah secara eksplisit khusus untuk halaman Web aktif, opsi ini akan memblokir perubahan tersebut sehingga halaman tersebut memuat seperti sebelum modifikasi ini diperkenalkan.Nonaktifkan Pembatasan File Lokal: Memungkinkan browser untuk memiliki akses ke file di disk lokal Anda, tindakan yang dibatasi secara default karena alasan keamanan.Nonaktifkan Pembatasan Lintas-Asal: Pembatasan ini diberlakukan secara default untuk mencegah XSS dan potensi bahaya lainnya. Namun, mereka seringkali perlu dinonaktifkan sementara untuk tujuan pengembangan.Izinkan JavaScript dari Bidang Penelusuran Cerdas: Saat diaktifkan, memberikan kemampuan untuk memasukkan URL javascript: dimasukkan langsung ke bilah alamat.Perlakukan Sertifikat SHA-1 sebagai Tidak Aman: Sertifikat SSL menggunakan algoritma SHA-1 secara luas dianggap sudah ketinggalan zaman dan rentan.
