Cara Menggunakan Alat (Bantu) Timeline

Gunakan panel Timeline Chrome DevTools untuk merekam dan menganalisis semua aktivitas di aplikasi saat sedang berjalan. Panel ini merupakan tempat terbaik untuk memulai investigasi masalah kinerja yang dirasakan pada aplikasi Anda.

Alat (bantu) timeline

TL;DR

  • Buat rekaman Timeline untuk menganalisis setiap kejadian yang terjadi setelah laman dimuat atau setelah interaksi pengguna.
  • Menampilkan FPS, CPU, dan permintaan jaringan di panel Overview.
  • Klik kejadian di dalam Flame Chart untuk menampilkan detail tentangnya.
  • Memperbesar bagian rekaman untuk mempermudah analisis.

Ringkasan panel Timeline

Panel Timeline terdiri dari empat panel:

  1. Controls. Memulai rekaman, menghentikan rekaman, dan mengonfigurasi informasi apa saja yang akan direkam selama rekaman.
  2. Overview. Ringkasan tingkat tinggi kinerja laman. Selengkapnya tentang ini di bawah.
  3. Flame Chart. Visualisasi pelacakan tumpukan CPU.

Anda mungkin melihat satu sampai tiga garis bertitik vertikal di Flame Chart. Garis biru menggambarkan kejadian DOMContentLoaded. Garis hijau menggambarkan "time to first paint' atau saat laman pertama kali terlihat oleh pengguna. Garis merah menggambarkan kejadian load.

  1. Details. Bila sebuah kejadian dipilih, panel ini menampilkan informasi selengkapnya tentang kejadian tersebut. Bila tidak ada kejadian yang dipilih, panel ini menunjukkan informasi tentang bingkai waktu yang dipilih.

panel timeline teranotasi

Panel Overview

Panel Overview terdiri dari tiga grafik:

  1. FPS. Frame Per Second atau Bingkai Per Detik. Semakin tinggi bilah hijau, semakin tinggi FPS. Blok merah di atas grafik FPS menunjukkan bingkai panjang, yang merupakan potensi tampilan tersendat atau "jank".
  2. CPU. Sumber daya CPU. Bagan area ini menunjukkan jenis kejadian apa yang menggunakan sumber daya CPU.
  3. NET. Setiap bilah berwarna mewakili satu sumber daya. Semakin panjang bilah, semakin lama waktu yang dibutuhkan untuk mengambil sumber daya. Bagian yang berwarna lebih muda di tiap bilah menggambarkan waktu tunggu (waktu antara sumber daya diminta sampai dengan waktu byte pertama diunduh). Bagian yang berwarna lebih gelap menggambarkan waktu transfer (waktu antara byte pertama dan terakhir diunduh).

Bilah diberi tanda warna sebagai berikut:

  • File HTML berwarna biru.
  • Skrip berwarna kuning.
  • Stylesheet berwarna ungu.
  • File media berwarna hijau.
  • Sumber daya lainnya berwarna abu-abu.

panel overview, teranotasi

Membuat sebuah rekaman

Untuk membuat rekaman pemuatan laman, buka panel Timeline, buka laman yang ingin Anda rekam, lalu muat ulang laman. Panel Timeline secara otomatis merekam muat ulang laman.

Untuk membuat rekaman interaksi laman, buka panel Timeline, lalu mulai perekaman dengan menekan tombol Record (tombol record) atau dengan mengetikkan pintasan keyboard Cmd+E (Mac) atau Ctrl+E (Windows/Linux). Tombol Record menjadi merah selama perekaman berlangsung. Lakukan interaksi laman, dan kemudian tekan tombol Record atau ketik pintasan keyboard lagi untuk menghentikan perekaman.

Ketika rekaman selesai, DevTools menebak bagian rekaman yang paling relevan bagi Anda, dan secara otomatis memperbesar ke bagian itu.

Tip rekaman

  • Usahakan rekaman sesingkat mungkin. Rekaman yang singkat secara umum memudahkan analisis.
  • Hindari tindakan yang tidak perlu. Hindari tindakan (klik mouse, pemuatan jaringan, dsb.) yang menambah beban pada aktivitas yang ingin Anda rekam dan analisis. Misalnya, jika Anda ingin merekam kejadian yang terjadi setelah Anda mengeklik tombol Login, jangan secara bersamaan menggulir laman, memuat gambar, dan lain sebagainya.
  • Nonaktifkan cache browser. Saat merekam operasi jaringan, sebaiknya nonaktifkan cache browser dari panel Settings DevTools atau panel samping Network conditions.
  • Nonaktifkan ekstensi. Ekstensi Chrome bisa menambah noise yang tidak terkait ke rekaman Timeline aplikasi Anda. Buka jendela Chrome dalam mode penyamaran, atau buat profil pengguna Chrome yang baru untuk memastikan bahwa lingkungan Anda tidak memiliki ekstensi.

Menampilkan detail perekaman

Ketika Anda memilih sebuah kejadian di Flame Chart, panel Details menampilkan informasi tambahan tentang kejadian tersebut.

panel details

Beberapa tab, seperti Summary, hadir untuk semua jenis kejadian. Tab lain hanya tersedia untuk beberapa jenis kejadian tertentu. Lihat referensi kejadian Timeline untuk detail mengenai setiap jenis perekaman.

Mengambil tangkapan layar saat merekam

Panel Timeline bisa merekam tangkapan layar selama pemuatan laman. Fitur ini dikenal sebagai Filmstrip.

Aktifkan kotak centang Screenshots di panel Controls sebelum Anda membuat rekaman untuk merekam tangkapan layar dari rekaman. Tangkapan layar ditampilkan di bawah panel Overview.

perekaman timeline dengan filmstrip

Arahkan kursor mouse ke atas Screenshots atau panel Overview untuk menampilkan tangkapan layar yang diperbesar di titik rekaman tersebut. Gerakkan mouse ke kiri dan kanan untuk menyimulasikan animasi perekaman.

Profil JavaScript

Aktifkan kotak centang JS Profile sebelum Anda merekam untuk menangkap tumpukan JavaScript dalam rekaman timeline Anda. Ketika JS profiler diaktifkan, bagan api akan menunjukkan semua fungsi JavaScript yang dipanggil.

bagan api dengan JS profile diaktifkan

Profil painting

Aktifkan kotak centang Paint sebelum Anda merekam untuk mendapatkan wawasan yang lebih dalam mengenai kejadian Paint. Ketika paint profiling diaktifkan dan Anda mengeklik pada kejadian Paint, tab Paint Profiler baru akan ditampilkan di panel Details yang menunjukkan lebih banyak informasi terperinci mengenai kejadian tersebut.

profiler paint

Setelan Rendering

Buka menu DevTools utama dan pilih More tools > Rendering settings untuk mengakses setelan render yang mungkin bisa membantu ketika mendebug masalah paint. Setelan render terbuka sebagai tab di sebelah panel samping Console (tekan esc untuk menampilkan panel samping tersebut, jika tersembunyi).

setelan rendering

Penelusuran rekaman

Saat melihat kejadian, Anda mungkin ingin berfokus pada satu jenis kejadian. Misalnya, mungkin Anda perlu melihat detail setiap kejadian Parse HTML.

Tekan Cmd+F (Mac) atau Ctrl+F (Windows / Linux) selagi Timeline berada di fokus untuk membuka bilah alat Find. Ketikkan nama jenis kejadian yang ingin Anda periksa, seperti Event.

Bilah alat hanya berlaku pada rentang waktu yang saat ini dipilih. Kejadian apa pun di luar rentang waktu yang dipilih tidak disertakan ke dalam hasil.

Panah atas dan bawah akan mengarahkan Anda secara kronologis di hasil. Jadi, hasil pertama mewakili kejadian paling awal di rentang waktu yang dipilih, dan hasil terakhir mewakili kejadian terakhir. Setiap kali Anda menekan panah atas atau bawah, sebuah kejadian baru dipilih, sehingga Anda bisa menampilkan detailnya di panel Details. Menekan panah atas dan bawah sama dengan mengeklik sebuah kejadian di Flame Chart.

bilah alat find

Memperbesar bagian Timeline

Anda bisa memperbesar bagian rekaman untuk mempermudah analisis. Gunakan panel Overview untuk memperbesar bagian rekaman. Setelah dilakukan zoom, Flame Chart secara otomatis diperbesar agar sesuai dengan bagian yang sama.

memperbesar bagian perekaman timeline

Untuk memperbesar bagian Timeline:

  • Di panel Overview, seret pilihan Timeline dengan mouse Anda.
  • Atur penggeser abu-abu di area penggaris.

Setelah menentukan bagian yang dipilih, Anda bisa menggunakan tombol W,A, S, dan D untuk menyesuaikan pilihan Anda. W dan S masing-masing untuk memperbesar dan memperkecil. A dan D masing-masing untuk bergerak ke kiri dan ke kanan.

Menyimpan dan memuat rekaman

Anda bisa menyimpan dan membuka rekaman dengan mengeklik kanan di dalam panel Overview atau Flame Chart dan memilih opsi yang relevan.

menyimpan dan membuka rekaman