Revolusi Chrome DevTools 2013

Pengantar

Seiring dengan meningkatnya kompleksitas dan fungsi aplikasi web, Chrome DevTools juga berkembang. Dalam recap presentasi Paul Irish di Google I/O 2013, Chrome DevTools Revolutions 2013, Anda akan melihat fitur terbaru yang merevolusi cara Anda mem-build dan menguji aplikasi web.

Jika Anda melewatkan presentasi Paul, Anda dapat menontonnya di atas (silakan, kami akan menunggu) atau langsung melihat ringkasan fitur:

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

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

Ruang kerja

Dengan Workspace, Anda dapat memetakan resource yang ditayangkan dari server web lokal ke file di disk, sehingga Anda dapat mengedit jenis file sumber apa pun dalam panel Sources dan mempertahankan perubahan tersebut ke disk. Demikian pula, perubahan yang Anda buat di editor eksternal akan segera muncul di panel Sources.

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

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

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

• Perubahan DOM di panel Elements 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 dipertahankan kembali ke disk. Jika Anda memiliki gaya inline, gaya ini dapat diubah di panel Sources.
• Perubahan gaya di panel Elements akan langsung dipertahankan; Anda tidak perlu menekan Control+S atau Command+S.

Menambahkan folder ruang kerja

Ada dua bagian untuk menggunakan ruang kerja: membuat konten folder lokal tersedia untuk DevTools, dan memetakan folder tersebut ke URL.

Untuk menambahkan folder ruang kerja baru:

1. Di DevTools, klik Setelan untuk membuka Setelan DevTools.
2. Klik Ruang Kerja.
3. Klik Tambahkan Folder.
4. Buka folder yang berisi file sumber project Anda, lalu klik Pilih.
5. Saat diminta, klik Izinkan untuk mengizinkan DevTools mengakses folder sepenuhnya.

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

Memetakan folder ke URL

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

Untuk memetakan folder ruang kerja ke URL:

1. Di panel Sumber, klik kanan atau Control+klik file di folder ruang kerja.
2. Pilih Peta ke Resource Jaringan.

   

3. Pilih resource jaringan yang sesuai dari halaman yang saat ini dimuat.

   

4. Muat ulang halaman di Chrome.

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

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

• Klik kanan (atau Control+klik) pada resource jaringan, lalu pilih Peta ke Resource Sistem File.
• Tambahkan pemetaan secara manual di tab Workspace pada dialog Setelan DevTools.

Proses debug Peta Sumber Sass/CSS

Proses debug Sass (CSS Source Map) memungkinkan Anda mengedit file Sass (.scss) secara langsung di panel Sources, 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.

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

Saat Anda menyimpan perubahan pada file SCSS (di DevTools atau di tempat lain), compiler Sass akan membuat ulang file CSS. Kemudian, DevTools akan memuat ulang file CSS yang baru saja 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 perlu mengaktifkan fitur proses debug Sass di eksperimen DevTools:

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

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

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

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

Cara kerjanya

Untuk setiap file sumber SCSS yang diprosesnya, compiler Sass menghasilkan file source map (file .map) selain CSS yang dikompilasi. File source map adalah file JSON yang menentukan pemetaan antara file .scss dan file .css. Setiap file CSS berisi anotasi yang menentukan URL file peta sumbernya, yang disematkan ke 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 akan menghasilkan file CSS seperti ini, dengan anotasi sourceMappingURL:

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

Berikut adalah contoh file peta sumber:

{
  "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 memudahkan penyiapan proses debug jarak jauh di Chrome untuk Android: ekstensi ADB dan penerusan port balik.

Ekstensi Chrome ADB menyederhanakan proses penyiapan proses debug jarak jauh. Hal ini memberikan manfaat berikut:

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

Penerusan port terbalik memudahkan Anda menghubungkan Chrome di Android ke server web yang berjalan di localhost, sesuatu yang sulit dilakukan oleh beberapa lingkungan jaringan tanpa beberapa 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 Mulai ADB.

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

Klik Lihat Perangkat untuk membuka halaman about:inspect yang menampilkan setiap perangkat yang terhubung dan tabnya. Untuk memeriksa tab di DevTools, klik link "periksa" di samping URL-nya.

Jika Anda tidak melihat perangkat yang terhubung, pastikan perangkat terhubung ke USB, dan proses debug USB diaktifkan di setelan Chrome untuk Android. Untuk petunjuk yang lebih mendetail dan langkah-langkah pemecahan masalah, 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. Jika mesin pengembangan dan perangkat berada di jaringan yang sama, hal ini mudah dilakukan. Namun, dalam beberapa kasus, seperti di 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 Anda melakukannya. Fitur ini berfungsi dengan membuat port TCP pendengar di perangkat Anda yang meneruskan traffic melalui USB ke port TCP tertentu di mesin pengembangan Anda.

Untuk menggunakan fitur ini, Anda memerlukan:

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

Untuk menggunakan penerusan port balik, Anda harus menghubungkan perangkat untuk proses debug jarak jauh, seperti yang dijelaskan dalam Menggunakan ekstensi ADB. Kemudian, Anda perlu mengaktifkan penerusan port balik 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 dan mulai ulang Chrome.
3. Buka about:inspect. Anda akan melihat perangkat seluler dan daftar tab yang terbuka.
4. Klik link "periksa" di samping situs yang tercantum.
5. Di jendela DevTools yang terbuka, buka panel Setelan.
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 "periksa" lagi untuk membuka DevTools, lalu buka kembali Setelan DevTools.
2. Klik tab Port Forwarding.
3. Di kolom Device port, masukkan nomor port yang akan dihubungkan Chrome di perangkat Android Anda (defaultnya 8080).
4. Di kolom Target, tambahkan nomor port tempat aplikasi web Anda berjalan di mesin pengembangan.

   

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 diagram api untuk profil JavaScript

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

Sumbu horizontal adalah waktu dan sumbu vertikal adalah tumpukan panggilan. Di bagian atas panel, terdapat ringkasan yang menampilkan seluruh rekaman, dan Anda dapat "memperbesar" wilayah ringkasan dengan memilihnya menggunakan mouse, seperti yang ditunjukkan di bawah. Skala waktu tampilan detail akan menyusut sesuai dengan perubahan tersebut.

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

• Nama — Nama fungsi.
• Waktu mandiri — Waktu yang dibutuhkan untuk menyelesaikan pemanggilan fungsi saat ini, termasuk hanya pernyataan dalam fungsi itu sendiri, tidak termasuk fungsi apa pun yang dipanggilnya.
• Total waktu — Waktu yang dibutuhkan untuk menyelesaikan pemanggilan fungsi ini saat ini dan fungsi apa pun yang dipanggilnya.
• Waktu mandiri gabungan — 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.

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

Untuk menggunakan diagram api:

1. Di DevTools, klik tab Profil.
2. Pilih Rekam profil CPU JavaScript, lalu klik Mulai.
3. Setelah selesai mengumpulkan data, klik Berhenti.
4. Di tampilan profil, pilih visualisasi Diagram Api.

   

Lima fitur pengukuran performa utama

Untuk melengkapi survei tentang kemajuan revolusioner di DevTools ini, ada beberapa fitur baru untuk menyelidiki masalah performa:

• Mode lukisan berkelanjutan
• Menampilkan persegi panjang Cat dan batas lapisan
• Pengukur FPS
• Menemukan tata letak sinkron paksa (thrashing tata letak)
• Pelacakan alokasi objek

Mode lukisan berkelanjutan

Mode gambar berkelanjutan adalah opsi di Setelan DevTools (Rendering > Enable continuous page repainting) 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 wilayah layar tersebut yang perlu diperbarui. Saat Anda mengaktifkan proses pengecatan ulang halaman yang berkelanjutan, seluruh layar akan terus dicat ulang. Layar pemberitahuan menampilkan waktu yang diperlukan Chrome untuk merender halaman, serta rentang waktu, dan grafik yang menampilkan distribusi waktu render terbaru. Garis horizontal di histogram menunjukkan tanda 16,6 md.

Manfaat penggunaan ini adalah Anda dapat menelusuri hierarki DOM di panel Elemen dan menyembunyikan elemen satu per satu (tekan tombol H untuk menyembunyikan elemen yang saat ini dipilih), atau menonaktifkan gaya CSS elemen. Anda dapat melihat berapa banyak waktu yang ditambahkan satu elemen atau gaya ke "beban" rendering halaman, jika ada, dengan memperhatikan perubahan pada waktu proses gambar halaman. Jika menyembunyikan satu elemen mengurangi waktu proses rendering secara signifikan, Anda tahu harus berfokus pada gaya visual atau konstruksi elemen tersebut.

Untuk mengaktifkan mode gambar berkelanjutan:

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

Untuk mengetahui informasi selengkapnya, lihat Membuat Profil Waktu Penggambaran yang Lama dengan Mode Penggambaran Berkelanjutan DevTools.

Menampilkan persegi panjang cat dan batas lapisan

Opsi lain di DevTools adalah untuk menampilkan wilayah persegi panjang layar yang dicat. (Setelan > Rendering > Tampilkan persegi panjang cat). Misalnya, pada screenshot di bawah, persegi panjang cat digambar di atas wilayah tempat efek pengarahan kursor CSS diterapkan ke grafik ungu. Hal ini bagus, karena merupakan bagian layar yang relatif kecil.

Sebaiknya hindari praktik desain dan pengembangan yang menyebabkan seluruh tampilan dicat ulang. Misalnya, dalam screenshot berikut, pengguna men-scroll halaman. Satu persegi panjang cat mengelilingi scroll bar, dan persegi panjang lainnya mengelilingi seluruh halaman. Dalam hal ini, penyebabnya adalah gambar latar pada elemen isi. Posisi gambar ditetapkan ke tetap di CSS, yang mengharuskan Chrome untuk mengecat ulang seluruh halaman pada setiap scroll.

Pengukur FPS

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

Untuk menampilkan pengukur FPS:

1. Buka Setelan DevTools.
2. Klik Umum.
3. Di bagian Rendering, aktifkan Force accelerated compositing dan Show FPS meter.

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

Menemukan tata letak sinkron paksa (thrashing tata letak)

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 (seperti offsetHeight atau offsetWidth), Chrome akan dipaksa untuk segera dan secara sinkron melakukan tata letak halaman. Tata letak sinkron paksa ini dapat secara signifikan mengurangi performa rendering, terutama jika dilakukan berulang kali pada hierarki DOM yang besar. Skenario ini juga disebut "thrashing tata letak".

Rekaman Linimasa akan memberi tahu Anda saat mendeteksi tata letak sinkron paksa dengan ikon peringatan kuning di samping data Linimasa yang sesuai. Mengarahkan kursor ke salah satu data ini akan menampilkan pelacakan tumpukan untuk kode yang membatalkan validasi tata letak, dan kode yang memaksa tata letak.

Pop-up ini juga menampilkan 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 mengetahui informasi selengkapnya.

Pelacakan alokasi objek

Pelacakan alokasi objek adalah jenis profil memori baru yang menampilkan alokasi dari waktu ke waktu. Saat Anda memulai pelacakan alokasi, DevTools akan mengambil snapshot heap secara terus-menerus dari waktu ke waktu. Profil alokasi heap menampilkan tempat dibuatnya objek dan mengidentifikasi jalur yang mempertahankan.

Untuk melacak alokasi objek:

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

Profiling kanvas (eksperimental)

Terakhir, berikut adalah fitur yang sepenuhnya eksperimental untuk dijelajahi. Dengan pembuatan profil kanvas, Anda dapat merekam dan memutar ulang panggilan WebGL yang dibuat pada elemen kanvas. Anda dapat menelusuri 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 Pemeriksaan kanvas di tab Eksperimen pada setelan DevTools. (Jika Anda tidak melihat tab ini, buka about:flags, aktifkan Enable Developer Tools experiments, lalu mulai ulang Chrome.)
2. Klik tab Profil.
3. Pilih Capture canvas frame, lalu klik Take snapshot.
4. Sekarang Anda dapat menjelajahi panggilan yang digunakan untuk membuat bingkai kanvas.