Mengapa Anda Harus Mulai Menggunakan Alat Pengembang Chrome Sekarang

Memiliki seperangkat alat praktis yang bagus untuk membantu menguji situs web Anda sangat penting bagi pengembang. Di mana tempat terbaik untuk menyimpannya? Di browser Anda, tentu saja! Peramban web populer Google, Chrome, memiliki alat pengembang bawaan. Ini adalah seperangkat alat yang dibuat untuk pembuatan web dan debugging. Alat Pengembang Chrome (dikenal sebagai DevTools) memberi pengembang akses ke cara kerja internal browser web dan aplikasi web.

Menggunakan Chrome DevTools Anda dapat mengetahui gaya yang digunakan, ukuran gambar, skrip yang digunakan, dll. Anda dapat men-debug dan mengetahui kesalahan apa yang ada pada halaman. Anda bahkan dapat mengaktifkan atau menonaktifkan gaya, atau mengubahnya sepenuhnya, untuk melihat efeknya pada situs web Anda.

Ada di Peramban Anda

Alatnya sendiri mudah didapat. Berikut adalah tiga cara untuk membukanya:

1. Di browser Chrome Anda – pilih menu Chrome (tiga bilah horizontal di sudut kanan atas), pilih Alat Lainnya, lalu pilih Alat Pengembang.
2. Klik kanan pada elemen di halaman mana pun dan pilih Inspect Element.
3. Pada keyboard Anda di Windows pilih ctrl + shift + i. Di Mac pilih cmnd + opt + i.

Semua ini akan membuka jendela DevTools di bagian bawah browser Anda.

Jendela Utama

Alat muncul di bagian bawah layar Anda. Anda akan melihat jendela utama dengan menu di bagian atas dan elemen sebagai tampilan default, dan jendela sekunder dengan menu, dan gaya sebagai pilihan default.

Alat-alat tersebut dikelompokkan ke dalam tugas-tugas. Ada 8 grup yang mencakup Elemen, Jaringan, Sumber, Garis Waktu, Profil, Sumber Daya, Audit, dan Konsol.

Elemen

Di sini Anda dapat melihat struktur HTML halaman Anda. Ada sakelar di bagian bawah untuk HTML dan Badan. Anda dapat mengarahkan mouse ke salah satu elemen untuk melihat informasi terperinci tentang masing-masing elemen.

Anda dapat mengklik panah untuk membuka dan menutup konten elemen utama agar lebih mudah dibaca. Jadi Anda dapat menutup badan dan hanya membaca tajuk, memilih elemen di dalam tajuk untuk dilihat, dll. Ini adalah alat yang sangat baik untuk melihat HTML situs web Anda.

Jaringan

Ini menunjukkan setiap elemen yang akan dimuat, bagaimana mereka dimuat, jenis file itu, ukuran file, waktu yang diperlukan untuk memuat, dan garis waktu kapan akan dimuat dalam urutan pemuatan halaman. Ini dapat digunakan untuk memecahkan masalah jaringan seperti kemacetan dalam pemuatan halaman dan permintaan buruk.

Misalnya, jika Anda melihat banyak kesalahan 404, Anda dapat melihat lebih dekat untuk melihat apa masalahnya. Mungkin Anda telah menurunkan halaman yang masih mendapatkan banyak lalu lintas, atau mungkin seseorang salah mengetik tautan.

Sumber

Ini menunjukkan skrip dan cuplikan yang akan dimuat dan dari mana asalnya.

Linimasa

Ini menunjukkan kepada Anda waktu untuk memuat setiap sumber daya. Anda dapat melihat apa yang paling memakan waktu, yang membantu mengurangi pemuatan halaman Anda.

Profil

Ini menunjukkan penggunaan memori setiap elemen. Ini bagus untuk menunjukkan kepada Anda kode mana yang perlu dioptimalkan.

Sumber daya

Di sini Anda dapat memeriksa sumber daya yang dimuat. Anda dapat melihat cookie, cache aplikasi, database HTML5, dll.

Audit

Ini memungkinkan Anda menganalisis halaman. Anda dapat mengaudit setelah dimuat atau saat dimuat.

Audit Keadaan Sekarang

Pertama, saya memilih untuk menjalankan Audit Present State. Ini menjalankan audit saat situs saat ini berada, sudah dimuat ke browser saya.

Ini memberi saya daftar item, mewarnainya sesuai dengan kepentingannya, dan menunjukkan jumlah masalah. Saya dapat melihat lebih detail dengan mengkliknya.

Saya telah memperluas beberapa dari mereka untuk melihat informasi rinci tentang masing-masing. Ini memberi saya informasi tentang Pemanfaatan Jaringan dan Kinerja Halaman Web. Ini memberi saya saran tentang cara memperbaiki masalah dan memprioritaskannya untuk saya.

Muat Ulang Halaman dan Audit Saat Muat

Saya kembali dan memilih untuk mengaudit saat dimuat. Hasilnya serupa, tetapi seperti yang diharapkan, ada lebih banyak masalah saat memuat halaman daripada setelah halaman dimuat.

Di antara keduanya saya mendapatkan informasi tentang JavaScript, cache browser, cache proxy, ukuran cookie, menyajikan konten dari domain tanpa cookie, dimensi gambar, urutan dan gaya skrip, menempatkan CSS di kepala dokumen, menghapus riles CSS yang tidak digunakan, dan menggunakan CSS normal nama properti. Tentu saja hasilnya akan berbeda-beda tergantung situsnya.

Informasinya tidak sedetail PageSpeed ​​Insights, tetapi cukup untuk membantu saya memulai dan saya suka kemudahannya karena disertakan dalam alat yang saya gunakan. Saya sarankan untuk menjalankannya setiap kali Anda membuat perubahan pada situs Anda. Terlalu mudah digunakan untuk tidak menggunakannya.

Menghibur

Ini adalah Konsol JavaScript tempat Anda dapat menguji halaman dan aplikasi. Anda dapat men-debug skrip Anda dan mendapatkan saran tentang perubahan apa yang harus dilakukan. Konsol memungkinkan Anda memasukkan perintah sehingga Anda dapat berinteraksi dengan halaman web Anda. Ini akan mencatat info diagnostik untuk membantu Anda dengan debugging. Anda dapat menggunakannya di layar utama atau di laci (jendela di bawah layar utama).

Anda dapat menggunakan Console atau Command Line API. Anda dapat menulis ke Konsol, memformat elemen dan keluaran gaya, mengukur waktu eksekusi atau pemuatan, melihat dan menandai garis waktu, menghitung pernyataan, menyetel breakpoint, mengevaluasi ekspresi, memantau peristiwa, menumpuk pesan, melihat kesalahan dan peringatan, dan banyak lagi lagi.

Ini adalah alat yang ampuh, tetapi ada banyak cara untuk menggunakannya. Untungnya bahan referensi yang baik dilengkapi dengan contoh tentang cara menggunakannya.

Debug

Memilih ctrl + p di Windows, atau cmd + p di Mac, akan membuka layar debug tempat Anda dapat memilih skrip yang akan di-debug. Alat ini memberi Anda fitur debugging yang Anda harapkan untuk dilihat di lingkungan pemrograman apa pun: jeda, lanjutkan, masuk, melangkahi, titik henti sementara, kode yang diformat, dll.

File bantuan terperinci disediakan untuk memandu Anda menggunakan mode debugging.

Jendela Gaya CSS

Kotak di paling kanan berisi semua informasi CSS. Saat Anda memilih elemen, jendela Styles di sebelah kanan menampilkan info gaya untuk elemen tersebut. Bagian ini menarik. Ada lima kelompok alat: Styles, Computed, Event Listeners, DOM Breakpoints, dan Properties.

Gaya

Anda dapat memilih gaya dan mengubahnya secara manual di jendela ini. Misalnya, Anda dapat memilih ukuran dan warna font.

Pilih ukuran font dan masukkan ukuran Anda sendiri. Ketika Anda melakukannya, ukuran font font yang Anda pilih akan berubah di layar.

Membuat seleksi pada warna font akan membuka pemilih warna. Pilih warna yang Anda inginkan dan tekan enter. Anda akan melihat font yang Anda pilih berubah menjadi warna baru. Ini adalah cara yang bagus untuk mencoba gaya, ukuran, dan warna font baru.

Jika Anda mengklik site.CSS di sebelah kanan Anda akan membuka jendela yang lebih besar dengan informasi secara rinci. Di sini, Anda dapat mengetikkan nama font yang ingin Anda gunakan, menentukan warna, menentukan ukuran, dll.

dihitung

Ini menunjukkan ukuran kotak dalam piksel. Ini memiliki padding, perbatasan, dan margin.

Mode Perangkat

Ada tombol kecil di sebelah kiri antara kaca pembesar dan menu Elemen yang terlihat seperti perangkat seluler. Tebak apa? Ini adalah perangkat seluler. Ini adalah mode emulasi perangkat. Ini adalah cara yang bagus untuk melihat seberapa responsif situs Anda.

Perangkat

Apa yang lebih keren dari sekadar perangkat seluler adalah Anda dapat memilih perangkat seluler mana dan kemudian Anda dapat melihat situs web seolah-olah Anda sedang melihatnya di perangkat itu. Sekarang, ITU luar biasa!

Saya memilih Amazon Kindle Fire HDX 7” dan layarnya meniru perangkat itu sehingga saya bisa melihat seperti apa situs itu di layarnya dan bagaimana sentuhannya akan bekerja.

Anda dapat mengubah orientasi layar dengan menekan tombol Swap Dimensions.

Ini adalah cara yang bagus untuk melihat seperti apa tampilan situs WordPress Anda di layar seluler yang lebih kecil. Saya memilih iPhone 6 dan ukuran layar berubah agar sesuai dengan ukuran dan resolusi layar baru. Ada banyak perangkat untuk dilihat. Anda juga dapat melihat ukuran khusus dengan menyeret sisi untuk menambah atau mengurangi ukuran.

Jaringan

Ada juga pilihan untuk memilih jenis jaringan yang Anda gunakan untuk mengakses situs. Ini memungkinkan Anda untuk melihat kinerja situs web Anda melalui berbagai jenis dan kecepatan koneksi. Anda dapat menguji beberapa kecepatan mulai dari GPRS 50 Kbps hingga WiFi 30 Mbps, dan beberapa kecepatan koneksi 2G, 3G, dan 4G. Ini adalah cara terbaik untuk menguji kecepatan situs web Anda melalui jaringan karies dan mendapatkan wawasan tentang apa yang harus ditingkatkan.

Pertanyaan Media

Ada tombol kecil di kiri atas yang terlihat seperti anak tangga. Ini membuka bagian layar lain di atas jendela situs web yang menunjukkan lebar piksel berbeda. Mengkliknya akan membawa layar ponsel ke ukuran itu. Mereka menunjukkan kepada Anda:

• Kueri yang menargetkan lebar maksimum
• Lebar dalam rentang
• Kueri yang menargetkan lebar minimum

Ini membantu Anda menyesuaikan gaya dan konten media untuk desain yang sepenuhnya responsif.

Laci

Ada bagian alat lain di bawah layar utama yang disebut laci. Ini menambahkan:

Konsol – ini adalah konsol yang sama seperti di jendela utama. Dengan menempatkannya di sini Anda dapat menggunakannya bersama dengan salah satu alat di jendela utama.

Pencarian – memungkinkan Anda untuk mencari sumber.

Emulasi – Anda dapat memilih Perangkat (Di sini Anda dapat memilih model, resolusi, jaringan, dll.), Media, Jaringan (throughput dan agen pengguna), dan Sensor (layar sentuh, akselerometer, dll.).

Rendering – tampilkan cat persegi panjang, batas lapisan komposit, pengukur FPS, pengecatan ulang halaman berkelanjutan, dan potensi kemacetan gulir.

Pengaturan dan Lainnya

Bilah menu di sebelah kanan akan memberi tahu Anda jumlah kesalahan dan peringatan di situs Anda, memungkinkan Anda menyembunyikan laci di bagian bawah, memungkinkan Anda menyesuaikan pengaturan, dan memasang alat ke jendela utama (membuat layar terpisah antara situs web Anda dan DevTools).

Ada banyak sekali pengaturan yang dapat Anda sesuaikan sehingga Anda dapat memodifikasi alat agar berfungsi sesuai kebutuhan.

Chrome Canary

Jika Anda benar-benar ingin berada di ujung tombak Google Chrome DevTools, cobalah Chrome Canary. Ikonnya berwarna kuning. Mengerti? Itu membutuhkan jubah. Ini yang terbaru dan terbaik dari Google. Ini dirancang untuk pengembang dan memiliki versi terbaru dari DevTools. Ini belum cukup stabil untuk penggunaan umum, jadi mungkin akan merusak sistem Anda.

Jika Anda cenderung melakukan kerusakan serius pada lingkungan Anda saat sistem Anda rusak, lihat ikon Chrome Canary pada gambar di atas dan jangan berkedip selama lima detik.

Sekarang Anda dapat melanjutkan ke akhir. Anda tidak akan mengingat bagian ini.

Membungkus

Alat Pengembang Google Chrome adalah alat yang hebat untuk memecahkan masalah, meningkatkan kinerja jaringan, melihat situs Anda pada ukuran dan resolusi layar yang berbeda, dan mendapatkan informasi di mana situs Anda perlu ditingkatkan. Ada banyak fitur dan Anda dapat menambahkan lebih banyak lagi melalui ekstensi. Alat-alat ini saja merupakan alasan bagus untuk menginstal Google Chrome, meskipun itu bukan browser utama Anda. Meluangkan waktu untuk mempelajari fitur akan terbayar dan situs Anda serta pengunjung akan berterima kasih untuk itu.

Giliranmu! Apakah Anda menggunakan Alat Pengembang Chrome? Apakah saya meninggalkan fitur favorit Anda? Apakah Anda memiliki sesuatu untuk ditambahkan? Saya ingin mendengarnya di komentar di bawah!

Gambar thumbnail artikel oleh Anikei / shutterstock.com