Cara Menggunakan Alat Pengembang Chrome untuk Meningkatkan Situs WordPress Anda

Alat Pengembang Chrome (DevTools) adalah seperangkat alat pembuat web dan debug yang luar biasa untuk Google Chrome. DevTools menyediakan akses ke elemen yang membangun halaman web. Anda dapat menggunakan DevTools untuk memecahkan masalah tata letak, melihat dan memodifikasi CSS, menyetel titik henti sementara JavaScript, memeriksa kode untuk pengoptimalan, dan banyak lagi. DevTools gratis dan sudah terpasang di browser Chrome Anda. Jadi, jika Anda memiliki Chrome, maka Anda sudah memilikinya.

Pada artikel ini kita akan mendapatkan gambaran umum tentang alat-alat itu dan bagaimana menggunakannya untuk meningkatkan situs web WordPress Anda.

Membuka Alat

Ada beberapa cara untuk membuka alat:

1. Pilih menu Chrome, pilih Alat, lalu pilih Alat Pengembang.
2. Klik kanan pada elemen apa pun di layar dan pilih Inspect Element (metode pilihan saya).
3. Ctrl + Shift + I (untuk PC) | Cmd + Opt + I (untuk Mac)

Jendela DevTools

Jendela alat berisi dua panel. Keduanya berisi alat yang dapat digunakan bersama. Berikut adalah tampilan alatnya.

Yang pertama berisi 8 kelompok alat. Alat-alat tersebut antara lain:

• Elemen
• Jaringan
• Sumber
• Linimasa
• Profil
• Sumber daya
• Audit
• Menghibur

Bagian kedua berisi:

• Gaya
• dihitung
• Pendengar Acara
• Breakpoints DOM (Document Object Model)
• Properti

Ada beberapa cara berbeda untuk melihat alat. Anda dapat mengubah ukuran jendela untuk memberi ruang. Anda juga dapat memindahkan jendela ke kanan layar untuk memberi Anda layar terpisah dengan alat di satu sisi dan situs web Anda di sisi lain.

Elemen

Panel ini menunjukkan pohon DOM, yang mewakili elemen HTML halaman Anda, dan memungkinkan Anda memeriksa atau mengedit elemen apa pun. Anda dapat melihat penyesuaian CSS secara real-time.

Anda dapat membuka dan menciutkan salah satu panel agar lebih mudah dilihat dan dinavigasi dengan mengklik node (terlihat seperti panah atau segitiga). Tampilan hierarki DOM menunjukkan status pohon saat ini daripada HTML asli (misalnya, mungkin telah dimodifikasi oleh JavaScript).

Saat Anda mengarahkan mouse ke elemen dalam tampilan hierarki, elemen pada halaman web akan disorot. Ini akan menampilkan informasi seperti gaya font, ukuran gambar, dll.

Jika Anda mengklik salah satu elemen, jendela di sebelah kanan akan menampilkan CSS. Di sini Anda dapat memilih gaya dan membuat modifikasi pada font, warna, ukuran, margin, batas, padding, dll.

Di footer Anda akan melihat remah roti sehingga Anda dapat mundur jika perlu. Anda dapat mengedit salah satu elemen hanya dengan mengkliknya dan mengetik perubahan Anda. Saat Anda menekan Enter, Anda akan melihat perubahan terjadi.

Misalnya, gambar ini saat ini memiliki lebar 600 piksel. Saya dapat memilih lebar dan mengetik nilai baru dan tekan enter.

Gambar segera berubah ke ukuran baru.

Untuk mengubah gaya font, cukup pilih font dan pilih apa yang ingin Anda ubah di jendela gaya di sebelah kanan.

Anda bahkan dapat menyeret elemen di sekitar dan meletakkannya di lokasi baru untuk mengubah tata letak halaman Anda.

Saya memindahkan komentar terbaru di atas posting terbaru hanya dengan menyeret div.

Mengklik kanan memberi Anda serangkaian fitur baru. Anda dapat melihat berbagai status elemen, memodifikasi sebagai HTML, mengatur jeda, menyalin jalur CSS, dan banyak lagi. Anda juga dapat mengklik kanan dan menghapus sebuah node. Sangat mudah sehingga hampir menakutkan.

Saya telah menggunakan alat ini untuk menemukan ukuran gambar dan memeriksa cuplikan kode.

Jaringan

Panel Jaringan menunjukkan sumber daya apa dari situs web Anda yang diminta dan diunduh. Ini digambarkan secara real time. Melihat elemen mana yang membutuhkan waktu paling lama untuk diunduh memberi Anda wawasan tentang masalah apa yang harus diperbaiki untuk mengoptimalkan halaman Anda.

Anda dapat memfilter dan menampilkan berbagai tampilan dan jenis bagan seperti air terjun. Anda dapat merekam aktivitas jaringan dan dapat menyimpannya sehingga Anda dapat menganalisisnya nanti.

Anda dapat melihat detail sumber daya. Detailnya meliputi:

• HTTP request and response headers – ini menampilkan URL permintaan, metode HTTP, kode status respons, dan mencantumkan respons HTTP dan header permintaan dengan nilainya, dan parameter string kueri.
• Pratinjau sumber daya – menampilkan pratinjau untuk gambar dan sumber daya JSON.
• Respons HTTP – ini menunjukkan konten sumber daya yang tidak diformat.
• Nama dan nilai cookie – ini menunjukkan cookie yang ditransmisikan di header permintaan dan respons HTTP sumber daya, dan menghapus cookie.
• Pesan WebSocket – ini menunjukkan pesan yang dikirim atau diterima melalui koneksi WebSocket.
• Waktu jaringan sumber daya – ini menunjukkan grafik waktu yang dihabiskan untuk fase jaringan yang terlibat dalam memuat sumber daya.

Tampilan air terjun adalah cara yang bagus untuk melihat waktu yang dibutuhkan setiap elemen untuk memuat dari awal permintaan hingga byte terakhir elemen dikirimkan. Dengan melihat elemen mana yang paling memakan waktu, Anda dapat memiliki pemahaman yang lebih baik tentang di mana harus melakukan penyesuaian.

Anda dapat menyimpan data jaringan untuk analisis di masa mendatang.

Sumber

Anda dapat menggunakan panel sumber untuk melihat dan men-debug kode Anda seperti JavaScript dan skrip yang merupakan bagian dari halaman yang dimuat. Anda dapat menjeda, melanjutkan, menelusuri kode, dan menjeda pada pengecualian. Ini mencakup fitur eksekusi kode dasar sehingga Anda dapat melangkah, melangkah, keluar, dan beralih titik istirahat. Anda dapat menggunakan breakpoint untuk men-debug JavaScript, pembaruan DOM, dan panggilan jaringan. Anda juga dapat mengatur breakpoint bersyarat di mana ekspresi apa pun bisa kembali sebagai benar atau salah. Breakpoint kemudian akan menjeda kode jika kondisi terpenuhi.

Ada fitur cetak cantik yang membuat kode yang diperkecil mudah dibaca. Ini juga memudahkan untuk melihat di mana menempatkan breakpoint Anda. Jika ini tidak berfungsi seperti yang Anda butuhkan, Anda dapat menggunakan format pemetaan berbasis JSON yang disebut peta sumber. Peta sumber dibuat oleh minifier yang memiliki fitur ini di dalamnya.

Linimasa

Panel Timeline menunjukkan di mana waktu yang dihabiskan untuk pemuatan halaman dan penggunaan. Ini akan melukis dan memplot setiap peristiwa di timeline. Ini akan menunjukkan sumber daya seperti JavaScript, gaya penghitungan, dan pengecatan ulang. Anda dapat merekam peristiwa dan menganalisisnya dalam beberapa langkah. Ada tiga mode:

• Acara – daftar semua acara yang diselenggarakan menurut jenisnya. Ini menunjukkan kepada Anda tugas mana yang paling memakan waktu.
• Bingkai – ini menunjukkan pekerjaan yang harus dilakukan di setiap bingkai kinerja rendering situs web Anda. Misalnya, jika situs Anda merender pada 60 frame per detik, itu akan menunjukkan pekerjaan yang dilakukan dalam 1/60 detik. Ini termasuk memuat skrip, mengecat tata letak, menangani acara, dll. Anda dapat menggunakan ini untuk melihat aktivitas abnormal apa pun dalam pemuatan halaman.
• Memori – ini membuat grafik penggunaan memori Anda dari waktu ke waktu. Ini menunjukkan kepada Anda semua dokumen, node, dan pendengar acara yang disimpan di memori. Ini membantu dalam mencari tahu apa yang menyebabkan kebocoran memori.

Profil

Di sini Anda dapat membuat profil waktu eksekusi dan penggunaan memori halaman web dan aplikasi. Ini menunjukkan kepada Anda di mana sumber daya digunakan. Ini adalah alat yang bagus untuk mengoptimalkan kode Anda.

Ini akan merekam tiga jenis Profil:

• Kumpulkan Profil CPU JavaScript – ini menunjukkan waktu eksekusi fungsi JavaScript Anda.
• Ambil Cuplikan Heap – ini menunjukkan penggunaan memori dan distribusi objek JavaScript Anda.
• Rekam Alokasi Heap – ini mencatat alokasi objek Anda untuk menunjukkan kebocoran memori dari waktu ke waktu.

Sumber daya

Anda dapat menggunakan panel ini untuk memeriksa sumber daya. Ini akan menunjukkan kepada Anda informasi tentang IndexedDB, database SQL web, cookie cache aplikasi, penyimpanan lokal dan sesi, dan banyak lagi. Anda juga dapat memeriksa sumber daya visual Anda, seperti font, gambar, dan lembar gaya.

Tab IndexedDB memungkinkan Anda memeriksa database IndexedDB dan penyimpanan objek, serta melihat dan menghapus catatan.

Anda dapat menjalankan perintah SQL dan melihat hasilnya dalam format tabel. Saat Anda mengetik perintah, itu akan memberi Anda petunjuk untuk nama tabel, perintah, dan klausa.

Tab cookie menampilkan informasi tentang cookie yang dibuat oleh HTTP atau JavaScript. Anda dapat menghapusnya satu per satu atau dalam grup.

Chrome menyimpan sumber daya aplikasi. Tab cache aplikasi memungkinkan Anda melihat status sumber daya tersebut. Ini juga akan menunjukkan kepada Anda URL sumber daya, jenis sumber daya itu, dan ukurannya.

Lokal dan sesi panel penyimpanan memungkinkan Anda melihat, membuat, menghapus, dan mengedit pasangan kunci/nilai penyimpanan lokal dan sesi yang dibuat dengan API penyimpanan.

Audit

Panel Audit menganalisis halaman saat dimuat dan menyarankan perbaikan untuk mengoptimalkan pemuatan halaman. Ini memiliki dua audit yang memisahkan informasi menjadi dua kategori: Pemanfaatan Jaringan dan Kinerja Halaman Web. Anda dapat menjalankan kedua audit atau hanya yang Anda inginkan. Anda dapat menjalankan audit dalam status halaman saat ini atau memuat ulang halaman dan mengaudit saat dimuat.

Itu tidak masuk ke detail sebanyak Google PageSpeed ​​Insights, tetapi memberi Anda informasi yang cukup untuk memperbaiki buah yang menggantung rendah. Setelah melalui PageSpeed ​​Insights, halaman saya dalam kondisi yang layak, tetapi itu memberi saya beberapa informasi tentang situs saya yang tidak dimiliki Insights.

Menghibur

Konsol digunakan untuk debugging. Anda dapat mencatat diagnostik, memasukkan perintah, mengevaluasi JavaScript, membuat profil JavaScript, dll. Anda dapat menulis informasi ke konsol melalui baris perintah. Dengan menggunakan baris perintah, Anda dapat menggunakan fungsi untuk memilih dan memeriksa elemen di DOM, memantau peristiwa, dan menghentikan serta memulai profiler.

Mode Perangkat

Salah satu fitur favorit saya adalah Device Mode. Anda dapat mengakses ini dengan tombol kecil di sebelah kiri Elemen di menu. Mode Perangkat memungkinkan Anda memilih dari 23 perangkat seluler populer yang berbeda (Kindle Fire, beberapa iPhone, beberapa Galaksi, laptop, dll.) dan melihat bagaimana situs web Anda terlihat dan bereaksi pada perangkat itu.

Anda juga dapat menyeret layar untuk membuat ukuran layar kustom Anda sendiri. Kursor meniru ujung jari Anda sehingga layar bereaksi dengan mouse seperti halnya dengan jari Anda. Anda juga dapat membuat perangkat kustom Anda sendiri di layar pengaturan.

Anda juga dapat memilih jenis jaringan (3G, 4G, Wi-Fi, dll.) sehingga Anda dapat menganalisis tampilan dan reaksi situs melalui jaringan dan kecepatan yang berbeda.

Laci

Di bagian bawah layar Anda akan menemukan laci. Ini dapat diaktifkan atau dinonaktifkan dengan tombol >_ di sisi kanan bilah alat. Laci berisi:

• Konsol – baris perintah konsol. Ini membuat konsol tersedia saat menggunakan panel lain.
• Cari – temukan sumber apa saja. Anda dapat memilih untuk mengabaikan huruf besar-kecil dan mencari ekspresi reguler.
• Emulasi – alat dan pengaturan untuk mode perangkat. Ini mencakup fitur-fitur seperti akselerometer dan koordinat geolokasi.
• Rendering – menampilkan fitur rendering seperti fps meter, composited layered border, dll. Bagian terbaiknya adalah ini akan menunjukkan potensi kemacetan.

Sangat berguna untuk memiliki alat ini di laci karena beberapa panel tidak menyertakan akses ke alat ini.

Pikiran Akhir

Alat Pengembang Chrome (DevTools) adalah seperangkat alat pembuat web dan debug yang luar biasa untuk membantu Anda meningkatkan situs web Anda. Anda dapat dengan cepat menarik dan melepaskan elemen untuk mengubah tata letak situs Anda, memecahkan masalah kebocoran memori, memecahkan masalah pemuatan halaman, melihat situs web Anda di hampir semua perangkat seluler dan ukuran layar, dan banyak lagi. Ikhtisar ini hanya menggores permukaan betapa kuatnya alat ini. Hal terbaik tentang itu adalah itu sudah terpasang di Google Chrome sehingga Anda tidak perlu mengunduh apa pun.

Saya ingin mendengar dari Anda. Apakah Anda menggunakan Alat Pengembang Chrome? Apa fitur favorit Anda? Apa yang paling sering Anda gunakan? Apakah Anda punya tips menggunakan alat? Beritahu kami tentang hal itu di komentar.