Cakupan: Temukan JavaScript dan CSS yang tidak digunakan

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

Menganalisis cakupan kode.

Ringkasan

Mengirimkan JavaScript atau CSS yang tidak digunakan adalah masalah umum dalam pengembangan web. Misalnya, Anda ingin menggunakan komponen tombol Bootstrap di halaman Anda. Untuk menggunakan komponen tombol, Anda perlu menambahkan link ke stylesheet 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. File ini berisi CSS untuk semua komponen Bootstrap. Namun, Anda tidak menggunakan komponen Bootstrap lainnya. Jadi, halaman Anda mendownload banyak CSS yang tidak diperlukan. CSS tambahan ini menimbulkan masalah karena alasan berikut:

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

Panel Cakupan memungkinkan Anda merekam halaman dan melihat laporan total byte yang digunakan dan tidak digunakan dari aset CSS dan JavaScript, serta melacak kode di panel Sumber.

Membuka panel Cakupan

  1. Buka DevTools.
  2. Buka Menu Perintah.

  3. Mulai mengetik coverage, pilih perintah Show Coverage, lalu tekan Enter untuk menjalankan perintah. Panel Cakupan akan terbuka di Drawer.

    Panel Cakupan.

Atau, di sudut kanan atas, pilih more_vert Opsi lainnya > Alat lainnya > Cakupan.

Merekam cakupan kode

Untuk merekam cakupan kode:

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

  2. Untuk memulai perekaman, klik tombol Muat ulang di bagian tengah panel. Panel Cakupan memuat ulang halaman, merekam kode yang diperlukan untuk memuat halaman, dan melanjutkan perekaman saat Anda berinteraksi dengan halaman.

  3. Untuk berhenti merekam cakupan kode, klik Berhenti memantau cakupan dan tampilkan hasil di panel tindakan panel.

Menganalisis cakupan kode

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

Klik baris untuk membuka resource tersebut di panel Sumber dan melihat perincian baris demi baris dari kode yang digunakan dan kode yang tidak digunakan. Baris kode yang tidak digunakan ditandai dengan garis abu-abu vertikal 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 Byte yang Tidak Digunakan adalah jumlah byte yang tidak digunakan.
  • Kolom Visualisasi Penggunaan adalah visualisasi kolom Total Byte dan Byte yang Tidak Digunakan. Bagian abu-abu pada panel adalah byte yang tidak digunakan. Bagian hijau adalah byte yang digunakan.

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

Status bar di bagian bawah panel Cakupan menunjukkan persentase kode yang digunakan. Status bar memperhitungkan pemfilteran.

Di samping kolom filter, dari daftar drop-down, Anda dapat memilih Semua, atau hanya CSS atau JavaScript untuk ditampilkan dalam laporan.

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

Untuk mengekspor laporan, klik Ekspor cakupan.