Alat yang terintegrasi untuk perancang web, pengembang, dan penguji
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 opsi More tools .
- Sebuah sub-menu seharusnya sekarang muncul. Pilih opsi yang diberi label 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: Menyediakan kemampuan untuk memeriksa CSS dan kode HTML serta mengedit CSS on-the-fly, melihat efek dari perubahan Anda secara real time.
Konsol: Konsol JavaScript Chrome memungkinkan entri perintah langsung serta debug diagnostik.
Sumber: Memungkinkan Anda mendebug 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 dan tanggapan lengkap 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 tab Garis Waktu .
Profil: Dipecah menjadi profiler CPU dan bagian profil Heap , menyediakan penggunaan memori yang komprehensif dan waktu eksekusi keseluruhan dari aplikasi atau halaman yang aktif.
Keamanan: Menyoroti masalah sertifikat dan masalah terkait keamanan lainnya dengan halaman atau aplikasi yang aktif.
Sumber daya: Ini adalah tempat 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 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. Untuk mengaktifkan dan menonaktifkan Mode Perangkat , pilih ikon ponsel yang terletak tepat di sebelah kiri tab Elemen .
- 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 yang Disarankan: Skrip Pengguna Greasemonkey dan Tampermonkey Top 25
- 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 . Menu Pengembang Web sekarang harus 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 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 )
Web Console: 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: Debugger JavaScript memungkinkan Anda menentukan dan memperbaiki cacat dengan mengatur 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)
Style Editor: 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: Mencantumkan setiap permintaan jaringan yang diprakarsai oleh browser bersama dengan metode, domain asal, jenis, ukuran, dan waktu yang terkait. Pintasan keyboard: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Toolbar Pengembang: Membuka interpreter baris perintah interaktif. Masukkan bantuan ke 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 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 berbagai 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 : Memungkinkan Anda menulis, mengedit, mengintegrasikan, dan mengeksekusi cuplikan kode JavaScript dari jendela Firefox pop-out. Pintasan keyboard: Mac OS X, Windows ( SHIFT + F4 )
Sumber Laman: Alat pengembang berbasis peramban asli, opsi ini hanya menampilkan kode sumber yang tersedia untuk halaman aktif. Pintasan keyboard: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Dapatkan Lebih Banyak Alat: Buka koleksi Toolbox Pengembang Web di situs pengaya resmi Mozilla , yang menampilkan sekitar selusin ekstensi populer seperti Firebug dan Greasemonkey.
Microsoft Edge / Internet Explorer
Umumnya disebut sebagai Alat Pengembang F12 , 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 yang sangat berguna dari monitor, debugger, emulator, dan kompiler on-the-fly.
- Klik pada menu Tindakan lainnya , diwakili oleh tiga titik dan terletak di sudut kanan atas jendela browser. Ketika menu drop-down muncul, pilih opsi yang berlabel F12 Developer Tools . Seperti yang sudah saya sebutkan, Anda juga dapat mengakses alat melalui pintasan keyboard F12 .
- 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)
Konsol: Memberikan kemampuan untuk mengirimkan informasi debug termasuk penghitung, pengatur waktu, pelacakan, dan pesan khusus melalui API terpadu. 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 mengatur breakpoint dan debug kode Anda saat dijalankan, baris demi baris jika perlu. Pintasan keyboard: (CTRL + 3)
Jaringan: Mencantumkan 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)
Memori: 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: Menampilkan 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 Konsol saat berada di dalam salah satu alat lainnya, klik tombol persegi dengan braket kanan 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 asalnya 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 pada 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 (,)
- Antarmuka Preferensi Safari sekarang harus ditampilkan, overlay jendela browser Anda. Klik pada ikon Advanced , yang terletak di ujung kanan jauh dari header.
- Preferensi lanjutan sekarang harus terlihat. Di bagian bawah layar ini ada 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 antarmuka Preferensi dengan mengklik 'x' merah yang ditemukan di sudut kiri atas.
- Anda sekarang harus melihat opsi baru di menu browser bernama Develop , yang terletak di antara Bookmarks dan Window . 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.
Masuk ke Mode Desain Responsif : Menampilkan halaman saat ini karena akan muncul di berbagai perangkat dan pada resolusi layar yang berbeda.
Tampilkan Web Inspector: Luncurkan antarmuka utama untuk alat dev devuna, biasanya ditempatkan di bagian bawah layar browser Anda dan berisi bagian-bagian berikut: Elemen , Jaringan , Sumber Daya , Jangka Waktu , Debugger , Penyimpanan , Konsol .
Tampilkan Konsol Kesalahan: Juga meluncurkan antarmuka alat dev, langsung ke tab Konsol yang menampilkan kesalahan, peringatan, dan data log lainnya yang dapat ditelusuri.
Tampilkan Sumber Halaman: Membuka tab Sumber Daya , yang menampilkan kode sumber untuk halaman aktif dikategorikan berdasarkan dokumen.
Tampilkan Sumber Daya Laman: Menjalankan fungsi yang sama dengan opsi Tampilkan Sumber Halaman .
Tampilkan Editor Snippet: Membuka jendela baru tempat Anda dapat memasukkan kode CSS dan HTML, melihat pratinjau outputnya dengan cepat.
Tampilkan Penyusun Ekstensi: Memberikan kemampuan untuk membuat atau mengedit ekstensi Safari dengan CSS, HTML, dan JavaScript.
Tampilkan Perekaman Garis Waktu: Membuka tab Garis Waktu 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 pada semua halaman Web.
Disable Styles: 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 pada disk lokal Anda, tindakan yang dibatasi secara default untuk 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 Smart Search Field: Jika diaktifkan, berikan 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 tidak aktual dan rentan.