Dipublikasikan: 13 November 2024
Bayangkan Anda melihat rekaman aktivitas performa dan ingin menyoroti area tertentu, seperti tugas terpanjang atau bagian pekerjaan yang tidak perlu. Mungkin Anda ingin membuat catatan untuk referensi di masa mendatang atau membagikan temuan Anda kepada rekan kerja. Apa cara terbaik untuk melakukannya?
Tentu saja, Anda dapat mencetak rekaman aktivitas di selembar kertas besar dan menggambar serta menulis catatan secara manual, atau menggunakan software pihak ketiga untuk menggambar catatan pada screenshot rekaman aktivitas. (Meskipun itu adalah cara terbaik hingga saat ini.)
Sebagai bagian dari dedikasi tim kami untuk menyederhanakan alur kerja developer, dengan senang hati kami memperkenalkan alternatif untuk opsi tersebut: kemampuan untuk menambahkan anotasi langsung ke rekaman aktivitas dalam panel Performa.
Sekarang, Anda dapat menganotasi rekaman aktivitas di tempat, menavigasi anotasi tersebut dengan mudah, dan bahkan menyimpannya langsung dalam file rekaman aktivitas. Hal ini membuat berbagi insight yang ditandai menjadi semudah mengirim file, sekaligus menghilangkan kebutuhan akan alat atau solusi eksternal. Anotasi tidak hanya dapat membantu Anda dalam proses debug performa, tetapi juga membantu Anda dan rekan kerja Anda memahami hal yang sama dengan cepat, atau meningkatkan pemahaman mereka tentang apa yang terjadi tanpa banyak berdiskusi.
Ada tiga jenis anotasi:
Rentang waktu yang dianotasi: Memberi label pada rentang waktu apa pun di linimasa
Entri yang dianotasi: Menambahkan label ke entri apa pun di linimasa
Koneksi entri: Menghubungkan dua entri dengan panah untuk menunjukkan hubungannya
Mari kita lihat setiap jenis anotasi dan skenario yang mungkin Anda alami saat anotasi tersebut berguna.
Rentang waktu yang dianotasi
Alur kerja umum di DevTools adalah merekam rekaman aktivitas untuk men-debug interaksi yang lambat. Tampilan rekaman aktivitas mungkin tampak membingungkan pada awalnya, tetapi saat Anda melihat perincian pengendali peristiwa dan stack panggilan tertentu, tampilan ini akan mulai masuk akal. Salah satu hal yang dapat Anda lakukan untuk mempermudah penggunaan tampilan rekaman aktivitas adalah membuat anotasi untuk memberi label pada cara blok waktu umumnya dihabiskan. Jadi, misalnya, sebaiknya anotasikan rentang waktu agar UI dapat diperbarui secara bermakna setelah interaksi pengguna.
Untuk menganotasi rentang waktu: Tahan Shift dan tarik dari awal interaksi ke update UI. Setelah itu, ketik label untuk membuat anotasi. Jika rentang yang dipilih tidak benar, batalkan dengan mengkliknya sebelum mengetik. Atau, untuk mengedit label anotasi, klik dua kali. Saat ini, Anda tidak dapat menyesuaikan rentang waktu anotasi yang ada. Jika jangka waktunya salah, hapus anotasi dan buat yang baru.
Dengan anotasi ini, Anda akan memiliki gambaran yang lebih jelas tentang semua pekerjaan yang harus dilakukan sebelum perubahan yang terlihat oleh pengguna, sehingga Anda dapat memfokuskan proses debug dengan tepat.
Entri yang dianotasi
Agar perubahan yang terlihat oleh pengguna lebih jelas, Anda juga dapat menganotasi tugas yang bertanggung jawab atas transisi dengan label entri.
Untuk membuat label entri: Klik dua kali entri yang dipilih, lalu ketik label Anda atau klik kanan entri, lalu pilih "Label Entry" dari menu konteks. Untuk mengedit label anotasi, klik dua kali entri atau label. Atau, pilih opsi "Entri Label" dari menu konteks.
Dengan anotasi entri ini, akan lebih mudah untuk menemukan pekerjaan yang (atau tidak) penting bagi interaksi dan berapa lama waktu yang diperlukan.
Koneksi entri
Cara ketiga untuk menganotasi rekaman aktivitas adalah dengan menggambar hubungan antara interaksi dan tugas panjang yang bertanggung jawab atas transisi.
Untuk membuat koneksi antar-entri: Klik dua kali entri yang ingin Anda hubungkan ke entri lain, lalu klik panah yang muncul di sebelah kanan entri tersebut. Selanjutnya, klik entri yang ingin Anda hubungkan. Atau, klik kanan entri dan pilih "Link Entries" dari menu konteks entri.
Jadi, meskipun interaksi itu sendiri telah berakhir, Anda dapat menggunakan jenis anotasi ini untuk menunjukkan dengan lebih jelas bagaimana interaksi tersebut terhubung ke tugas panjang berikutnya yang pada akhirnya memblokir UI.
Menghapus dan menyembunyikan anotasi
Semua anotasi dapat dihapus dengan cepat dari tampilan daftar anotasi di sidebar. Mengarahkan kursor ke anotasi akan menampilkan ikon tempat sampah . Klik ikon ini untuk menghapus anotasi.
Atau, untuk menghapus label entri dan anotasi koneksi entri yang terkait dengan peristiwa tertentu, klik kanan peristiwa tersebut, lalu pilih "Hapus anotasi". Anotasi dengan label juga dapat dihapus dengan menghapus label dan menyimpan anotasi.
Jika Anda ingin menyembunyikan anotasi tanpa menghapusnya agar tidak mengganggu Anda saat menjelajahi rekaman aktivitas, cukup centang kotak "sembunyikan anotasi" yang terletak di bagian bawah sidebar anotasi. Preferensi ini akan disimpan. Saat Anda memuat rekaman aktivitas dengan anotasi saat setelan ini diaktifkan, anotasi akan tetap disembunyikan hingga Anda menghapus centang.
Menyimpan atau memuat rekaman aktivitas yang dianotasi
Bagus, Anda telah menambahkan semua anotasi tersebut untuk membantu diri sendiri dan orang lain memahami rekaman aktivitas. Apa langkah selanjutnya?
Anda tidak perlu mengambil screenshot rekaman aktivitas untuk mengirimkannya kepada rekan kerja seperti dulu, sebelum anotasi. Cukup simpan file yang dianotasi dan kirimkan file tersebut kepada mereka. Hanya itu—mereka dapat mengupload file ke panel Performa dan melihat semua anotasi yang Anda buat dalam konteks rekaman aktivitas, atau bahkan menambahkan anotasi lainnya dan mengirimkannya kembali kepada Anda.
DevTools juga akan menyimpan jenis penyesuaian lainnya di tampilan rekaman aktivitas. Misalnya, Anda dapat mengisolasi area yang diinginkan dengan memperbesar dan menyetel breadcrumb, atau menyembunyikan entri dalam stack panggilan yang tidak relevan, dan semua setelan tersebut akan dipertahankan oleh file rekaman aktivitas, sehingga lebih mudah untuk berkolaborasi dalam proses debug performa. Dengan semua penyesuaian ini, Anda dapat menarik perhatian ke hal yang paling penting sekaligus memberikan konteks dari seluruh rekaman aktivitas interaktif—tidak seperti screenshot.
Untuk mempertahankan anotasi dan penyesuaian lainnya, klik opsi Save trace di bagian ikon download . Saat dimuat, rekaman aktivitas akan berisi semua penyesuaian tersebut. Menyimpan dengan anotasi adalah opsi default, tetapi jika Anda hanya ingin menyimpan file rekaman aktivitas mentah, pilih opsi Simpan rekaman aktivitas tanpa anotasi.
Kesimpulan
Mungkin Anda merasa informasi ini terlalu banyak, tetapi jangan khawatir. Petunjuk untuk membuat anotasi selalu dapat ditemukan di tab anotasi di sidebar panel Performa. Tab ini memberikan petunjuk jika tidak ada anotasi, dan menampilkan tampilan daftar anotasi setelah dibuat.
Dengan begitu, anotasi di panel Performa memungkinkan developer untuk menentukan momen penting dalam rekaman aktivitas, sehingga menambahkan konteks dan insight yang dipersonalisasi. Hal ini menyederhanakan proses analisis, sehingga mempermudah berbagi dan berkolaborasi dalam pengoptimalan performa. Cobalah anotasi di panel Performa dan beri tahu kami pendapat Anda. Jika Anda memiliki masukan, kami ingin membaca komentar Anda di masalah publik.
Tidak perlu lagi menggunakan alat eksternal dan dapatkan alur kerja yang lebih efisien.