Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips

Chrome Dev Tools: JavaScript dan Performance

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Di bagian ketiga dari seri Chrome Developer Tools, kita akan meninjau cara memodifikasi dan men-debug JavaScript. Optimasi adalah bagian penting dari proses pengembangan, terutama untuk aplikasi yang sangat penting. Kita juga akan membahas teknik untuk mengidentifikasi kemacetan potensial pada kode kita.

Seperti dalam dua artikel sebelumnya, saya akan berfokus pada fitur yang ditemukan di Chrome Canary build (versi 26.0, pada tulisan ini). Saya akan membahas panel Sources dan Timeline.


Panel Sources

Panel Sources adalah tempat masuk untuk debugging JavaScript. Panel ini, digabungkan dengan Panel Console, menjadikannya tool yang sangat tangguh! Ini adalah antarmuka point-dan-click yang memungkinkanmu menghentikan eksekusi JavaScript dan memeriksa semua variabel dan objek dalam lingkup saat ini.

The Sources panel
  1. Panel Sources. Jika kamu tidak melihat banyak skrip seperti yang kamu harapkan, segarkan halaman dengan panel Sources yang terbuka.
  2. Panel ini bisa juga berupa hidden, auto-hidden atau fixed. Klik ikon kecil di sebelah kanan 'Content scripts' untuk beralih di antara status ini. Panel ini dapat diubah ukurannya.
  3. Tab Sources yang berada di panel sisi kiri; kamu mungkin akan membuka tab ini hampir setiap saat. Sumber daya yang didaftar dipisahkan oleh sub-domain, dan kamu dapat berharap untuk melihat CSS, JavaScript, dan HTML di dalam tab tersebut.
  4. Kamu mungkin merasa berguna untuk mengedit CSS dan JavaScript mu di Developer Tool.

  5. Tab Content Scripts (tidak aktif di layar) mungkin pada awalnya menampilkan banyak skrip dengan nama yang aneh. Ini sebenarnya adalah ekstensi Chrome yang dimuat di halaman. Ini berguna untuk debugging ekstensi yang sebenarnya. Jika tidak, kamu dapat menghindari melihatnya dengan membuka halamanmu di jendela penyamaran (incognito); sebagian besar ekstensi dinonaktifkan secara default dalam mode penyamaran.
  6. Panel konten utama menampilkan konten dari skrip yang dipilih. Memilih beberapa skrip menciptakan antarmuka tab yang mirip dengan IDE.
  7. Panel ini berisi sub-panel yang menyediakan utilitas debugging JavaScript yang berguna. Di bagian atas panel adalah ikon untuk melangkah melalui kodemu.
  8. Watch Expressions tidak persis seperti itu, itu 'mengamati' ekspresi yang kamu ketikkan. Jika kamu ingin mengetahui nilai kata kunci this pada berbagai tahap program JavaScript, kamu dapat mengamati kata kunci this untuk melihat nilai-nilainya yang berbeda dari waktu ke waktu. Klik tombol tambah untuk menambahkan ekspresi, dan jika ekspresi tidak diperbarui, tekan tombol segarkan kecil di samping tombol tambah.
  9. XHR Breakpoints memungkinkan kita menghentikan eksekusi kode JavaScript saat membuat request Ajax. Kami mendapatkan kontrol lebih besar atas perilaku ini dengan memberikan nilai di field 'Break when URL contains', yang muncul ketika kamu menekan tombol tambah. Tidak memberikan nilai menyebabkan debugger untuk memutuskan request XHR apa pun.
  10. Event Listener breakpoint memungkinkanmu menetapkan titik jeda untuk peristiwa tertentu. Tangkapan layar hanya mencantumkan kategori tingkat atas. Misalnya, 'Timer' memiliki event listener breakpoints individual berikut: 'Set Timer', 'Clear Timer' dan 'Timer Fired'.
  11. Jika kamu menemukan kode yang di minifikasi, memilih 'Pretty Print' berfungsi sebagai penghias JavaScript.

Tab Sources

Tab sumber mencantumkan sumber daya yang dikelompokkan berdasarkan sub-domain tempat mereka dilayani. Setiap sumber daya memiliki menu konteks (diungkapkan dengan mengklik kanan pada sumber daya) dengan satu set opsi umum. Satu pilihan, bagaimanapun, sangat menarik: Local Modifications, yang akan kita lihat nanti.

Catatan: Kamu dapat melihat daftar file sumber sebagai daftar yang datar (yaitu tidak ada dalam folder yang dikelompokkan berdasarkan sub-domain) dengan menghapus centang 'Show folders' di Settings > General.

Sources Tab

Mengklik pada sumber daya menampilkannya di panel konten utama. Jangan lupa untuk mengaktifkan mode pretty print untuk sumber daya yang diperkecil, karena beberapa minifiers mengubah nama variabel untuk dapat membuat kode lebih sulit untuk dipahami. Semoga, lebih banyak pengembang akan menghasilkan peta sumber di masa mendatang, sehingga lebih mudah untuk bekerja dengan kode yang di minifikasi.

Kamu dapat mengedit sebagian besar file di panel konten utama, dan perubahan tersebut langsung tercermin di browser. Setelah membuat perubahan pada sumber daya, menu konteks menampilkan kemampuan untuk Menyimpan (meskipun tidak selamanya) atau Simpan sebagai (menyimpan versi baru secara lokal). Ketika bekerja dengan situs lokalmu sendiri, kamu mungkin merasa berguna untuk mengedit CSS dan JavaScript mu di Developer Tool, bukan IDE-mu. Menyimpan modifikasi, dalam hal ini, memodifikasi file sumber yang sebenarnya. Tool-tool seperti Tincr atau chrome-devtools-autosave dapat membantu mengotomatiskan alur kerja ini.

Menu konteks sumber daya juga menyediakan opsi untuk mengungkapkan sumber daya di panel network.

Sources Tab

Revisi

Revisi (revision) adalah titik baru dalam masa hidup sumber daya, yang telah dimodifikasi. Mengedit dan menyimpan kode dari panel sources menciptakan revisi baru, dan perubahan style yang dibuat dalam panel Elements sebenarnya memicu revisi baru!

Setelah kamu membuat beberapa perubahan, kamu dapat mengeklik kanan sumber daya dan memilih Local Modifications. Ini akan membuka panel Local Modifications baru yang berisi diff file asli dan yang diedit. Dalam panel Local Modifications, kita dapat mengembalikan file sumber yang dimodifikasi secara keseluruhan (berguna ketika kamu telah membuat sejumlah besar perubahan yang tidak diinginkan) dengan mengklik 'revert' di samping nama file.

Panel Main Content

Developer Tool cukup baik untuk memperingatkan kita tentang potensi pengoptimalan.

Panel konten utama memiliki banyak fitur yang akan kamu temukan di editor kode dasar: nomor baris, penyorotan sintaks, kemampuan untuk membuat tab dan fungsi 'undo'. Meskipun tidak cocok dengan IDE yang lengkap, tidak buruk untuk pengeditan cepat.

Breakpoints

Breakpoints memungkinkan kita menghentikan eksekusi kode JavaScript dan memeriksa lingkungan kerja saat ini. Sebagai contoh: asumsikan kita memiliki perulangan for sederhana yang menambahkan item ke array. Tujuan kita adalah memahami dengan tepat cara kerja bagian dalam setiap perulangan. Kita dapat dengan mudah menggunakan console.log untuk mencatat variabel yang ingin kita periksa. Meskipun teknik ini memberikan hasil yang kamu inginkan, teknik ini tentu bukan teknik debugging yang paling efisien. Dengan menggunakan breakpoint, kita dapat menghentikan eksekusi kode sementara di dalam perulangan for dan memeriksa semua variabel dalam lingkup konteks.

Untuk menambahkan breakpoint, klik pada nomor baris; kamu juga dapat mengklik kanan pada nomor baris dan memilih opsi "Add Breakpoint". Setelah mengatur breakpoint-mu, refresh halaman dan perhatikan bahwa breakpoint tetap ada di antara pemuatan halaman. Jika kode belum dieksekusi (misalnya, breakpoint diset di dalam event handler klik), maka kamu dapat memulai eksekusi kode tanpa refresh halaman.

Kamu dapat memecahkan kode breakpoint dalam kodemu dengan menggunakan pernyataan debugger; dalam kodemu. Developer Tool (dan sebagian besar debugger JavaScript) mengenali ini sebagai suatu breakpoint.

Ketika mencapai breakpoint, halaman berwarna abu-abu dan bari kode menyoroti biru. Pada titik ini, kita dapat menekan tombol escape untuk menampilkan panel console. Yang menarik adalah bahwa kode yang ditulis dan dijalankan dalam konsol (sementara berhenti pada breakpoint) sebenarnya mengeksekusi dalam konteks yang sedang dihentikan sementara! Biasanya, kata kunci this mengacu pada objek window global; sedangkan melihat this di event handler click menunjukkan nilai sebagai target event (suatu elemen).

Pada gambar di atas, bagian abu-abu adalah dokumen itu sendiri, dan Developer Tool menyorot baris JavaScript saat ini. Di konsol, kamu melihat hasil pemeriksaan beberapa variabel. Dan di sebelah kanan panel konten adalah panel "Scope Variables", di mana kamu dapat memeriksa semua variabel dan objek dalam lingkup saat ini.

Breakpoints Kondisional

Breakpoint kondisional memungkinkanmu memutuskan kapan kondisi tertentu benar.

Di panel sisi kanan panel Sumber, kamu akan melihat tab XHR Breakpoints. Klik 'Add XHR Breakpoint' pada situs yang mendukung Ajax favoritmu. Membiarkan field 'URL Contains' kosong memutuskan request XHR apa pun.

ajax breakpoints

Ini menyajikan pengembang dengan kesempatan yang baru dan tangguh. Kita dapat menavigasi ke situs yang belum kita buat, tidak pernah terlibat, dan mulai melakukan debug kode berdasarkan peristiwa dan kriteria tertentu. Jadi berhenti sejenak pada request Ajax itu bagus, tetapi event lain apa yang bisa kita hancurkan?

Event Listener Breakpoints

Panel sources memiliki antarmuka point-and-click untuk mengatur breakpoint yang cocok dengan event listener tertentu. Perhatikan bahwa memutus event tertentu hanya berfungsi ketika halaman yang dimaksud sedang mendengarkan event itu. Jika kita melakukan break pada event Control > Resize, memiliki kode seperti yang berikut ini akan memastikan kode terputus ketika event tersebut aktif:

event listener breakpoints

Jadi, kapan pemutusan pada event tertentu berguna?

Breakpoints bertahan di antara pemuatan halaman

  • Saat memainkan game HTML5 baru itu, dan kamu ingin tahu apa yang terjadi dalam putaran permainan utamanya. Coba atur Request Animation Frame dan event listener Timer dan periksa apa yang terjadi di setiap eventnya.
  • Plugin JavaScript responsif yang baru itu dapat dengan baik memaparkan halaman pada ukuran jendela tampaknya cukup keren. Tetapi sebagai pengembang, kita ingin tahu apa yang dilakukan kode ketika kita mengubah ukuran window. Coba atur event listener breakpoint Control > Resize, dan kamu dapat melakukan hal itu. Catatan: Kamu kemungkinan besar harus melewati banyak kode library. Cobalah pada versi jQuery dari plugin Masonry, dan perhatikan bagaimana melangkah melalui kode pada perubahan ukuran kembali akhirnya membawamu melalui banyak bagian dalam jQuery.
  • Banyak website, termasuk GMail, memungkinkan pengguna untuk menempel konten. Breakpoint Clipboard > Paste akan berguna dalam kasus ini.
  • Opsi breakpoint berguna lainnya meliputi: pengiriman form, menyalin data, event mutasi DOM, orientasi perangkat, penekanan tombol, request Ajax, event mouse (melayang, bergerak, mengklik dll), setInterval, touchstarts dan banyak lagi.

DOM Breakpoints

Tab DOM Breakpoints menampilkan breakpoints untuk DOM. Cara sederhana untuk melihat ini dalam tindakannya adalah untuk menemukan elemen yang, misalnya, ketika diklik telah mengubah properti className-nya. Temukan elemen di panel Elements, klik kanan dan menuju ke Break On > Attributes Modifications. Kode yang sekarang akan putus ketika nilai atribut elemen itu berubah.

Handler event onclick di atas dihitung sebagai modifikasi atribut, yang menyajikan sesuatu yang mirip dengan ini:

Pilihan lain termasuk:

  • Subtree modifications terjadi ketika node di tree dimasukkan atau dihapus.
  • Atribut Modifications terjadi saat mengubah atribut elemen.
  • Node Removal dipanggil saat menghapus elemen; misalnya: element.remove().

Catatan: Chrome tampaknya telah menerapkan metode remove(). Beberapa browser tidak mendukung metode ini; jadi, removeChild() perlu digunakan sebagai gantinya.


Panel Timeline

Panel Timeline adalah tempat kamu menyelidiki masalah kinerja aplikasi web-mu. Tujuan utama panel Timeline adalah (pada saat penulisan) untuk melihat informasi, dibandingkan dengan panel lain yang memungkinkanmu untuk melakukan tindakan yang merusak pada halaman.

Saat yang mungkin kamu ingin untuk menggunakan panel Timeline meliputi:

  • Menyelidiki kinerja pengguliran halamanmu.
  • Mencoba meningkatkan FPS animasi-mu.
  • Membuat laman web seluler yang kemungkinan dilihat di berbagai perangkat lama dan baru.
  • Menjadikan web bebas jank!
The timeline panel
  1. Ketiga item ini (Events, Frames dan Memory) menyajikan pandangan yang berbeda, masing-masing mengilustrasikan berbagai potongan informasi terkait kinerja.
  2. Dalam tampilan frames ini, setiap bar mewakili bingkai yang diberikan oleh browser. Semakin 'penuh' setiap bar vertikal, semakin buruk kinerjanya, dan bagian berwarna di bar dijelaskan dalam legenda di bagian bawah panel Timeline.
  3. Kamu dapat memecahkan kode breakpoint dalam kodemu dengan menggunakan pernyataan debugger; dalam kodemu.

  4. Sebuah popover untuk merekam secara individu, merinci berapa lama waktu record yang dibutuhkan untuk mengeksekusi.  Popover akan, dalam beberapa kasus, menghubungkan ke baris kode yang menyebabkan catatan untuk dieksekusi (ini lebih mungkin terjadi dengan catatan berdasarkan skrip).
  5. Daftar records. Beberapa catatan dipicu oleh kode kita; catatan lain mungkin disebabkan oleh tindakan pengguna. Misalnya, menggulir halaman menyebabkan event 'Paint'.
  6. Setiap record memiliki baris yang sesuai yang menggambarkan lamanya waktu yang diperlukan untuk menyelesaikannya. Seperti yang ditunjukkan pada tangkapan layar, kamu dapat membuka beberapa bar dengan mengklik panah tarik-turun.
  7. Memfilter opsi yang mendiktekan rekaman apa yang akan ditampilkan. Semua rekaman ditampilkan secara default. Jika kamu menginvestigasi masalah kinerja jenis tertentu, kamu dapat membersihkan rekaman-rekaman dengan menggunakan opsi pemfilteran.
  8. Secara default, semua rekaman ditampilkan terlepas dari berapa lama waktu yang dibutuhkan untuk menyelesaikan. Jika kamu ingin memancing rekaman yang luar biasa panjang, ubah dari 'All' ke salah satu opsi yang ditentukan sebelumnya (misalnya 15ms).
  9. Ini mulai merekam (seperti di panel Network). Berhati-hatilah membiarkannya merekam untuk jangka waktu yang panjang; kamu akan dibombardir dengan data! Ketika melihat masalah pengguliran, saya mulai merekam, menggulir halaman selama 2 detik dan kemudian berhenti merekam.

Rekaman

recording icon

Di Bagian 2, kamu mungkin ingat bagaimana kita mulai merekam informasi jaringan sebelum halaman dimuat untuk menangkap sebanyak mungkin permintaan jaringan. Kita tidak melakukan itu di panel Timeline; kita lebih baik merekam acara singkat dan spesifik. Kami tidak perlu harus *melakukan* apa pun. Kita dapat membiarkannya merekam untuk melihat apa yang terjadi ketika pengguna menganggur, atau jika ada pengatur waktu yang berjalan di latar belakang.

Tab Events, Frames, dan Memory diisi saat merekam; jadi, pastikan untuk melihat melalui mereka untuk menemukan data yang kamu butuhkan. Bagian Memori dapat membantumu menangkap potensi kebocoran memori.

Rekaman di Tab Frames

Rekaman ditampilkan selama dan setelah perekaman. Cukup banyak data yang ditangkap dalam rekaman, seperti yang ditunjukkan pada gambar berikut.

Screenshot ini menunjukkan beberapa permintaan jaringan (biru), dan beberapa 'menghitung ulang style' (ungu). Penghitungan ulang style dapat terjadi karena sejumlah alasan. Rekaman kuning adalah skrip, dan hijau menunjukkan rendering halaman.

Mengeklik atau mengarahkan ke atas rekaman akan menampilkan lebih banyak informasi. Misalnya, melayang di atas rekaman 'paint' mungkin menunjukkan bagian halaman yang dilukis.

tips in the timeline panel

Developer Tool terkadang akan menautkan rekaman ke panel lain. Misalnya, tautan gambar mengarahkanmu ke panel Resources dengan gambar tersebut dalam fokus, dan rekaman XHR mungkin tertaut ke entri terkait di panel Network.

image preview in the popover of the timeline panel

Developer Tool cukup berbaik hati untuk memperingatkan kita tentang potensi pengoptimalan. Perhatikan ikon pemberitahuan kecil di sebelah kanan beberapa rekaman dalam gambar berikut. Jika itu memudar, kamu harus menelusuri untuk menemukan rekaman aktual yang berisi informasi yang berguna.

tips in the timeline panel

Popovers terkadang berisi tautan ke baris kode yang menyebabkan rekaman ditampilkan. Tetapi sepatah kata peringatan: pencetakan yang cantik tidak akan selalu membantu - terutama ketika melihat kode pihak ketiga. Salah satu pilihan adalah mengatur breakpoint pada baris yang kamu ambil. Setelah debugger berhenti, kamu dapat melihat isi variabel untuk lebih memahami maksud kodenya.

Being taken to the line of code from timeline to source panel

Penyaringan

Jika kamu seperti saya, kamu selalu berakhir dengan menangkap lebih banyak data yang kamu butuhkan, tetapi kamu dapat membentuk pilihan di bar vertikal (frame) yang hanya menampilkan rekaman yang sesuai dengan bagian yang dipilih.

forming a selection in the timeline panel

Jika kamu hanya peduli tentang rekaman yang panjang, tetapkan filter agar hanya menampilkan rekaman panjang tersebut. Kamu dapat melakukan ini di bagian bawah panel timeline.

filtering by length of time

Jika pengguliran tidak terasa semulus yang seharusnya, coba kecualikan 'Loading' (misalnya rekaman jaringan). Sebagaimana yang telah dikatakan, jika kamu tahu bahwa permintaan jaringan digunakan untuk memuat data di halaman yang bergulir tanpa batas pengguna, kamu akan ingin tetap 'Loading' dicentang.

Jangan menerapkan penyaringan hanya karena data muncul terlalu tajam pada awalnya. Luangkan waktu untuk memahami dan menyelidiki apa yang ditunjukkan dev tool kepadamu. Kamu akan ingin menggunakan timeline untuk mengonfirmasi di mana terjadi perlambatan dan bertujuan untuk mendapatkan bar vertikal kosong mungkin (spasi kosong/waktu idle).


Bacaan Lebih Lanjut

Panel konten utama memiliki banyak fitur yang kamu temukan di editor kode dasar.

Tahu sumber daya lain yang berguna? Sebutkan di komentar!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.