Cara Menggunakan Chrome DevTools untuk Memecahkan Masalah Situs Web

Chrome DevTools adalah aset penting bagi pengembang. Sementara browser lain menawarkan alat pemecahan masalah yang cukup berguna, Chrome DevTools patut Anda perhatikan karena antarmuka dan popularitasnya yang multi-fungsi.

Chrome adalah browser paling populer untuk pengembang karena rangkaian alat debugging yang kuat. Menggunakan Chrome DevTools itu mudah, tetapi Anda perlu memahami cara kerjanya untuk memaksimalkannya.

Cara Kerja Alat Pengembang Chrome

Chrome DevTools memungkinkan Anda memecahkan masalah di situs web melalui konsol kesalahannya dan alat debugging dan pemantauan lainnya. Menggunakan DevTools memperlihatkan celah frontend dan memungkinkan Anda memantau bagaimana situs web Anda muncul di perangkat seluler dan tablet.

Dengan DevTools, Anda dapat melakukan pengeditan waktu nyata pada kode situs web, seperti JavaScript, HTML, dan CSS, dan mendapatkan hasil instan dari perubahan Anda.

Perubahan yang Anda buat melalui DevTools tidak memengaruhi situs web secara permanen. Mereka hanya sementara menampilkan hasil yang diharapkan seolah-olah Anda telah menerapkannya ke kode sumber yang sebenarnya. Ini memungkinkan Anda mencari cara untuk membuat situs web Anda memuat lebih cepat dan membuatnya lebih mudah untuk mengatasi bug.

Cara Mengakses Chrome DevTools

Anda dapat mengakses Chrome DevTools dengan beberapa cara. Untuk membuka alat pengembang dengan metode pintasan di Mac OS, tekan Cmd + Opt + I . Jika Anda menggunakan OS Windows, tekan tombol Ctrl + Shift + I tombol pada keyboard Anda.

Atau, Anda dapat mengakses alat pengembang Chrome dengan mengeklik tiga titik di sudut kanan atas layar. Menuju ke Lebih banyak alat dan pilih Alat pengembang . Pilihan lainnya adalah klik kanan pada halaman web dan klik pada Memeriksa pilihan.

Menggunakan Alat Pengembang Chrome untuk Diagnosis Situs Web

Chrome DevTools menawarkan beberapa cara untuk mengubah dan memecahkan masalah halaman web. Mari kita lihat beberapa cara DevTools dapat membantu Anda.

Lihat Bagaimana Tampilan Situs Web Anda di Smartphone

Setelah Anda mengalihkan browser Chrome ke mode pengembang, itu membuat versi setengah ukuran halaman web Anda. Namun, ini tidak akan memberi Anda gambaran nyata tentang seperti apa tampilannya di ponsel cerdas atau tablet.

Untungnya, selain mengatur ukuran layar halaman web, Chrome DevTools juga memungkinkan Anda beralih di antara berbagai jenis dan versi layar seluler.

Untuk mengakses opsi itu, aktifkan Memeriksa mode. Selanjutnya, klik pada Responsif drop-down di sudut kiri atas DevTools dan pilih perangkat seluler pilihan Anda. Halaman web kemudian merender dan menyesuaikan agar sesuai dengan ukuran perangkat seluler yang Anda pilih.

cara screenshot snapchat story tanpa sepengetahuan mereka

Akses File Sumber Halaman Web

Anda dapat mengakses file yang membentuk halaman web melalui Chrome DevTools. Untuk mengakses file-file ini, klik pada Sumber pilihan di bagian atas menu DevTools. Ini memperlihatkan sistem file situs web dan juga memberi Anda pengeditan.

Anda juga dapat mencari file sumber, yang dapat membantu ketika Anda berurusan dengan halaman web yang memiliki banyak sumber daya. Untuk mencari file sumber melalui DevTools, klik pada Mencari pilihan tepat di atas konsol.

Namun, jika Anda tidak dapat menemukan Mencari opsi, alternatif yang lebih baik adalah menggunakan pintasan keyboard. Di Mac OS, tekan tombol Cmd + Opt + F kunci untuk mencari file sumber. Jika Anda menggunakan OS Windows, tekan tombol Ctrl + Shift + F untuk mengakses bilah pencarian file sumber.

Lakukan Pengeditan Langsung ke Halaman Web

Salah satu tujuan utama menggunakan DevTools adalah untuk melakukan edit palsu instan dari elemen di halaman web . Setelah beralih ke alat pengembang, Anda dapat mengedit konten HTML situs web dengan mengeklik Elemen pilihan. Kemudian, klik kanan pada titik mana pun yang ingin Anda terapkan perubahannya di dalam editor kode dan pilih Edit sebagai HTML .

Untuk mengedit properti CSS yang tidak sebaris, pilih Sumber . Selanjutnya, pilih file CSS yang ingin Anda edit. Tempatkan kursor Anda pada baris pilihan Anda di dalam konsol kode untuk melakukan pengeditan langsung. Melakukan hal ini memberi Anda umpan balik instan tentang perubahan gaya apa pun yang Anda terapkan ke halaman web.

Perhatikan bahwa saat Anda mengedit halaman melalui DevTools, memuat ulang halaman di browser Anda akan mengembalikannya ke bentuk aslinya, dan hasil edit hanya dapat dilihat oleh Anda. Mengedit melalui DevTools tidak memengaruhi kelancaran atau penggunaan situs web itu untuk pengguna lain.

Debug Kode JavaScript dengan Konsol DevTools

Salah satu cara terbaik untuk men-debug JavaScript adalah menggunakan alat pengembang Chrome. Ini memberi Anda laporan langsung tentang skrip yang tidak valid serta lokasi bug yang tepat.

Ini adalah praktik yang baik untuk selalu membuka DevTools saat mendesain situs web dengan JavaScript. Misalnya, menjalankan konsol.log() perintah JavaScript pada sekumpulan instruksi menampilkan hasil log tersebut di konsol DevTools jika program berhasil dijalankan.

Secara default, konsol melaporkan masalah JavaScript apa pun di situs web Anda. Anda dapat menemukan konsol di bagian bawah DevTools atau mengaksesnya dengan mengklik Menghibur opsi di bagian atas jendela Chrome DevTools.

Memantau Pemuatan Sumber Daya dari Database

Selain men-debug JavaScript, konsol juga dapat memberi Anda detail sumber daya yang tidak dimuat dengan benar dari database situs web.

Meskipun ini tidak selalu merupakan cara terbaik untuk men-debug masalah backend, ini masih memberi tahu Anda sumber daya mana yang kembali 404 kesalahan setelah menjalankan kueri basis data dari elemen-elemen itu.

Terkait: Kesalahan Situs Web Umum dan Apa Artinya

Ganti Orientasi Alat Pengembang Chrome

Untuk mengubah posisi alat pengembang Chrome, klik tiga titik menu di dalam DevTools (bukan yang utama di browser). Kemudian pilih posisi pilihan Anda dari Sisi dermaga pilihan.

Instal Ekstensi Chrome DevTools

Anda juga dapat memasang ekstensi khusus bahasa atau kerangka kerja yang berfungsi dengan Chrome DevTools. Memasang ekstensi ini memungkinkan Anda men-debug laman web dengan lebih efisien.

Anda dapat mengakses daftar ekstensi yang tersedia untuk Chrome DevTools di Chrome Ekstensi DevTools Unggulan galeri.

Periksa Masalah Keamanan di Situs Web

Chrome DevTools memungkinkan Anda menilai seberapa aman situs web Anda, berdasarkan parameter seperti ketersediaan sertifikat keamanan web dan seberapa aman koneksi, antara lain. Untuk memeriksa apakah situs web Anda aman, klik Keamanan opsi di bagian atas DevTools.

NS Keamanan tab memberi Anda ikhtisar tentang detail keamanan situs web Anda dan memberi tahu Anda setiap potensi ancaman.

Audit Situs Web Anda

Chrome DevTools memiliki fitur yang memungkinkan Anda memeriksa keseluruhan kinerja situs web Anda berdasarkan parameter tertentu.

Untuk mengakses fitur tersebut, pilih Mercu suar opsi di bagian atas jendela DevTools. Selanjutnya, pilih parameter yang ingin Anda periksa, lalu centang salah satu dari Seluler atau Desktop opsi untuk melihat bagaimana kinerja halaman web Anda pada platform yang berbeda.

Selanjutnya, klik Buat laporan untuk menjalankan analisis halaman web Anda berdasarkan parameter yang Anda pilih sebelumnya.

Anda juga dapat menilai kinerja run-time atau pemuatan situs web dengan mengklik Pertunjukan pilihan. Untuk menjalankan tes, klik ikon di sebelah Klik tombol rekam pilihan untuk melakukan analisis run-time. Atau, klik tombol muat ulang di bawahnya untuk menilai kinerja waktu muat. Klik Berhenti untuk menghentikan penganalisis dan menampilkan hasilnya.

Manfaatkan Chrome DevTools

Bergantung pada kebutuhan Anda, Chrome DevTools memungkinkan Anda melakukan lebih dari sekadar debug situs web sederhana. Untungnya, DevTools mudah digunakan untuk programmer dari semua tingkat keahlian. Anda bahkan dapat mempelajari beberapa dasar pengembangan frontend situs web dengan mencari kode sumber situs web yang Anda kunjungi.

iphone vs samsung mana yang lebih baik?

Anda mungkin juga menemukan beberapa opsi lain yang tidak kami bahas di artikel ini. Jadi, jangan ragu untuk bermain-main dengan fitur yang tersedia. Selain itu, mengutak-atik fitur ini tidak membahayakan situs web sedikit pun.

Membagikan Membagikan Menciak Surel Cara Menggunakan Chrome OS di Raspberry Pi

Tidak mampu membeli Chromebook? Mencari alternatif untuk Raspbian? Berikut cara menginstal versi Chrome OS di Raspberry Pi Anda.

Baca Selanjutnya Topik-topik yang berkaitan

Internet
Pemrograman
HTML
Pengembangan web
JavaScript
Google Chrome

Tentang Penulis Idisou Omisola(94 Artikel Diterbitkan)

Idowu bersemangat tentang teknologi dan produktivitas apa pun yang cerdas. Di waktu luangnya, dia bermain-main dengan coding dan beralih ke papan catur ketika dia bosan, tetapi dia juga suka melepaskan diri dari rutinitas sesekali. Semangatnya untuk menunjukkan kepada orang-orang tentang teknologi modern memotivasinya untuk menulis lebih banyak.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan