Alat Pengembang Google Chrome untuk Non-Pengembang

Diterbitkan: 2020-12-16

Google Chrome adalah salah satu browser yang paling banyak digunakan di luar sana dengan hampir 65% pengguna di seluruh dunia. Dan ada alasan bagus untuk itu, ini berfungsi dengan baik, mendukung banyak fitur web, terintegrasi secara asli dengan semua yang disediakan Google dan mudah digunakan.

Tetapi ada lebih dari sisi pengguna. Ini dibangun dengan sangat baik untuk pengembang juga. Firefox adalah peramban hebat lainnya yang memberikan pengalaman pengembang yang luar biasa, meskipun basis penggunanya relatif kecil. Jadi karena alasan ini, kami fokus pada Chrome dan itu adalah DevTools, tetapi untungnya, UI di antara sebagian besar browser tetap sangat mirip, jadi tips di sini akan diterjemahkan dengan baik ke Firefox, Safari, Edge, dan browser lainnya.

Apa Itu Chrome DevTools?

Chrome DevTools adalah seperangkat alat pengembang web yang dibangun langsung ke dalam peramban Google Chrome. DevTools dapat membantu Anda mengedit halaman dengan cepat dan mendiagnosis masalah dengan cepat, yang pada akhirnya membantu Anda membangun situs web yang lebih baik, lebih cepat.
Halaman beranda dokumen Chrome DevTools

DevTools adalah yang digunakan sebagian besar pengembang front-end (dan seringkali back-end) untuk memeriksa bagaimana kinerja halaman web, tag HTML yang menentukannya, dan gaya yang diterapkan dalam bentuk paling dasar. Ini menyediakan banyak fitur super bermanfaat lainnya yang akan kita lihat selama mereka berfungsi dalam kasus penggunaan umum untuk non-pengembang juga.

Apa Itu Chrome DevTools

Alat dev adalah apa yang Anda lihat pada gambar di atas dengan kode di sebelah kiri dan berbagai properti di sebelah kanan. Itu adalah tampilan default yang akan Anda lihat jika Anda menekan Command + Option + C (Mac) atau Control + Shift + C (Windows, Linux, Chrome OS).

DevTools menawarkan banyak kemampuan, tetapi yang lebih penting adalah:

  • Struktur dokumen yang dihasilkan (HTML) setelah halaman dimuat dan saat memuat.
  • Apa yang CSS berlaku untuk elemen HTML tertentu serta apa yang diwarisi dari orang tua.
    Lihat ukuran viewport, ukuran elemen, paddings, margin, border, dan lainnya.
  • Kemampuan untuk mengubah semua yang ada di halaman selain dari skrip yang sedang berjalan.
  • Pergi untuk membuat perubahan pada kode yang disimpan setelah Anda menyegarkan halaman (meskipun tidak mungkin secara default)
  • Semua perubahan adalah sisi klien - artinya, apa pun yang Anda ubah, hanya Anda yang akan melihatnya sampai Anda menyegarkan halaman.
  • Jauh untuk menguji tanpa cache dan dengan simulasi kecepatan jaringan yang lebih lambat.
  • Alat untuk mengukur performa dan menilai performa halaman serta memberikan tips untuk mengatasinya.
  • Tampilkan konsol halaman dan kesalahannya, peringatan dan pesannya serta cara untuk mengeksekusi kode javascript di sana.

Ini adalah daftar yang sangat singkat, tetapi ini mencakup beberapa fitur yang lebih penting, sebagian besar akan kami bahas.

Terkait : Cara Membuat Ekstensi Chrome Pertama Anda

Mengapa Anda Membutuhkan DevTools, Apa Saja Kasus Penggunaannya?

Untuk developer sudah jelas, tapi bagaimana dengan non-developer? Nah, ada beberapa trik dan tip rapi yang akan membawa Anda lebih dekat ke status pengguna yang kuat. Seringkali pemilik situs melihat masalah di situs, mengajukan satu atau dua pertanyaan dan terkadang menerima cuplikan kode untuk "ditempelkan" guna memperbaiki masalah. Salah satu cara pengembang menguji cuplikan tersebut adalah dengan langsung menerapkannya ke alat pengembang. Ini juga merupakan cara untuk memberikan pratinjau yang bagus kepada pengembang Anda tentang bagaimana Anda ingin segala sesuatunya terlihat.

Terapkan Kode CSS

Penggunaan DevTools yang pertama dan paling umum adalah untuk mengubah dan menerapkan CSS. CSS adalah apa yang menentukan bagaimana halaman terlihat, itu estetika. Untuk melakukan ini, Anda hanya perlu menunjuk ke elemen yang ingin Anda gaya, klik kanan dan pilih "periksa"

Terapkan Kode CSS

Hal yang sama berlaku untuk sebagian besar browser lain, meskipun teks item menu mungkin sedikit berbeda. Setelah Anda melakukannya, Anda akan melihat DevTools terbuka dan langsung memilih elemen yang Anda butuhkan. Di sana, Anda akan melihat dua bagian utama dari alat pengembang. Sisi HTML dan CSS (kiri dan kanan):

Terapkan Kode CSS 2

Mungkin agak sulit untuk menemukan jalan Anda di sekitar bagian HTML, tetapi jangan khawatir, DevTools akan menyorot elemen saat Anda mengarahkannya ke panel kiri. Setelah Anda menemukan apa yang Anda butuhkan, di sebelah kanan Anda dapat menulis gaya. Sudah ada yang ditambahkan. Jadi mari kita ubah latar belakang untuk membaca dan melihat tampilannya:

Terapkan Kode CSS 3

Segera saat Anda mengetik, gaya di halaman akan diperbarui. Anda dapat menulis CSS apa pun di sini dan itu akan diterapkan seperti gaya yang sudah ada di halaman. Jika Anda menekan di dekat akhir aturan (di bawah "lebar"), itu akan mulai menambahkan gaya baru. Atau Anda dapat menuliskannya di bagian atas yang bertuliskan "element.style". Kemudian jika Anda ingin membagikan ini kepada pengembang Anda, Anda cukup memilih kode dan salin-tempel. Pro tip, ambil juga "selector" untuk gaya. Ini adalah ".RNNXgb" pada gambar di atas. Ini akan memberi tahu pengembang di elemen mana Anda menambahkan gaya.

Terkait : CSS WordPress: Panduan Dasar untuk Pemula

Pilih Warna

Hal rapi lainnya yang dapat Anda lakukan adalah mencari tahu warna apa yang sebenarnya digunakan serta menggunakan pemilih warna langsung dari DevTools untuk melihat warna lain. Cukup klik pada kotak di sebelah kode warna (di mana panah di atas menunjuk) dan itu akan membuka pemilih warna.

pilih warna

Temukan Font Apa yang Digunakan

Pengembang CSS juga menentukan font yang digunakan, ukuran font, tinggi garis, warna, berat font, dan properti terkait tipografi lainnya. Semuanya akan ditampilkan di sisi kanan. Selama tidak bersilangan, gaya yang Anda lihat diterapkan. Mari kita cari tahu font apa yang digunakan untuk pencarian di formulir Google. Klik kanan, periksa dan gulir ke bawah sampai Anda melihat font atau cukup cari di kolom "Filter" di atas di bagian kanan atas:

Temukan Font Apa yang Digunakan1

Jika Anda melanjutkan dan memperbarui font, Anda akan melihat bagaimana situs akan terlihat dengan font yang berbeda, yang mungkin ingin Anda ubah segera. Tentu saja, pengembang nantinya harus memodifikasi kode dan memperbaiki masalah apa pun yang akan dibuat oleh perubahan font, tetapi metode ini berfungsi dengan baik untuk menguji semuanya dengan cepat tanpa menetapkan lingkungan pengembangan apa pun.

Temukan Font Apa yang Digunakan 2

Berikut adalah tampilan beranda Google dengan "Georgia" ditetapkan sebagai font. Untuk mencapai ini, kami harus memperbarui lebih dari satu properti, tetapi berkat Arsitektur CSS yang baik dari pengembang Google, itu cukup mudah. Sering kali, situs yang ditulis dengan buruk mengharuskan Anda memperbarui banyak properti untuk melihat seluruh situs diperbarui.

Terkait : Cara Memilih Font Terbaik untuk Situs Web Anda

Cache, Throttle, dan Kecepatan

Apa itu cache? Sederhananya, sumber daya yang disimpan di mesin Anda untuk digunakan di masa mendatang. Sumber daya bisa berupa JS, file CSS atau gambar. Jika tidak berubah setiap kali Anda membuka halaman, tidak perlu mendownloadnya setiap saat, bukan? Jadi browser akan menyimpannya di komputer Anda untuk sementara.

Tetapi apa yang terjadi, jika ada perubahan di server dan penyiapan tidak memanfaatkan praktik terbaik untuk memperbarui sumber daya? Atau singkatnya, bahkan jika pengembang mengubah basis kode, Anda masih melihat gaya lama. Nah, selanjutnya Anda bisa menghentikan cache dan melakukan "hard refresh".

Buka alat pengembang dan arahkan ke tab "Jaringan". Kemudian klik "nonaktifkan cache" dan lakukan "pembaruan paksa":

Cache Throttle dan Kecepatan

Sekarang, saat Anda menjelajahi halaman dengan DevTools terbuka, tidak akan ada sumber daya yang di-cache dari browser Anda. Halaman akan dimuat lebih lambat karena sumber daya dimuat setiap saat, tetapi Anda akan melihat perubahannya. Umumnya pengembang tetap mengaktifkan "Disable Cache" secara default dan hanya menonaktifkannya saat menguji interaksi pengguna yang sebenarnya ketika waktu muat penting.

.Cache, Throttle dan Kecepatan 1

Pada tab yang sama setelah Anda menyegarkan sekali Anda juga akan melihat pengukuran pada kecepatan dan berat halaman. Berapa lama sampai "Load" dipicu (saat skrip lain dilampirkan untuk melakukan lebih banyak pekerjaan), berapa banyak file yang diminta (31 permintaan di atas, jumlah yang cukup bagus), berapa banyak yang telah diunduh dan sebagainya. Sederhana saja, semakin rendah semakin baik untuk setiap nilai. Permintaan apa pun di atas 100-150 dan Anda akan mulai melihat masalah kecepatan yang besar.

DevTools juga menyediakan simulasi koneksi lambat. Fitur yang sangat membantu untuk melihat bagaimana situs Anda akan bekerja pada jaringan yang lebih lambat seperti 3G. Untuk menyalakannya, cukup ubah nilai di sebelah "Nonaktifkan cache" dan tekan segarkan. Saat Anda menyegarkan, Anda akan melihat setiap langkah pemuatan situs. Dengan cache dinonaktifkan, ini akan menjadi kunjungan pertama untuk penggunaan biasa.

Cache Throttle dan Kecepatan 2

Lihat perbedaan kecepatan saat kami memilih "3G Lambat" dan segarkan dibandingkan contoh pertama yang menggunakan kecepatan koneksi sebenarnya. Di sini Anda juga dapat menguji "Offline" - bagaimana situs bekerja tanpa koneksi internet. Jika kedengarannya aneh, bukan, aplikasi web progresif sudah memungkinkan situs berfungsi bahkan tanpa koneksi internet jika telah diakses setidaknya sekali oleh pengunjung.

Audit adalah fitur hebat lainnya yang menyediakan analisis kecepatan halaman yang ramah pengguna. Anda cukup menjalankannya dengan membuka tab "Audit" dan tekan "Hasilkan Laporan":

.Cache, Throttle dan Kecepatan 3
Di sebelah kanan Anda memiliki beberapa opsi untuk memutuskan apa yang akan diuji karena terkadang pengujian dapat memakan waktu beberapa saat (satu atau dua menit), jadi jika Anda menjalankannya berkali-kali, Anda dapat memilih apa yang diperlukan untuk pengujian saat ini. . Berikut adalah contoh hasil dengan opsi di atas untuk layar beranda Google:

Cache, Throttle dan Kecepatan 4

Skor yang bagus! 94 sangat bagus dan menampilkan kerja bagus yang dimasukkan ke dalam halaman ini. Ingatlah bahwa ini mungkin terlihat sangat sederhana di permukaan, tetapi ada banyak sekali skrip yang berjalan di latar belakang yang tetap tersembunyi dan memperlambat situs. Ada banyak metrik lain yang diuji dan Anda dapat melakukannya di situs mana pun untuk menemukan masalah apa yang dimilikinya dan apa yang dapat ditingkatkan.

Terkait : Apa Arti Sebenarnya "Mempercepat Situs Anda" dan Bagaimana Mencapainya?

Konsol DevTools

Tampilan terakhir yang akan kita bahas adalah konsol. Mudah diakses hanya dengan menekan tombol ESC atau membuka tab "Konsol". Seperti yang diharapkan, tidak ada kesalahan, hanya beberapa peringatan yang seharusnya tidak menimbulkan terlalu banyak masalah:

Konsol DevTools

Namun, jika karena alasan tertentu setelah pembaruan terkini di situs Anda, komponen interaktif (seperti tarik-turun, menu, peta, formulir) berhenti berfungsi, Anda selalu dapat melihat konsol. Mungkin ada kesalahan yang mengatakan apa alasannya.

Berikut adalah contoh seperti apa kesalahan itu:

Konsol DevTools 2

Agak ironis menggunakan halaman dokumentasi log kesalahan untuk menampilkan kesalahan, bukan? Bagaimanapun, itu melayani tujuan yang baik. Ini adalah kesalahan yang akan menghentikan beberapa fitur untuk bekerja. Anda selalu dapat membagikan informasi tersebut dengan pengembang Anda dan meminta bantuan. Log diposting langsung saat Anda berinteraksi dengan halaman, jadi jika Anda mengklik tombol dan kesalahan muncul, kemungkinan besar skrip di belakangnya mengalami masalah.

Terkait : Jalan untuk Menjadi Desainer Web yang Baik

Pemberitahuan keamanan : Bukan ide yang baik untuk menyalin-menempel kode ke konsol tanpa memahami apa fungsinya. Apalagi jika berasal dari sumber yang tidak dapat dipercaya dan digunakan pada aplikasi / website internal perusahaan Anda. Facebook telah memposting peringatan karena itu di konsol mereka:

Konsol DevTools 3

Ringkasan

DevTools adalah alat luar biasa yang membantu pengembang dan pemilik situs. Ini memberi Anda semua yang Anda butuhkan untuk men-tweak dan memodifikasi halaman. Melalui itu Anda dapat mengubah CSS, memodifikasi HTML, menghapus dan mengatur ulang elemen pada halaman, melihat laporan kecepatan dan kesalahan yang dilaporkan.

Pemilik situs dapat menggunakannya untuk memamerkan ide dan contoh kebutuhan mereka kepada pengembang yang mungkin lebih mudah dipahami daripada menulis paragraf teks. Dengan beberapa pengetahuan CSS tentang properti dasar, Anda dapat lebih mendeskripsikan kebutuhan Anda, yang akan sangat mengurangi bolak-balik dan waktu yang dihabiskan untuk perubahan baru.

Ada banyak fitur lain yang menunggu untuk digunakan, jangan takut untuk menjelajah!

Pengembang DevriX WordPress

Pengembangan, dukungan, dan inovasi jangka panjang untuk platform WordPress Anda. DevriX menyediakan kemitraan teknis untuk UKM dan perusahaan rintisan yang bergerak cepat. Kami membangun solusi WordPress dan platform skala yang menghasilkan hingga 20.000.000 tampilan halaman sebulan.

Ayo Bekerja.