Cara Menggunakan Chrome DevTools untuk Menyelesaikan Masalah Laman Web

Cara Menggunakan Chrome DevTools untuk Menyelesaikan Masalah Laman Web

Chrome DevTools adalah aset penting bagi pembangun. Walaupun penyemak imbas lain menawarkan alat penyelesaian masalah yang cukup berguna, Chrome DevTools patut mendapat perhatian anda kerana antara muka dan popularitinya yang pelbagai fungsi.





Chrome adalah penyemak imbas yang paling popular untuk pembangun kerana rangkaian alat debugging yang kuat. Menggunakan Chrome DevTools memang mudah, tetapi anda perlu memahami cara kerjanya untuk memanfaatkannya sepenuhnya.



Cara Kerja Alat Pembangun Chrome

Chrome DevTools membolehkan anda menyelesaikan masalah di laman web melalui konsol ralatnya dan alat penyahpepijatan dan pemantauan lain. Menggunakan DevTools memperlihatkan celah frontend dan membolehkan anda memantau bagaimana laman web anda muncul di peranti mudah alih dan tablet.





Dengan DevTools, anda dapat melakukan pengeditan masa nyata pada kod laman web, seperti JavaScript, HTML, dan CSS, dan mendapatkan hasil segera dari perubahan anda.

Perubahan yang anda buat melalui DevTools tidak mempengaruhi laman web secara kekal. Mereka hanya menunjukkan hasil yang diharapkan untuk sementara waktu seolah-olah anda telah menerapkannya pada kod sumber yang sebenarnya. Ini membolehkan anda mencari cara agar laman web anda dimuat dengan lebih pantas dan menjadikannya lebih mudah untuk menyelesaikan masalah.



Cara Mengakses Chrome DevTools

Anda boleh mengakses Chrome DevTools dengan beberapa cara. Untuk membuka alat pembangun dengan kaedah pintasan pada Mac OS, tekan Cmd + Opt + I . Sekiranya anda menggunakan OS Windows, tekan Ctrl + Shift + I kekunci pada papan kekunci anda.

Sebagai alternatif, anda boleh mengakses alat pembangun Chrome dengan mengklik tiga titik di sudut kanan atas skrin. Kepala ke Lebih banyak alat dan pilih Alat pembangun . Pilihan lain adalah klik kanan pada laman web dan klik pada Periksa pilihan.



Menggunakan Alat Pembangun Chrome untuk Diagnosis Laman Web

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

Lihat Bagaimana Paparan Laman Web Anda di Telefon Pintar

Sebaik sahaja anda menukar penyemak imbas Chrome anda ke mod pembangun, ia menjadikan versi halaman web anda yang berukuran separuh. Walau bagaimanapun, ini tidak akan memberi anda gambaran sebenar mengenai bagaimana rupa telefon pintar atau tablet.



Syukurlah, selain menetapkan ukuran layar halaman web, Chrome DevTools juga membolehkan anda beralih antara jenis dan versi skrin mudah alih yang berbeza.

Untuk mengakses pilihan tersebut, beralih pada Periksa mod. Seterusnya, klik pada Responsif lungsur turun di sudut kiri atas DevTools dan pilih peranti mudah alih pilihan anda. Halaman web kemudian dibuat dan disesuaikan agar sesuai dengan saiz peranti mudah alih yang anda pilih.

cara membuat pdf mac lebih kecil

Akses Fail Sumber dari Halaman Web

Anda dapat mengakses fail yang membentuk laman web melalui Chrome DevTools. Untuk mengakses fail ini, klik pada Sumber pilihan di bahagian atas menu DevTools. Ini memperlihatkan sistem fail laman web dan juga memberi anda penyuntingan.

Anda juga dapat mencari fail sumber, yang dapat membantu ketika anda berurusan dengan laman web yang mempunyai banyak sumber. Untuk mencari fail sumber melalui DevTools, klik pada Cari pilihan tepat di atas konsol.

Walau bagaimanapun, jika anda tidak dapat mencari Cari pilihan, alternatif yang lebih baik adalah menggunakan pintasan papan kekunci. Pada Mac OS, tekan Cmd + Opt + F kunci untuk mencari fail sumber. Sekiranya anda menggunakan OS Windows, tekan Ctrl + Shift + F kunci untuk mengakses bar carian fail sumber.

Lakukan Suntingan Langsung ke Halaman Web

Salah satu tujuan utama penggunaan DevTools adalah melaksanakan pengeditan palsu segera elemen di laman web . Sebaik sahaja anda beralih ke alat pembangun, anda boleh mengedit kandungan HTML laman web dengan mengklik Unsur pilihan. Kemudian, klik kanan pada mana-mana titik yang anda mahu gunakan perubahan dalam penyunting kod dan pilih Edit sebagai HTML .

Untuk mengedit sifat CSS yang tidak sebaris, pilih Sumber . Seterusnya, pilih fail CSS yang ingin anda edit. Letakkan kursor anda pada pilihan anda di dalam konsol kod untuk melakukan suntingan secara langsung. Melakukan ini memberi anda maklum balas segera mengenai perubahan gaya yang anda terapkan ke laman web.

Perhatikan bahawa semasa anda mengedit halaman melalui DevTools, memuatkan semula halaman pada penyemak imbas anda akan mengembalikannya ke bentuk asalnya, dan pengeditan hanya dapat dilihat oleh anda. Penyuntingan melalui DevTools tidak mempengaruhi kelancaran dan penggunaan laman web itu untuk pengguna lain.

Debug Kod JavaScript dengan Konsol DevTools

Salah satu kaedah terbaik untuk men-debug JavaScript adalah menggunakan alat pembangun Chrome. Ini memberi anda laporan langsung mengenai skrip yang tidak sah serta lokasi bug yang tepat.

Adalah amalan yang baik untuk selalu membuka DevTools semasa merancang laman web dengan JavaScript. Sebagai contoh, menjalankan konsol.log () perintah JavaScript pada sekumpulan arahan memaparkan hasil log itu di konsol DevTools jika program berjaya dijalankan.

Secara lalai, konsol melaporkan sebarang masalah JavaScript di laman web anda. Anda boleh menemui konsol di bahagian bawah DevTools atau mengaksesnya dengan mengklik pada Konsol pilihan di bahagian atas tetingkap Chrome DevTools.

Pantau Pemuatan Sumber dari Pangkalan Data

Selain men-debug JavaScript, konsol juga dapat memberi anda perincian sumber yang tidak dimuat dengan betul dari pangkalan data laman web.

Walaupun ini bukan selalu merupakan kaedah terbaik untuk menyelesaikan masalah backend, ini masih memberitahu anda sumber mana yang akan dikembalikan 404 ralat setelah menjalankan pertanyaan pangkalan data elemen tersebut.

Berkaitan: Kesalahan Umum Laman Web dan Apa Artinya

Tukar Orientasi Alat Pembangun Chrome

Untuk mengubah kedudukan alat pembangun Chrome, klik pada tiga titik menu di dalam DevTools (bukan yang utama pada penyemak imbas). Kemudian pilih kedudukan pilihan anda dari Sisi dok pilihan.

Pasang Sambungan DevTools Chrome

Anda juga boleh memasang sambungan bahasa atau kerangka khusus yang berfungsi dengan Chrome DevTools. Memasang pelanjutan ini membolehkan anda menyahpepijat halaman web anda dengan lebih berkesan.

Anda boleh mengakses senarai sambungan yang tersedia untuk Chrome DevTools di Chrome Sambungan DevTools Pilihan galeri.

Periksa Masalah Keselamatan di Laman Web

Chrome DevTools membolehkan anda menilai seberapa selamat laman web anda, berdasarkan parameter seperti ketersediaan sijil keselamatan web dan betapa selamatnya hubungan itu antara lain. Untuk memeriksa sama ada laman web anda selamat, klik pada Keselamatan pilihan di bahagian atas DevTools.

The Keselamatan tab memberi anda gambaran keseluruhan mengenai butiran keselamatan laman web anda dan memberitahu anda sebarang kemungkinan ancaman.

Audit Laman Web Anda

Chrome DevTools mempunyai fitur yang memungkinkan anda memeriksa keseluruhan prestasi laman web anda berdasarkan parameter tertentu.

Untuk mengakses ciri tersebut, pilih Rumah Api pilihan di bahagian atas tetingkap DevTools. Seterusnya, pilih parameter yang ingin anda periksa, kemudian tandakan salah satu Mudah alih atau Desktop pilihan untuk melihat prestasi laman web anda pada platform yang berbeza.

Seterusnya, klik pada Hasilkan laporan untuk menjalankan analisis laman web anda berdasarkan parameter yang anda pilih sebelumnya.

Anda juga dapat menilai prestasi masa berjalan atau memuatkan laman web dengan mengklik pada Persembahan pilihan. Untuk menjalankan ujian, klik pada ikon di sebelah Klik butang rakam pilihan untuk melakukan analisis jangka masa. Sebagai alternatif, klik pada butang tambah nilai di bawahnya untuk menilai prestasi masa muat. Klik pada Berhenti untuk menghentikan penganalisis dan memaparkan hasilnya.

Manfaatkan Chrome DevTools

Bergantung pada perkara yang anda perlukan, Chrome DevTools membolehkan anda melakukan lebih daripada sekadar penyahpepijatan laman web yang mudah. Syukurlah, DevTools mudah digunakan untuk pengaturcara dari semua peringkat kemahiran. Anda bahkan boleh mempelajari beberapa asas pengembangan frontend laman web dengan mencari kod sumber laman web yang anda lawati.

cara mengambil audio dari video

Anda mungkin juga menemui beberapa pilihan lain yang tidak kami bincangkan dalam artikel ini. Jadi, jangan ragu untuk bermain-main dengan ciri-ciri yang ada. Selain itu, mengubah ciri ini tidak merosakkan laman web sedikit pun.

Berkongsi Berkongsi Tweet E-mel Cara Menggunakan OS Chrome pada Raspberry Pi

Tidak dapat membeli Chromebook? Mencari alternatif untuk Raspbian? Inilah cara memasang versi Chrome OS pada Raspberry Pi anda.

Baca Seterusnya Topik-topik yang berkaitan
  • Internet
  • Pengaturcaraan
  • HTML
  • Pembangunan Web
  • JavaScript
  • Google Chrome
Mengenai Pengarang Idisou Omisola(94 Artikel Diterbitkan)

Idowu meminati apa sahaja teknologi pintar dan produktiviti. Pada masa lapang, dia bermain-main dengan pengekodan dan beralih ke papan catur ketika dia bosan, tetapi dia juga suka melepaskan diri dari rutin sekali-sekala. Kesungguhannya untuk menunjukkan kepada orang-orang tentang teknologi moden mendorongnya untuk menulis lebih banyak lagi.

Lagi Dari Idowu Omisola

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan