Revolusi Chrome DevTools 2013

Arthur Evans
Twitter GitHub
Tim Statler
Twitter

Pengantar

Seiring dengan berkembangnya kompleksitas dan fungsionalitas aplikasi web, Chrome DevTools juga. Dalam rangkuman acara Google I/O 2013 dari Paul Irish mengenai Chrome DevTools Revolutions 2013 ini, Anda akan mengetahui fitur-fitur terbaru yang merevolusi cara Anda membangun dan menguji aplikasi web.

Jika melewatkan pembahasan Paul, Anda dapat mempelajarinya di bagian atas (lanjutkan, kami akan menunggu) atau Anda dapat langsung menuju ringkasan fitur:

  • Ruang kerja memungkinkan Anda menggunakan DevTools sebagai editor kode sumber.
  • Jika menggunakan Sass, Anda akan menyukai kemampuan mengedit file Sass (.scss) secara langsung di dalam DevTools dan melihat perubahan Anda langsung tercermin pada halaman.
  • Proses debug halaman dari jarak jauh di Chrome untuk Android dapat dilakukan untuk sementara waktu, tetapi ekstensi ADB membuat proses terhubung ke perangkat Android menjadi lebih sederhana. Penerusan port terbalik memungkinkan Anda terhubung dengan mudah ke localhost di mesin pengembangan dari perangkat Anda.
  • Performa selalu menjadi perhatian utama di aplikasi web, dan DevTools memiliki sejumlah fitur baru untuk membantu Anda melacak bottleneck, termasuk visualisasi Flame Chart baru untuk profiling CPU dan beberapa alat baru untuk men-debug masalah performa yang terkait dengan rendering dan penggunaan memori.

Fitur ini aktif di Chrome 28, kini tersedia di saluran update stabil.

Ruang kerja

Ruang kerja memungkinkan Anda memetakan resource yang disalurkan dari server web lokal ke file pada disk, sehingga Anda dapat mengedit jenis file sumber apa pun dalam panel Sources dan membuat perubahan tersebut tetap tersimpan di disk. Demikian pula, perubahan yang Anda buat di editor eksternal akan segera muncul di panel Sumber.

Screenshot di bawah ini menunjukkan contoh cara kerja ruang kerja. Situs Kalender telah dimuat melalui localhost, sedangkan panel Source menampilkan tampilan sistem file lokal dari folder root situs. Hasil edit yang Anda buat pada file dalam folder ini akan disimpan ke disk. Pada screenshot di bawah, beberapa perubahan yang belum disimpan telah dibuat pada Calendar.css, sehingga tanda bintang ditempatkan di samping nama file.

Panel sumber.

Menekan Control+S atau Command+S akan mempertahankan perubahan pada disk.

Demikian pula, perubahan yang Anda buat pada gaya elemen di panel Elements akan tercermin pada panel Source dan editor eksternal Anda. Perhatikan bahwa:

  • Perubahan DOM di panel Elemen tidak dipertahankan. Hanya perubahan gaya di panel Elements yang dipertahankan.
  • Hanya gaya yang ditentukan dalam file CSS eksternal yang dapat diubah. Perubahan pada element.style atau gaya inline tidak disimpan kembali ke disk. Jika Anda memiliki gaya inline, gaya tersebut dapat diubah di panel Sumber.
  • Perubahan gaya di panel Elements akan langsung dipertahankan; Anda tidak perlu menekan Control+S atau Command+S.
Panel elemen.

Menambahkan folder ruang kerja

Ada dua bagian dalam menggunakan workspace: membuat isi folder lokal tersedia untuk DevTools, dan memetakan folder tersebut ke URL.

Untuk menambahkan folder ruang kerja baru:

  1. Di DevTools, klik Setelan Ikon setelan untuk membuka Setelan DevTools.
  2. Klik Ruang Kerja.
  3. Klik Tambahkan Folder.
  4. Cari folder yang berisi file sumber project, lalu klik Pilih.
  5. Saat diminta, klik Izinkan untuk mengizinkan akses penuh DevTools ke folder tersebut.

Panel Sumber menampilkan folder ruang kerja baru beserta sumber yang dimuat melalui localhost. Sekarang Anda dapat mengedit langsung file dalam folder ruang kerja Anda, dan perubahan tersebut akan tetap disimpan di disk.

Panel sumber yang menampilkan resource localhost dan file workspace.

Memetakan folder ke URL

Setelah menambahkan folder ruang kerja, Anda dapat memetakannya ke URL. Setiap kali Chrome memuat URL yang ditentukan, panel Sumber akan menampilkan konten folder ruang kerja sebagai pengganti konten folder jaringan.

Untuk memetakan folder ruang kerja ke URL:

  1. Di panel {i>Source<i}, klik kanan atau Control+klik file di folder ruang kerja.
  2. Pilih Map to Network Resource.
    Menu konteks yang menampilkan opsi Petakan ke Resource Jaringan
  3. Pilih resource jaringan yang sesuai dari halaman yang saat ini dimuat.
    Dialog pemilihan resource.
  4. Muat ulang halaman di Chrome.

Panel Source kini hanya akan menampilkan konten folder ruang kerja lokal situs Anda, bukan sumber localhost, seperti yang ditunjukkan di bawah.

Folder ruang kerja yang dipetakan

Ada dua cara lain untuk menautkan folder jaringan ke folder ruang kerja:

  • Klik kanan (atau Control+klik) resource jaringan lalu pilih Map to File System Resource.
  • Tambahkan pemetaan secara manual di tab Workspace pada dialog Setelan DevTools.

Proses debug Peta Sumber Sass/CSS

Proses debug Sass (Peta Sumber CSS) memungkinkan Anda mengedit langsung file Sass (.scss) di panel Sumber, dan melihat hasilnya tanpa harus keluar dari DevTools atau memuat ulang halaman. Saat Anda memeriksa elemen yang gayanya disediakan oleh file CSS yang dihasilkan Sass, panel Elements akan menampilkan link ke file .scss, bukan file .css yang dihasilkan.

Panel elemen yang menampilkan stylesheet .scss

Mengklik link akan membuka file SCSS (yang dapat diedit) di panel Sumber. Anda dapat melakukan perubahan apa pun yang diinginkan pada file ini.

panel kami yang menampilkan file .scss.

Saat Anda menyimpan perubahan pada file SCSS (di DevTools atau di tempat lain), compiler Sass akan menghasilkan ulang file CSS. Kemudian, DevTools akan memuat ulang file CSS yang baru dihasilkan.

Menggunakan proses debug Sass

Untuk menggunakan proses debug Sass di Chrome, Anda harus memiliki versi pra-rilis compiler Sass, yang merupakan satu-satunya versi yang saat ini mendukung pembuatan peta sumber.

gem install sass -v '>=3.3.0alpha' --pre

Anda juga harus mengaktifkan fitur proses debug Sass dalam eksperimen DevTools:

  1. Buka about:flags di Chrome.
  2. Aktifkan Aktifkan eksperimen Developer Tools.
  3. Mulai ulang Chrome.
  4. Buka DevTools Settings, lalu klik Experiments.
  5. Aktifkan Dukungan untuk Sass (atau Proses debug stylesheet Sass, bergantung pada versi browser yang Anda gunakan).

Setelah Sass diinstal, mulai compiler Sass untuk mengawasi perubahan pada file sumber Sass dan buat file peta sumber untuk setiap file CSS yang dihasilkan, misalnya: 

sass --watch **--sourcemap** sass/styles.scss:styles.css

Jika Anda menggunakan Kompas, perhatikan bahwa Kompas belum mendukung versi pra-rilis Sass, sehingga Anda tidak dapat menggunakan proses debug Sass dengan Kompas.

Cara kerjanya

Untuk setiap file sumber SCSS yang diproses, compiler Sass menghasilkan file peta sumber (file .map) selain CSS yang dikompilasi. File peta sumber adalah file JSON yang mendefinisikan pemetaan antara file .scss dan file .css. Setiap file CSS berisi anotasi yang menentukan URL file peta sumbernya, yang disematkan dalam komentar khusus:

/*# sourceMappingURL=<url>; */

Misalnya, dengan file SCSS berikut:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass menghasilkan file CSS seperti ini, dengan anotasi sourceMappingURL:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

Di bawah ini adalah contoh file source map:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Proses debug jarak jauh yang lebih mudah di Chrome untuk Android

Beberapa fitur baru di DevTools membuat proses debug jarak jauh di Chrome untuk Android lebih mudah disiapkan: ekstensi ADB dan penerusan port terbalik.

Ekstensi Chrome ADB menyederhanakan proses penyiapan proses debug jarak jauh. Firebase Admin SDK memberikan manfaat sebagai berikut:

  • Menggabungkan Android Debug Bridge (ADB) sehingga Anda tidak perlu menginstalnya.
  • Tidak diperlukan interaksi command line.
  • UI untuk memulai dan menghentikan daemon ADB dengan mudah, dan melihat perangkat yang terhubung.

Penerusan port terbalik memudahkan penghubungan Chrome di Android ke server web yang berjalan di localhost Anda, sesuatu yang sulit dilakukan oleh beberapa lingkungan jaringan tanpa trik DNS.

Menggunakan ekstensi ADB

Pertama, instal ekstensi Chrome ADB dari Chrome Web Store. Klik Tambahkan ke Chrome untuk menginstal ekstensi.

Setelah diinstal, ikon menu Android berwarna abu-abu akan muncul di Chrome. Untuk memulai ADB, klik ikon lalu klik Start ADB.

Menu ekstensi ADB.

Setelah ADB dimulai, ikon menu akan berubah menjadi hijau dan menampilkan jumlah perangkat yang saat ini terhubung, jika ada.

Menu ekstensi ADB yang menampilkan perangkat yang terhubung.

Klik View Devices untuk membuka halaman about:inspect yang menampilkan setiap perangkat yang terhubung beserta tabnya. Untuk memeriksa tab di DevTools, klik link "inspect" di samping URL-nya.

halaman about:inspect yang menampilkan link untuk tab perangkat

Jika tidak melihat perangkat terhubung, pastikan perangkat Anda terhubung ke USB, dan proses debug USB diaktifkan di setelan Chrome untuk Android. Untuk petunjuk dan langkah pemecahan masalah yang lebih detail, lihat Proses Debug Jarak Jauh di Android.

Penerusan port terbalik (eksperimental)

Biasanya Anda memiliki server web yang berjalan di mesin pengembangan lokal, dan Anda ingin terhubung ke situs tersebut dari perangkat Anda. Jika mesin pengembangan dan perangkat berada di jaringan yang sama, hal ini mudah dilakukan. Namun, dalam beberapa kasus, seperti pada jaringan perusahaan yang dibatasi, hal ini mungkin tidak dapat dilakukan tanpa beberapa trik DNS yang cerdas. Fitur baru di Chrome untuk Android yang disebut penerusan port terbalik memudahkan hal ini. Fitur ini berfungsi dengan membuat port TCP mendengarkan di perangkat Anda yang meneruskan traffic melalui USB ke port TCP tertentu di mesin pengembangan Anda.

Untuk menggunakan fitur ini, Anda perlu:

  • Chrome 28 atau yang lebih baru diinstal di mesin pengembangan Anda
  • Chrome untuk Android Beta diinstal di perangkat Anda
  • Android Debug Bridge (ekstensi Chrome ADB atau Android SDK lengkap) yang diinstal di mesin pengembangan Anda

Untuk menggunakan penerusan port terbalik, perangkat Anda harus terhubung untuk proses debug jarak jauh, seperti yang dijelaskan dalam Menggunakan ekstensi ADB. Kemudian, Anda perlu mengaktifkan penerusan port terbalik dan menambahkan aturan penerusan port untuk aplikasi Anda.

Pertama, aktifkan penerusan port terbalik:

  1. Buka Chrome di mesin pengembangan Anda.
  2. Di about:flags, aktifkan Aktifkan eksperimen Developer Tools, lalu mulai ulang Chrome.
  3. Buka about:inspect. Anda akan melihat perangkat seluler Anda dan daftar tab yang terbuka.
  4. Klik link "periksa" di samping situs mana pun yang tercantum.
  5. Di jendela DevTools yang terbuka, buka panel Settings.
  6. Di bagian Eksperimen, aktifkan Aktifkan penerusan port terbalik.
  7. Tutup jendela DevTools dan kembali ke about:inspect.

Kemudian, tambahkan aturan penerusan port:

  1. Klik link "inspect" lagi untuk membuka DevTools, lalu buka lagi Setelan DevTools.
  2. Klik tab Penerusan Transfer.
  3. Di kolom Port perangkat, masukkan nomor port yang harus dihubungkan oleh Chrome di perangkat Android Anda (defaultnya adalah 8080).
  4. Di kolom Target, tambahkan nomor port tempat aplikasi web Anda berjalan di mesin pengembangan.
    Tab penerusan port di Setelan DevTools
  5. Di Chrome untuk Android, buka localhost:, dengan adalah nilai yang Anda masukkan di kolom Port perangkat (defaultnya adalah 8080).

Anda akan melihat konten yang ditayangkan oleh mesin pengembangan.

Visualisasi bagan api untuk profil JavaScript

Tampilan Flame Chart baru memberikan representasi visual pemrosesan JavaScript dari waktu ke waktu, mirip dengan yang ditemukan di panel Rentang Waktu dan Jaringan.

Diagram api.

Sumbu horizontal adalah waktu dan sumbu vertikal adalah stack panggilan. Di bagian atas panel, ringkasan yang menampilkan seluruh rekaman, dan Anda dapat "memperbesar" area ringkasan dengan memilihnya menggunakan mouse, seperti yang ditunjukkan di bawah ini. Skala waktu tampilan detail menyusut.

Diagram Flame diperbesar.

Dalam tampilan detail, stack panggilan direpresentasikan sebagai stack fungsi "blok". Blok yang berada di atas blok lain disebut dengan blok fungsi yang lebih rendah. Mengarahkan kursor ke blok tertentu akan menampilkan nama fungsi dan data pengaturan waktunya:

  • Name — Nama fungsi.
  • Self time — Waktu yang diperlukan untuk menyelesaikan pemanggilan fungsi saat ini, termasuk hanya pernyataan dalam fungsi itu sendiri, tidak termasuk fungsi yang dipanggil.
  • Total waktu — Waktu yang diperlukan untuk menyelesaikan pemanggilan fungsi ini saat ini dan fungsi apa pun yang dipanggilnya.
  • Aggregated self time — Waktu gabungan untuk semua pemanggilan fungsi di seluruh rekaman, tidak termasuk fungsi yang dipanggil oleh fungsi ini.
  • Total waktu gabungan — Total waktu gabungan untuk semua pemanggilan fungsi, termasuk fungsi yang dipanggil oleh fungsi ini.
Diagram api yang menampilkan data waktu

Mengklik blok fungsi akan membuka file JavaScript yang memuatnya di panel Sources, pada baris tempat fungsi ditentukan.

Definisi fungsi di panel Sumber.

Untuk menggunakan flame chart:

  1. Di DevTools, klik tab Profiles.
  2. Pilih Record JavaScript CPU profile, lalu klik Start.
  3. Setelah selesai mengumpulkan data, klik Stop.
  4. Di tampilan profil, pilih visualisasi Flame Chart.
    Menu visualisasi di tampilan profil

Lima fitur pengukuran performa utama

Melengkapi survei kemajuan revolusioner di DevTools ini adalah beberapa fitur baru untuk menyelidiki masalah performa:

  • Mode pengecatan berkelanjutan
  • Menampilkan persegi panjang Paint dan batas lapisan
  • FPS pengukur
  • Menemukan tata letak sinkron paksa (layout thrashing)
  • Pelacakan alokasi objek

Mode pengecatan berkelanjutan

Mode lukisan berkelanjutan adalah opsi di Setelan DevTools (Rendering > Aktifkan pengecatan ulang halaman berkelanjutan) yang membantu Anda mengidentifikasi biaya rendering setiap elemen atau gaya CSS.

Biasanya, Chrome hanya menggambar ke layar sebagai respons terhadap perubahan tata letak atau gaya, dan hanya area layar yang perlu diupdate. Jika Anda mengaktifkan pengecatan ulang halaman secara terus-menerus, seluruh layar akan terus-menerus dicat ulang. Tampilan peringatan menunjukkan waktu yang dibutuhkan Chrome untuk menggambar halaman, serta rentang waktu, dan grafik yang menunjukkan distribusi waktu menggambar terbaru. Garis horizontal melintasi histogram menunjukkan tanda 16,6 md.

Membuat heads-up untuk pengaturan waktu cat.

Manfaat menggunakan ini adalah Anda dapat menjalankan hierarki DOM di panel Elemen dan menyembunyikan elemen individual (tekan tombol H untuk menyembunyikan elemen yang saat ini dipilih), atau menonaktifkan gaya CSS elemen. Anda dapat melihat berapa lama satu elemen atau gaya ditambahkan ke "bobot" render halaman, jika ada, dengan memperhatikan perubahan pada waktu paint halaman. Jika menyembunyikan satu elemen akan mengurangi waktu cat secara signifikan, Anda tahu untuk fokus pada penataan gaya atau konstruksi elemen tersebut.

Untuk mengaktifkan mode nyeri berkelanjutan:

  1. Buka Setelan DevTools. 1.Di tab General, di bagian Rendering, aktifkan Enable continuous page repainting.

Untuk informasi selengkapnya, lihat Membuat Profiling Long Paint Times dengan Mode Continuous Painting DevTools.

Menampilkan persegi panjang dan batas lapisan

Opsi lain di DevTools adalah menunjukkan area persegi panjang mana yang akan di-paint. (Setelan > Rendering > Tampilkan persegi panjang paint). Misalnya, dalam screenshot di bawah, kotak cat digambar di atas area tempat efek mengambang CSS diterapkan ke grafik ungu. Ini bagus, karena ukurannya relatif kecil dari layar.

Situs yang menampilkan kotak lukis.

Anda ingin menghindari praktik desain dan pengembangan yang menyebabkan seluruh tampilan digambar ulang. Misalnya, dalam screenshot berikut, pengguna men-scroll halaman. Satu persegi panjang paint mengelilingi scroll bar, dan satu lagi yang lain mengelilingi seluruh halaman. Dalam hal ini, penyebabnya adalah gambar latar pada elemen body. Posisi gambar disetel ke tetap di CSS, yang mengharuskan Chrome menggambar ulang seluruh halaman pada setiap scroll.

Situs yang menampilkan pengecatan ulang layar penuh.

FPS pengukur

Pengukur FPS menampilkan kecepatan frame halaman saat ini, kecepatan frame minimum dan maksimum, grafik batang yang menunjukkan kecepatan frame dari waktu ke waktu, dan histogram yang menunjukkan variabilitas kecepatan frame.

FPS pengukur

Untuk menampilkan pengukur FPS:

  1. Buka Setelan DevTools.
  2. Klik Umum.
  3. Di bagian Rendering, aktifkan Force Accelerated Compositing dan Tampilkan pengukur FPS.

Anda dapat memaksa pengukur FPS agar selalu muncul dengan membuka about:flags, mengaktifkan penghitung FPS, dan memulai ulang Chrome.

Menemukan tata letak sinkron paksa (layout thrashing)

Untuk memaksimalkan performa rendering, Chrome biasanya mengelompokkan perubahan tata letak yang diminta oleh aplikasi Anda dan menjadwalkan penerusan tata letak untuk menghitung dan merender perubahan yang diminta secara asinkron. Namun, jika aplikasi meminta nilai properti yang bergantung pada tata letak (offsetHeight atau offsetWidth seperti itu), Chrome akan dipaksa untuk melakukan tata letak halaman secara langsung dan sinkron. Apa yang disebut tata letak sinkron paksa ini dapat mengurangi performa rendering secara signifikan, terutama jika dilakukan berulang kali pada hierarki DOM yang besar. Skenario ini juga disebut "layout thrashing".

Perekaman Linimasa akan memberi tahu Anda saat tata letak sinkron paksa dengan ikon peringatan berwarna kuning di samping catatan Linimasa yang sesuai. Mengarahkan kursor ke salah satu data ini akan menampilkan pelacakan tumpukan untuk kode yang membuat tata letak tidak valid, dan kode yang memaksa tata letak.

Memaksa pop-up tata letak sinkron dalam tampilan Linimasa.

Pop-up ini juga menunjukkan jumlah node yang memerlukan tata letak, ukuran hierarki tata letak ulang, cakupan tata letak, dan root tata letak.

Lihat Demo linimasa: Mendiagnosis tata letak sinkron paksa untuk informasi selengkapnya.

Pelacakan alokasi objek

Pelacakan alokasi objek adalah jenis baru profil memori yang menampilkan alokasi dari waktu ke waktu. Saat Anda memulai pelacakan alokasi, DevTools mengambil cuplikan heap secara terus-menerus dari waktu ke waktu. Profil alokasi heap menunjukkan tempat objek dibuat dan mengidentifikasi jalur penahanan.

Tampilan profil alokasi heap.

Untuk melacak alokasi objek:

  1. Di DevTools, klik tab Profiles.
  2. Pilih Record heap allocations dan klik Start.
  3. Setelah selesai mengumpulkan data, klik Stop recording heap profile (lingkaran merah di sudut kiri bawah panel pembuatan profil).

Pembuatan profil kanvas (eksperimental)

Terakhir, berikut adalah fitur eksperimental yang dapat dicoba. Pembuatan profil kanvas memungkinkan Anda merekam dan memutar panggilan WebGL yang dibuat pada elemen kanvas. Anda dapat menyusuri setiap panggilan WebGL atau grup panggilan dan melihat hasil yang dirender. Anda juga akan melihat waktu yang diperlukan untuk memutar ulang panggilan tertentu tersebut.

Untuk menggunakan pembuatan profil kanvas:

  1. Aktifkan fitur Inspeksi Canvas di tab Experiments di setelan DevTools. (Jika Anda tidak melihat tab ini, buka about:flags, aktifkan Aktifkan eksperimen Developer Tools, lalu mulai ulang Chrome.)
  2. Klik tab Profil.
  3. Pilih Ambil bingkai kanvas, lalu klik Ambil snapshot.
  4. Sekarang Anda dapat menjelajahi panggilan yang digunakan untuk membuat bingkai kanvas.
Profil Canvas.