Chrome DevTools bergerak cepat dan kami ingin Anda memperhatikan beberapa fungsi baru dan peningkatan yang telah kami perkenalkan pada beberapa komponen. Yaitu, kita akan membahas beberapa perubahan UI, pembuatan profil JS beresolusi tinggi, dan fitur Workspace baru.
- Pembuatan profil resolusi tinggi kini menjadi presisi 0,1 milidetik
- Toolbar berada di bagian atas Devtools dan Overrides yang 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 biasa, kami memperkenalkan Flame Chart pada musim panas ini, yang secara visual menggambarkan pemrosesan JavaScript halaman dari waktu ke waktu. Laporan ini dapat digunakan untuk melihat dengan mudah seberapa dalam stack panggilan Anda berjalan serta berapa lama waktu yang dibutuhkan untuk memproses setiap fungsi.
Sampai saat ini, representasi tradisional Heavy (bottom up) dan Tree (top down), serta Flame Chart, hanya akan menampilkan proses hingga presisi milidetik. Untuk sebagian besar aplikasi, hal ini tidak menjadi masalah. Namun, jika Anda mengerjakan sesuatu yang mengutamakan kecepatan di dalam UI, seperti game -- resolusi 1 milidetik mungkin terlalu tebal untuk mendapatkan hasil yang berarti untuk penyebab situs menjadi lambat atau UI tampak lambat. Untuk mengaktifkan Profiling Resolusi Tinggi (saat ini hanya Canary):
- Buka Setelan DevTools.
- Di tab General, di bagian Profiler, aktifkan High resolution CPU profiling.
Berikut adalah contoh Flame Chart yang terlihat pada pembuatan profil normal dan dengan resolusi tinggi, di mana kita membuat profil yang memuat halaman beranda HTML5Rocks.com:
Dengan resolusi pembuatan profil normal, waktu proses selalu dibulatkan ke milidetik berikutnya, sehingga proses yang hanya membutuhkan waktu 0,1 milidetik atau kurang tetap dilaporkan memerlukan waktu 1,0 milidetik, dan proses lain mungkin tidak ditampilkan sama sekali dalam stack panggilan.
Pembuatan profil resolusi tinggi memiliki overhead besar di VM JavaScript, sehingga dinonaktifkan secara default. Meskipun terlihat lebih dingin daripada resolusi pembuatan profil normal, sebaiknya hanya gunakan jika Anda benar-benar membutuhkan presisi.
Peningkatan UI DevTools
Meskipun selalu ada hal baru yang diluncurkan di Canary, kami ingin meminta perhatian Anda terhadap beberapa perubahan utama pada UI: Tombol yang muncul di bagian atas UI secara umum, panel informasi dan navigasi Linimasa, serta relokasi Penggantian ke Panel Samping Konsol.
Pertama, mari kita lihat asal kita. Karena kita tetap membicarakan Linimasa, saya akan mencoba membunuh dua burung pertama dengan sepasang screenshot. Berikut tampilan Linimasa di Chrome (stabil) saat ini:
Dan seperti inilah tampilan Linimasa sekarang.
Perhatikan hal-hal berikut:
- Sekarang, toolbar dan tombol berada di bagian atas layar, baik untuk tombol Linimasa tertentu di sebelah kiri maupun tombol DevTools umum di kanan.
- Linimasa kini memiliki struktur bertingkat di panel sebelah kiri, dan Anda bahkan dapat menggunakan keyboard untuk men-scroll data. 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 record bertingkat.
- Detail waktu kini ditampilkan pada panel di sebelah kanan untuk entri mana pun yang telah 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
Escape dari dalam DevTools atau tekan tombol panel samping konsol
dan
panel samping akan bergulir ke atas dari bawah.
Secara default, Anda akan memiliki tab Konsol dan Penelusuran di sana. Untuk membuka fungsi yang sebelumnya dikenal sebagai Overrides, buka setelan DevTools dan centang kotak di samping "Show 'Emulation' view in console panel samping". Tutup kotak settings dan Anda akan melihat tab Emulation di panel samping konsol seperti screenshot di sini:
Anda juga dapat melakukan semua emulasi di sana.
Alasan perubahan ini adalah sebelumnya, Anda harus login dan keluar dari Setelan untuk mengubah penggantian emulasi, lalu kembali dan melihat halaman Anda. Sekarang Anda dapat mengubah penggantian emulasi sambil tetap memanipulasi gaya.
Ruang Kerja yang Lebih Baik
Ruang kerja khususnya adalah fitur yang dapat sedikit menyederhanakan alur kerja penulisan, tetapi tidak mendapatkan apresiasi sebanyak yang semestinya. Dengan Workspace, daripada bereksperimen dan melakukan perubahan di DevTools dan harus menyalin dan menempelkan perubahan kembali ke file sumber, Anda dapat membuat perubahan di DevTools, melihatnya dirender di browser, dan menyimpannya ke versi lokal file Anda yang persisten -- semuanya tanpa keluar dari Chrome.
Jika Anda belum membaca artikel Chrome Developer Tools Revolutions 2013, silakan baca artikel tersebut dan kembali lagi ke sini untuk mempelajari cara kami menyempurnakan fitur tersebut dalam beberapa bulan terakhir.
Menambahkan File dengan Lebih Mudah
Pada artikel Revolusi 2013, untuk membuat ruang kerja baru, Anda perlu menambahkan folder ke ruang kerja Anda, lalu memetakan folder tersebut ke resource jaringan. Kami telah menyederhanakan proses ini menjadi satu langkah: Cukup klik kanan di panel kiri Sources, lalu pilih Add Folder to Workspace. Tindakan ini akan membuka dialog file tempat Anda dapat memilih folder baru untuk ditambahkan ke Ruang Kerja. (Tindakan ini tidak akan menambahkan folder yang saat ini ditandai ke Ruang Kerja Anda.)
Membuat dan Menghapus File
Sekarang Anda dapat menambahkan file baru ke direktori lokal yang digunakan untuk Ruang Kerja dalam Ruang Kerja itu sendiri. Cukup klik kanan folder di panel Sources sebelah kiri, lalu pilih New File.
Anda juga dapat menghapus file dari dalam Ruang Kerja. Klik kanan file di panel Source kiri, lalu pilih Delete 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 dimuat ulang dan menampilkan file baru ini. Jika tidak, Anda dapat mengklik kanan folder kapan saja, lalu memilih Refresh dari menu pop-up untuk memaksa refresh.
Ini juga berguna jika Anda kebetulan mengubah file terbuka di editor lain dan ingin perubahan muncul di DevTools.
Telusuri di Seluruh File
Kami telah sedikit menyempurnakan antarmuka untuk menelusuri file. Kini 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 mencocokkan setiap kemunculan di setiap file atau halaman. Untuk menelusuri beberapa file di Ruang Kerja (saat ini dalam Canary):
- Buka panel samping konsol dengan menekan tombol Escape, lalu klik tab Search di samping Konsol untuk membuka jendela Penelusuran
ATAU
Tekan Ctrl + Shift + F (Cmd + Opt + F di Mac) untuk membuka jendela Penelusuran.
- Ketik kueri dalam kotak Sumber Penelusuran, lalu tekan Enter. Jika kueri merupakan ekspresi reguler atau tidak peka huruf besar/kecil, klik kotak yang sesuai.
Daftar yang Diabaikan
Menelusuri teks file atau memfilter nama file bisa sangat membosankan jika Anda memiliki banyak file .git atau file README.md yang membuat hasil Anda berantakan.
Karena itu, kami telah menambahkan fitur daftar yang diabaikan ke Ruang Kerja 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 Ruang Kerja:
- Buka Settings DevTools.
- Klik Ruang Kerja.
- Di bagian Umum, dalam kotak Pola kecualikan folder, Anda dapat melihat dan/atau mengedit pola.
Kami mengirimkan pola pengecualian global default berikut:
Ekspresi reguler ini mengecualikan metadata dari Git, SVN, Mercurial, file project dari Eclipse dan IntelliJ, OS X DS_Store dan file Trash, dan beberapa hal lain yang layak diabaikan seperti cache dari Sass. Seluruh foldernya, termasuk turunannya, dikecualikan dari UI agar tidak muncul di UI dan tidak muncul saat menelusuri file.
Daftar Pengabaian khusus Workspace
Agar lebih spesifik, Anda juga dapat memilih untuk mengecualikan file dan folder di dalam ruang kerja tertentu agar penelusuran tidak berantakan. Folder yang dikecualikan juga tidak akan muncul di direktori sumber.
Untuk mengecualikan seluruh folder dari ruang kerja Anda, klik kanan folder di panel Sumber kiri, lalu pilih Exclude Folder. Untuk melihat pemetaan dan folder yang dikecualikan untuk folder ruang kerja tertentu:
- Buka Setelan DevTools.
- Klik Ruang Kerja.
- Tandai folder yang Anda minati.
- Klik Edit lalu jendela "Edit file system" akan muncul; Anda dapat menambahkan atau menghapus pemetaan dan/atau folder yang dikecualikan dari jendela ini.
