Apa Itu Mode Pengembang Chrome & Apa Kegunaannya?

Apa Itu Mode Pengembang Chrome & Apa Kegunaannya?.

 Apa Itu Mode Pengembang Chrome & Apa Kegunaannya?



Tidak ada situs web yang dibangun dengan sempurna. Seperti semua produk yang dibuat oleh manusia, kesalahan kode adalah bagian dari proses. Itulah mengapa penting untuk menguji secara menyeluruh setiap situs web baru yang Anda buat untuk memastikan bahwa itu bebas dari kesalahan untuk memberikan pengalaman terbaik kepada pengguna Anda.


Anda tidak boleh menguji situs web tanpa mencoba kit DevTools Google Chrome terlebih dahulu. Mode pengembang Chrome memungkinkan Anda untuk mencoba dan menguji situs baru (atau yang sudah ada) secara menyeluruh untuk menemukan dan memperbaiki bug. Ini juga dapat memberi Anda wawasan tentang bagaimana situs lain dijalankan, termasuk melihat kode sumber.

Daftar isi


Inilah semua yang perlu Anda ketahui tentang mode pengembang browser Google Chrome, alat apa yang dimilikinya, dan cara menggunakannya secara efektif.


Apa itu Mode Pengembang Chrome?


Saat kami merujuk ke mode pengembang Chrome, kami tidak berbicara tentang mode pengembang yang sama yang akan Anda lihat di Chromebook. Yang kami maksud adalah alat pengembangan Chrome yang ekstensif (disebut Google DevTools) yang ada di dalam browser itu sendiri.


Ini adalah alat yang dirancang untuk menguji, menganalisis, dan dengan sengaja merusak (jika perlu) halaman web yang Anda muat di browser Google Chrome untuk tujuan pengujian. Pada tingkat dasar, Anda dapat menggunakan DevTools untuk melihat kode sumber sebuah situs web, memungkinkan Anda mengintip di balik layar untuk melihat bagaimana sebuah situs telah dibangun dan seberapa baik itu berjalan.


Namun, Google DevTools menawarkan lebih dari ini. Anda dapat menggunakan mode pengembang Chrome untuk mengubah halaman setelah dimuat, menjalankan perintah konsol Google Chrome untuk mengontrol dan memanipulasi halaman, serta menjalankan tes kecepatan dan jaringan untuk memantau lalu lintas web.


Anda juga dapat mengemulasi perangkat lain, termasuk sistem operasi dan resolusi layar yang berbeda, dalam mode Chrome DevTools. Ini memungkinkan Anda melihat apakah sebuah situs memiliki desain web responsif, dan di mana konten dan tata letak situs akan berubah bergantung pada resolusi atau jenis perangkat.


Meskipun alat ini ditujukan untuk pengembang atau penguji web profesional, alat ini juga berguna bagi pengguna Chrome standar untuk mengetahui cara mereka menggunakan rangkaian DevTools. Jika Anda melihat masalah dengan situs yang tidak dapat Anda selesaikan, beralih ke mode pengembang Chrome dapat membantu Anda melihat apakah masalahnya ada pada situs atau browser Anda.


Cara Mengakses Menu Google Chrome DevTools


Ada beberapa cara Anda dapat mengakses menu Google Chrome DevTools, tergantung pada alat yang ingin Anda gunakan.


Cara termudah untuk melakukannya adalah dari menu Google Chrome. Untuk melakukan ini, klik ikon menu tiga titik di kanan atas. Dari menu yang muncul, klik Alat Lainnya > Alat Pengembang.

Ini akan membuka kit DevTools di menu baru di sisi kanan tab atau jendela Chrome yang terbuka.


Anda juga dapat melakukan ini dengan menggunakan pintasan keyboard. Dari PC Windows atau Linux, buka browser Chrome dan tekan tombol F12. Anda juga dapat menekan tombol Ctrl + Alt + J atau Ctrl + Alt + I di tab atau jendela Chrome yang terbuka.


Di macOS, tekan F12 atau tekan tombol Option + Command + J atau Option + Command + I untuk membuka menu Chrome DevTools. Ini akan membuka konsol Chrome, dengan opsi untuk pindah ke alat Chrome lainnya di bagian atas menu DevTools.


Jika mau, Anda dapat melihat kode sumber untuk situs web (membuka tab Elemen menu DevTools dalam prosesnya) di halaman web mana pun yang terbuka dengan mengeklik kanan dan mengeklik opsi Inspeksi.


Menggunakan Chrome DevTools


Seperti yang telah kami singgung secara singkat, Anda dapat menggunakan kit Chrome DevTools untuk melihat kode sumber situs web di bawah tab Elemen. Ini akan memungkinkan Anda menganalisis kode di balik halaman yang Anda muat, serta melihat pesan kesalahan (menunjukkan masalah dengan cara situs dimuat) di konsol Chrome di bawah tab Konsol.


Anda juga dapat melihat berbagai sumber konten dari situs web di bawah tab Sumber. Misalnya, jika situs menggunakan jaringan pengiriman konten (CDN), media dari situs akan dicantumkan sebagai sumber yang berbeda di sini.


Mode pengembang Chrome memungkinkan Anda mengunduh konten itu secara langsung, atau melakukan analisis konten yang lebih kompleks.


Jika Anda ingin menguji kinerja situs, Anda dapat memantau dan merekam penggunaan jaringan Anda di bawah tab Jaringan. Ini akan menunjukkan kecepatan, ukuran, dan jenis permintaan jaringan yang dibuat antara browser Anda dan situs.


Misalnya, saat halaman pertama kali dimuat, situs akan memuat konten halaman itu sendiri, tetapi mungkin juga meminta data dari database pihak ketiga. Misalnya, saat Anda masuk, ini mungkin meminta database yang akan muncul sebagai permintaan jaringan di sini.


Anda dapat menganalisis ini lebih lanjut di bawah tab Performa, tempat Anda dapat merekam penggunaan browser Chrome Anda secara lebih mendalam, termasuk merekam tangkapan layar di berbagai titik. Ini akan mencatat berapa lama waktu yang dibutuhkan untuk memuat situs Anda untuk analisis lebih lanjut.


Google Chrome memiliki reputasi keras pada memori PC Anda, sehingga Anda dapat menguji penggunaan memori JavaScript situs Anda di bawah tab Memori. Profil pengujian Chrome yang berbeda dapat digunakan di sini, dengan informasi lebih lanjut tentang pengujian ini di halaman dokumentasi Chrome DevTools.


Untuk analisis lebih mendalam tentang konten situs Anda, serta penyimpanan browser apa pun yang mungkin digunakan (misalnya, untuk mencatat data), Anda dapat mencari melalui tab Aplikasi. Anda dapat melihat informasi cookie situs di sini di bawah bagian Cookie, atau menghapus penyimpanan yang digunakan dengan mengklik opsi Hapus penyimpanan.


Jika Anda khawatir tentang keamanan situs Anda, Anda dapat memeriksa seberapa baik kinerjanya di bawah tab Keamanan. Ini akan memberi Anda gambaran umum singkat tentang analisis keamanan Chrome untuk suatu halaman, termasuk apakah halaman tersebut memiliki sertifikat SSL yang benar dan tepercaya.


Jika Anda ingin membuat laporan tentang kinerja situs Anda, termasuk jika memenuhi standar pengguna biasa dan jika kinerja situs dapat memengaruhi pengoptimalan mesin telusur, Anda dapat mengeklik tab Mercusuar. Ini menawarkan pengaturan yang dapat Anda centang atau hapus centang untuk laporan Anda—klik Buat laporan untuk membuat laporan yang akan dilihat.

Ini hampir tidak menggores permukaan potensi yang dapat dibawa oleh mode pengembang Chrome ke pengembang. Jika Anda ingin mempelajari lebih lanjut, dokumentasi Chrome DevTools akan membantu Anda dengan alat dan fitur yang ditawarkan, termasuk cara membuat pengujian pengguna Anda sendiri dengannya.


Trik Google Chrome Tingkat Lanjut


Sebagian besar pengguna Chrome tidak akan pernah tahu bahwa kit Google Chrome DevTools ada di browser mereka, tetapi bagi pengguna yang kuat, ini tetap merupakan cara yang sangat berguna untuk menguji dan menganalisis situs web. Ada juga ekstensi Chrome pihak ketiga untuk pengembang web yang tersedia untuk membantu menguji situs Anda lebih lanjut.


Jika Anda membuat situs web dasar, beralih ke mode pengembang Chrome dapat membantu Anda menemukan kesalahan dengan situs Anda yang tidak langsung terlihat. Anda hanya dapat melakukan ini jika Chrome berfungsi dengan benar, jadi jika Anda mengalami masalah dengan Chrome yang mogok, Anda mungkin perlu menyetel ulang atau menginstal ulang browser Anda terlebih dahulu.


Sekian artikel tentang Apa Itu Mode Pengembang Chrome dan Apa Kegunaannya?. Baca juga artikel mengenai Apa itu Mode Pribadi LinkedIn dan Cara Melihat Profil Menggunakannya yang mungkin perlu Sobat ketahui.

Lebih baru Lebih lama