project_path: /web/tools/chrome-devtools/_project.yaml
book_path: /web/tools/chrome-devtools/_book.yaml
description: 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.

{# wf_updated_on: 2020-07-10 #}
{# wf_published_on: 2015-06-08 #}

# Cara Menggunakan Alat (Bantu) Timeline {: .page-title }

{% include "web/_shared/contributors/kaycebasques.html" %}

Gunakan panel <em>Timeline</em> 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](imgs/timeline-panel.png)


### TL;DR {: .hide-from-toc }
- 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 {:#timeline-overview}

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`.

4. **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](imgs/timeline-annotated.png)

### 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"][jank].
2. **CPU**. Sumber daya CPU. [Bagan area][ac] 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:
   <!-- source: https://goo.gl/eANVFf -->
   
   * File HTML berwarna **<span style="color:hsl(214, 67%, 66%)">biru</span>**.
   * Skrip berwarna **<span style="color:hsl(43, 83%, 64%)">kuning</span>**.
   * Stylesheet berwarna **<span style="color:hsl(256, 67%, 70%)">ungu</span>**.
   * File media berwarna **<span style="color:hsl(109, 33%, 55%)">hijau</span>**.
   * Sumber daya lainnya berwarna 
     **<span style="color:hsl(0, 0%, 70%)">abu-abu</span>**.

![panel overview, teranotasi](imgs/overview-annotated.jpg)

[ac]: https://en.wikipedia.org/wiki/Area_chart 
[jank]: /web/fundamentals/performance/rendering/

## 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](imgs/record-off.png){:.inline}) atau dengan mengetikkan pintasan 
keyboard <kbd>Cmd</kbd>+<kbd>E</kbd> (Mac) atau <kbd>Ctrl</kbd>+<kbd>E</kbd> 
(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**][nc].
* **Nonaktifkan ekstensi**. Ekstensi Chrome bisa menambah noise yang tidak terkait ke 
  rekaman Timeline aplikasi Anda. Buka jendela Chrome dalam 
  [mode penyamaran][incognito], atau buat 
  [profil pengguna Chrome][new chrome profile] yang baru untuk memastikan bahwa lingkungan Anda
  tidak memiliki ekstensi.

[nc]: /web/tools/chrome-devtools/profile/network-performance/network-conditions#network-conditions
[incognito]: https://support.google.com/chrome/answer/95464
[new chrome profile]: https://support.google.com/chrome/answer/142059

## Menampilkan detail perekaman

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

![panel details](imgs/details-pane.png)

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

[event reference]: /web/tools/chrome-devtools/profile/evaluate-performance/performance-reference

## Mengambil tangkapan layar saat merekam {:#filmstrip}

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](imgs/timeline-filmstrip.png)

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.

<video src="animations/hover.mp4" autoplay muted loop controls></video>

## Profil JavaScript {:#profile-js}

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](imgs/js-profile.png)

## Profil painting {:#profile-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](imgs/paint-profiler.png)

### Setelan Rendering {:#rendering-settings}

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
<kbd>esc</kbd> untuk menampilkan panel samping tersebut, jika tersembunyi).

![setelan rendering](imgs/rendering-settings.png)

## Penelusuran rekaman

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

Tekan <kbd>Cmd</kbd>+<kbd>F</kbd> (Mac) atau <kbd>Ctrl</kbd>+<kbd>F</kbd> 
(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](imgs/find-toolbar.png)

## Memperbesar bagian Timeline {:#zoom}

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](imgs/zoom.png)

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 <kbd>W</kbd>,<kbd>A</kbd>,
<kbd>S</kbd>, dan <kbd>D</kbd> untuk menyesuaikan pilihan Anda. <kbd>W</kbd> 
dan <kbd>S</kbd> masing-masing untuk memperbesar dan memperkecil. <kbd>A</kbd> dan 
<kbd>D</kbd> 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](imgs/save-open.png)


{# wf_devsite_translation #}
