Chrome DevTools berkembang dengan cepat dan kami ingin menarik perhatian Anda ke beberapa fungsi dan peningkatan baru yang telah kami perkenalkan ke beberapa komponen. Yaitu, kami akan membahas beberapa perubahan UI, pembuatan profil JS beresolusi tinggi, dan fitur Workspace baru.
- Pembuatan profil resolusi tinggi kini memiliki presisi 0,1 milidetik
- Toolbar naik ke bagian atas Devtools dan Penggantian dipindahkan ke panel samping konsol
- Ruang Kerja menambahkan beberapa fitur untuk mendukung penambahan/penghapusan/penelusuran file
Pembuatan Profil Resolusi Tinggi
Profiling CPU adalah fitur yang cukup berguna untuk melihat seberapa efisien JavaScript Anda. Selain tampilan profil tradisional, kami memperkenalkan Diagram Api musim panas ini, yang secara visual merepresentasikan pemrosesan JavaScript halaman dari waktu ke waktu. Alat ini dapat digunakan untuk melihat dengan mudah seberapa dalam stack panggilan Anda berjalan serta berapa lama waktu yang diperlukan setiap fungsi untuk diproses.
Hingga baru-baru ini, representasi Berat (bottom up) dan Pohon (top down) tradisional, serta Diagram Api, hanya akan menampilkan proses hingga presisi 1 milidetik. Untuk sebagian besar aplikasi, hal ini tidak masalah. Namun, jika Anda menangani sesuatu yang kecepatannya sangat penting di UI, seperti game, resolusi 1 milidetik mungkin terlalu besar untuk mendapatkan hasil yang bermakna terkait hal yang menyebabkan situs Anda lambat atau UI Anda tampak lambat. Untuk mengaktifkan Pembuatan Profil Resolusi Tinggi (saat ini hanya Canary):
- Buka Setelan DevTools.
- Pada tab General, di bagian Profiler, aktifkan Profiling CPU resolusi tinggi.
Berikut adalah contoh Diagram Api yang terlihat dalam pembuatan profil normal dan dengan resolusi tinggi, tempat kami membuat profil pemuatan halaman beranda HTML5Rocks.com:
Dengan resolusi pembuatan profil normal, waktu proses selalu dibulatkan ke atas hingga milidetik berikutnya, sehingga proses yang hanya memerlukan 0,1 milidetik atau kurang masih dilaporkan sebagai memerlukan 1,0 milidetik, dan proses lainnya mungkin tidak ditampilkan sama sekali dalam stack panggilan.
Pembuatan profil beresolusi tinggi memiliki overhead yang besar di VM JavaScript, itulah sebabnya profiling dinonaktifkan secara default. Meskipun terlihat lebih keren daripada resolusi pembuatan profil normal, sebaiknya gunakan hanya jika Anda benar-benar memerlukan presisi.
Peningkatan UI DevTools
Meskipun selalu ada hal baru yang diluncurkan di Canary, kami ingin menarik perhatian Anda ke beberapa perubahan UI utama: Tombol yang naik ke bagian atas UI secara umum, panel informasi dan navigasi Linimasa, serta pemindahan Pengabaian ke Panel Konsol.
Pertama, mari kita lihat asal kita. Karena kita sedang membahas Timeline, saya akan mencoba menyelesaikan dua hal sekaligus dengan satu screenshot. Berikut tampilan Linimasa di Chrome (stabil) saat ini:
Berikut tampilan Linimasa sekarang.
Perhatikan hal-hal berikut:
- Sekarang, toolbar dan tombol semuanya berada di bagian atas layar, baik untuk Timeline tertentu di sebelah kiri maupun DevTools umum di sebelah kanan.
- Data Linimasa kini memiliki struktur bertingkat di panel sebelah kiri, dan Anda bahkan dapat menggunakan keyboard untuk men-scroll-nya. Selain menggunakan tombol atas dan bawah untuk men-scroll ke atas dan ke bawah, Anda juga dapat menggunakan tombol kiri dan kanan untuk membuka dan menutup data bertingkat.
- Detail waktu kini ditampilkan di panel di sebelah kanan untuk entri mana pun yang Anda pilih. (Anda juga dapat mengarahkan kursor ke entri lain untuk mendapatkan informasinya.)
Sekarang, mari kita lihat panel samping konsol. Untuk membuka panel samping konsol, tekan Alt+Esc dari dalam DevTools atau tekan tombol panel samping konsol 
dan panel samping akan ditarik ke atas dari bawah.
Secara default, Anda akan memiliki tab Konsol dan Penelusuran di sana. Untuk membuka fungsi yang sebelumnya dikenal sebagai Penggantian, buka setelan DevTools dan centang kotak di samping "Tampilkan tampilan 'Emulation' di panel samping konsol". Tutup kotak setelan dan Anda akan memiliki tab Emulation di panel samping konsol seperti screenshot di sini:
Dan Anda dapat melakukan semua emulasi di sana.
Alasan perubahan ini adalah karena sebelumnya, Anda harus masuk dan keluar dari Setelan untuk mengubah penggantian emulasi, lalu kembali dan melihat halaman Anda. Sekarang Anda dapat mengubah penggantian emulasi sambil tetap mengakali gaya.
Ruang Kerja yang Ditingkatkan
Ruang kerja secara khusus adalah fitur yang dapat menyederhanakan alur kerja penulisan Anda secara signifikan, tetapi fitur ini tidak mendapatkan apresiasi yang semestinya. Dengan Workspace, Anda dapat membuat perubahan di DevTools, melihatnya dirender di browser, dan menyimpannya ke versi lokal file yang persisten, tanpa keluar dari Chrome, bukan bereksperimen dan membuat perubahan di DevTools dan harus menyalin dan menempelkan perubahan kembali ke file sumber.
Jika Anda belum membaca artikel Revolusi Chrome Developer Tools 2013, baca artikel tersebut, lalu kembali ke sini untuk mempelajari cara kami meningkatkan kualitas fitur tersebut dalam beberapa bulan terakhir.
Menambahkan File dengan Lebih Mudah
Pada saat artikel Revolutions 2013, membuat ruang kerja baru memerlukan penambahan folder ke ruang kerja, lalu memetakan folder ke resource jaringan. Kami telah menyederhanakan proses ini menjadi satu langkah: Cukup klik kanan di panel kiri Sumber, lalu pilih Tambahkan Folder ke Ruang Kerja. Tindakan ini akan membuka dialog file tempat Anda dapat memilih folder baru untuk ditambahkan ke Ruang Kerja. (Tindakan ini tidak menambahkan folder yang saat ini ditandai ke Workspace Anda.)
Membuat dan Menghapus File
Anda kini dapat menambahkan file baru ke direktori lokal yang digunakan untuk Workspace dalam Workspace itu sendiri. Cukup klik kanan folder di panel Sumber kiri, lalu pilih File Baru.
Anda juga dapat menghapus file dari dalam Ruang Kerja. Klik kanan file di panel Sumber kiri, lalu pilih Hapus File.
Anda juga dapat menduplikasi file dengan memilih Duplicate File.
Muat ulang
Setelah Anda dapat membuat file baru (atau menghapus file) langsung di ruang kerja, direktori Sumber juga akan otomatis memuat ulang dan menampilkan file baru ini. Jika tidak, Anda selalu dapat mengklik kanan folder dan memilih Refresh dari menu pop-up untuk memaksa pembaruan.
Hal ini juga berguna jika Anda mengubah file yang terbuka di editor lain dan ingin perubahan tersebut muncul di DevTools.
Menelusuri di Seluruh File
Kami telah sedikit meningkatkan antarmuka untuk menelusuri file, dan sekarang Anda juga dapat menelusuri string di semua file di ruang kerja serta semua file yang dimuat ke DevTools. Anda dapat menelusuri string atau ekspresi reguler, dan kami akan mencocokkan setiap kemunculan di setiap file atau halaman. Untuk menelusuri beberapa file di Ruang Kerja (saat ini di Canary):
- Buka panel samping konsol dengan menekan tombol Escape, lalu klik tab Penelusuran di samping Konsol untuk membuka jendela Penelusuran
ATAU
Tekan Ctrl + Shift + F (Cmd + Opt + F di Mac) untuk membuka jendela Penelusuran.
- Ketik kueri Anda ke dalam kotak Sumber Penelusuran, lalu tekan Enter. Jika kueri Anda adalah ekspresi reguler atau tidak boleh peka huruf besar/kecil, klik kotak yang sesuai.
Daftar yang Diabaikan
Menelusuri teks file atau memfilter nama file dapat menjadi sangat merepotkan jika Anda memiliki banyak file .git atau file README.md yang mengacaukan hasil.
Oleh karena itu, kami telah menambahkan fitur daftar abaikan ke Workspace sehingga Anda dapat mengecualikan jenis file atau folder tertentu saat melihat dan menelusuri ruang kerja.
Berikut cara melihat dan mengubah daftar yang diabaikan bersama saat ini di Workspace:
- Buka Setelan DevTools.
- Klik Ruang Kerja.
- Di bagian Umum, dalam kotak Pola pengecualian folder, Anda dapat melihat dan/atau mengedit pola.
Kami mengirimkan pola pengecualian global default berikut:
Regex ini mengecualikan metadata dari Git, SVN, Mercurial, file project dari Eclipse dan IntelliJ, file OS X DS_Store dan Trash, serta beberapa hal lain yang layak diabaikan seperti cache dari Sass. Seluruh foldernya, termasuk turunan apa pun, dikecualikan dari UI agar tidak muncul di UI dan tidak muncul saat menelusuri file.
Daftar Abaikan Khusus Ruang Kerja
Untuk lebih spesifik, Anda juga dapat memilih untuk mengecualikan file dan folder di dalam ruang kerja tertentu untuk mengurangi kekacauan dalam penelusuran. Folder yang dikecualikan juga tidak akan muncul di direktori sumber.
Untuk mengecualikan seluruh folder dari ruang kerja, klik kanan folder di panel Sumber sebelah kiri, lalu pilih Kecualikan Folder. Untuk melihat pemetaan dan folder yang dikecualikan untuk folder ruang kerja tertentu:
- Buka Setelan DevTools.
- Klik Ruang Kerja.
- Sorot folder yang Anda minati.
- Klik Edit dan jendela "Edit file system" akan muncul; Anda dapat menambahkan atau menghapus pemetaan dan/atau folder yang dikecualikan dari jendela ini.
