Cakupan: Temukan JavaScript dan CSS yang tidak digunakan

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Panel Cakupan di Chrome DevTools dapat membantu Anda menemukan JavaScript yang tidak digunakan dan kode CSS. Menghapus kode yang tidak digunakan dapat mempercepat pemuatan halaman dan menghemat data seluler pengguna Anda.

Menganalisis cakupan kode.

Ringkasan

Pengiriman JavaScript atau CSS yang tidak digunakan merupakan masalah umum dalam pengembangan web. Misalnya, Anda ingin menggunakan komponen tombol Bootstrap di halaman Anda. Untuk menggunakan komponen tombol, Anda perlu menambahkan link ke Style sheet bootstrap di HTML Anda, seperti ini:

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

Lembar gaya ini tidak hanya menyertakan kode untuk komponen tombol. Ini berisi CSS untuk semua komponen Bootstrap. Tapi Anda tidak menggunakan komponen Bootstrap lainnya. Jadi laman Anda mengunduh banyak CSS yang tidak diperlukan. CSS tambahan ini menjadi masalah untuk hal berikut alasan:

  • Kode tambahan memperlambat pemuatan halaman Anda. Lihat CSS Pemblokiran Render.
  • Jika pengguna mengakses halaman di perangkat seluler, kode tambahan menggunakan menggunakan data seluler.

Buka panel Cakupan

  1. Buka Menu Command.

  2. Mulai ketik coverage, pilih perintah Show Coverage, lalu tekan Enter untuk menjalankan perintah. Panel Cakupan akan terbuka di Panel Samping.

    Panel Cakupan.

Merekam cakupan kode

Untuk merekam cakupan kode:

  1. Untuk menetapkan cakupan cakupan, pada panel tindakan di bagian atas panel Cakupan, pilih Per fungsi atau Per blok dari menu drop-down.

  2. Untuk memulai perekaman, klik refresh Mulai instrumentasi cakupan dan muat ulang halaman Panel Cakupan memuat ulang halaman, mengambil kode yang diperlukan untuk memuat halaman, dan melanjutkan pencatatan saat Anda berinteraksi dengan halaman.

  3. Untuk berhenti merekam cakupan kode, klik stop_circle Berhenti menginstrumentasikan cakupan dan tampilkan hasil.

Menganalisis cakupan kode

Tabel di panel Cakupan menampilkan resource yang dianalisis, dan jumlah kode yang digunakan dalam setiap resource.

Klik baris untuk membuka resource tersebut di panel Sources dan melihat perincian baris demi baris dari kode yang digunakan dan kode yang tidak digunakan. Setiap baris kode yang tidak digunakan ditandai dengan garis merah di samping kolom dengan nomor baris di sebelah kiri.

Laporan cakupan kode.

  • Kolom URL adalah URL resource yang dianalisis.
  • Kolom Jenis menunjukkan apakah resource berisi CSS, JavaScript, atau keduanya.
  • Kolom Total Byte adalah ukuran total resource dalam byte.
  • Kolom Unused Bytes adalah jumlah byte yang tidak digunakan.
  • Kolom terakhir tanpa nama adalah visualisasi Total Byte dan Kolom Unused Bytes. Bagian merah pada panel ini adalah byte yang tidak digunakan. Tujuan {i>grey <i}digunakan sebagai {i>byte<i}.

Untuk memfilter laporan menurut URL, tentukan laporan dalam filter di panel tindakan.

Status bar di bagian bawah panel Cakupan menampilkan persentase kode yang digunakan. Status bar mempertimbangkan pemfilteran.

Di samping panel filter, dari menu drop-down, Anda dapat memilih Semua, atau hanya CSS atau JavaScript yang ditampilkan dalam laporan.

Untuk menyertakan kode ekstensi ke dalam laporan Anda, aktifkan Skrip konten check_box.

Untuk mengekspor laporan Anda, klik download Ekspor cakupan.