Pada kuartal terakhir tahun 2019, tim Chrome DevTools mulai meningkatkan pengalaman developer di DevTools seputar cookie. Hal ini penting khususnya karena Google Chrome dan browser lain mulai mengubah perilaku cookie default mereka.
Saat meneliti alat yang sudah disediakan DevTools, kita sering menemukan diri kita dalam situasi seperti berikut:
🎊 Konsol penuh dengan peringatan dan pesan error, yang berisi penjelasan yang agak teknis dan terkadang ditautkan ke chromestatus.com. Semua pesan terlihat kurang penting sama-sama penting, sehingga sulit untuk mengetahui mana yang harus ditangani terlebih dahulu. Lebih penting lagi, teks tidak menautkan ke informasi tambahan di dalam DevTools, sehingga sulit untuk memahami apa yang terjadi. Dan terakhir, pesan tersebut sering kali menyerahkan sepenuhnya kepada developer web untuk mengetahui cara memperbaiki masalah atau bahkan mempelajari konteks teknis.
Jika Anda juga menggunakan konsol untuk pesan dari aplikasi Anda sendiri, terkadang Anda akan kesulitan menemukan pesan tersebut di antara semua pesan dari browser.
Seperti halnya manusia, proses otomatis juga sulit berinteraksi dengan pesan konsol. Misalnya, developer dapat menggunakan Chrome Headless dan Puppeteer dalam skenario Continuous Integration/Continuous Deployment. Karena pesan konsol hanyalah string, developer harus menulis ekspresi reguler atau parser lain untuk mengekstrak informasi yang bisa ditindaklanjuti.
Solusinya: pelaporan masalah yang terstruktur dan dapat ditindaklanjuti
Untuk menemukan solusi yang lebih baik atas masalah yang kami temukan, pertama-tama kami mulai memikirkan persyaratan dan mengumpulkannya dalam Dokumen Desain.
Tujuan kami adalah menyajikan masalah dengan cara yang menjelaskan masalah dengan jelas, dan cara memperbaikinya. Dari proses desain kami, kami menyadari bahwa setiap masalah harus berisi empat bagian berikut:
- Judul
- Deskripsi
- Link ke resource yang terpengaruh dalam DevTools
- Dan link ke panduan lebih lanjut
Untuk judul, kami ingin judul yang singkat dan tepat untuk membantu developer memahami masalah inti, dan sering kali sudah menunjukkan perbaikan. Misalnya, masalah cookie sekarang hanya terbaca:
Tandai cookie lintas situs sebagai Aman untuk mengizinkan penyetelannya dalam konteks lintas situs
Setiap masalah berisi informasi lebih mendetail dalam deskripsi, yang menjelaskan apa yang terjadi, memberikan saran yang dapat ditindaklanjuti tentang cara memperbaikinya, dan link ke panel lain di dalam DevTools untuk memahami masalah dalam konteks. Kami juga menyediakan link ke artikel mendalam di web.dev agar developer web dapat mempelajari topik tersebut secara lebih mendetail.
Bagian penting dari setiap masalah adalah bagian resource yang terpengaruh, yang menautkan ke bagian lain dari DevTools dan memudahkan penyelidikan lebih lanjut. Untuk contoh masalah cookie, akan ada daftar permintaan jaringan yang memicu masalah, dan mengklik permintaan tersebut langsung akan mengarahkan Anda ke panel Jaringan. Kami berharap hal ini tidak hanya praktis, tetapi juga memperkuat panel dan alat di dalam DevTools yang bisa digunakan untuk men-debug jenis masalah tertentu.
Mempertimbangkan interaksi developer dengan tab Issues dalam jangka panjang, kami membayangkan evolusi interaksi developer berikut:
- Saat menghadapi masalah tertentu untuk pertama kalinya, developer web akan membaca artikel untuk memahami masalah tersebut secara mendalam.
- Saat mengalami masalah ini untuk kedua kalinya, kami berharap deskripsi masalah tersebut cukup untuk mengingatkan developer tentang masalah yang terjadi, sehingga mereka dapat segera menyelidiki dan mengambil tindakan untuk menyelesaikannya.
- Setelah mengalami masalah beberapa kali, kami berharap judul masalah tersebut cukup bagi developer untuk mengenali jenis masalah tersebut.
Aspek penting lain yang ingin kami tingkatkan adalah agregasi. Misalnya, jika cookie yang sama menyebabkan masalah yang sama beberapa kali, kami hanya ingin melaporkan cookie tersebut satu kali. Selain mengurangi jumlah pesan secara signifikan, cara ini sering kali membantu mengidentifikasi akar penyebab masalah dengan lebih cepat.
Implementasi
Dengan mempertimbangkan persyaratan tersebut, tim mulai mempelajari cara menerapkan fitur baru ini. Project untuk Chrome DevTools biasanya mencakup tiga area berbeda:
- Chromium, project open source yang ditulis dalam C++ di balik Google Chrome
- Frontend DevTools, implementasi JavaScript dari Chrome DevTools
- Chrome DevTools Protocol (CDP), lapisan yang menghubungkan keduanya
Implementasi kemudian terdiri dari tiga tugas:
- Di dalam Chromium, kami harus mengidentifikasi komponen yang memiliki informasi yang ingin ditampilkan dan membuat informasi tersebut dapat diakses oleh Protokol DevTools tanpa mengorbankan kecepatan atau keamanan.
- Kemudian, kita perlu mendesain Chrome DevTools Protocol (CDP) untuk menentukan API yang mengekspos informasi tersebut ke klien, seperti frontend DevTools.
- Terakhir, kami perlu mengimplementasikan komponen di frontend DevTools yang meminta informasi dari browser melalui CDP dan menampilkannya di UI yang sesuai sehingga developer dapat dengan mudah menafsirkan dan berinteraksi dengan informasi tersebut.
Untuk sisi browser, pertama kami melihat bagaimana pesan konsol ditangani, karena perilakunya sangat mirip dengan yang kami pikirkan untuk masalah. CodeSearch biasanya merupakan titik awal yang baik untuk eksplorasi seperti ini. Dengan alat ini, Anda dapat menelusuri dan menjelajahi seluruh kode sumber project Chromium secara online. Dengan begitu, kita telah mempelajari penerapan pesan konsol dan dapat membuat cara paralel tetapi lebih terstruktur terkait persyaratan yang telah kita kumpulkan untuk masalah tersebut.
Pekerjaan di sini sangat menantang karena semua implikasi keamanan harus selalu kami ingat. Project Chromium melakukan banyak hal untuk memisahkan berbagai hal ke dalam berbagai proses dan membuatnya hanya berkomunikasi melalui saluran komunikasi yang terkontrol untuk mencegah kebocoran informasi. Masalah dapat berisi informasi sensitif, jadi kami harus berhati-hati agar tidak mengirimkan informasi tersebut ke bagian browser yang tidak seharusnya mengetahuinya.
Di frontend DevTools
DevTools sendiri adalah aplikasi web yang ditulis dalam JavaScript dan CSS. Ini sangat mirip dengan banyak aplikasi web lainnya - hanya saja, aplikasi ini telah ada selama lebih dari 10 tahun. Dan tentu saja back-end-nya pada dasarnya merupakan saluran komunikasi langsung ke browser: Chrome DevTools Protocol.
Untuk tab Masalah, pertama-tama kami memikirkan tentang cerita pengguna dan apa yang akan dilakukan developer untuk menyelesaikan masalah. Ide kami sebagian besar berkembang dengan menjadikan tab Masalah sebagai titik awal utama untuk penyelidikan yang menghubungkan orang-orang dengan panel yang menampilkan informasi yang lebih mendetail. Kami memutuskan untuk menempatkan tab Issues dan tab lain di bagian bawah DevTools sehingga bisa tetap terbuka saat developer berinteraksi dengan komponen DevTools lain, seperti panel Network atau Application.
Dengan mempertimbangkan hal itu, UX designer kami memahami apa yang menjadi tujuan kami, dan membuat prototipe proposal awal berikut:
Setelah banyak diskusi seputar solusi terbaik, kami mulai menerapkan desain dan menegaskan kembali keputusan untuk secara bertahap sampai pada seperti apa tampilan tab Issues saat ini.
Faktor sangat penting lainnya adalah visibilitas tab Issues. Di masa lalu, banyak fitur Devtools hebat yang tidak dapat ditemukan tanpa developer mengetahui apa yang secara spesifik harus dicari. Untuk tab Masalah, kami memutuskan untuk menyoroti masalah di beberapa area yang berbeda guna memastikan developer tidak melewatkan masalah penting.
Kami memutuskan untuk menambahkan notifikasi ke panel konsol, karena pesan konsol tertentu sekarang dihapus karena adanya masalah. Kami juga menambahkan ikon ke penghitung peringatan dan kesalahan di kanan atas jendela DevTools.
Terakhir, tab Issues tidak hanya menautkan ke panel DevTools lainnya, tetapi resource yang terkait dengan masalah juga ditautkan kembali ke tab Issues.
Dalam protokol
Komunikasi antara frontend dan backend berfungsi melalui protokol yang disebut Chromium DevTools Protocol (CDP). CDP bisa dianggap sebagai backend aplikasi web yaitu Chrome DevTools. CDP dibagi menjadi beberapa domain dan setiap domain berisi sejumlah perintah dan peristiwa.
Untuk tab Masalah, kami memutuskan untuk menambahkan peristiwa baru ke domain Audits yang terpicu setiap kali ada masalah baru. Untuk memastikan bahwa kita juga dapat melaporkan masalah yang muncul saat DevTools belum dibuka, domain Audits akan menyimpan masalah terbaru dan mengirimkannya segera setelah DevTools terhubung. DevTools kemudian mengumpulkan semua masalah tersebut dan menggabungkannya.
CDP juga memungkinkan klien protokol lain, seperti Puppeteer, untuk menerima dan memproses masalah. Kami berharap informasi masalah terstruktur yang dikirimkan melalui CDP akan memungkinkan dan menyederhanakan integrasi ke dalam infrastruktur continuous integration yang ada. Dengan cara ini, masalah dapat dideteksi dan diperbaiki bahkan sebelum halaman di-deploy.
Mendatang
Pertama-tama, ada banyak pesan yang harus dipindahkan dari konsol ke tab Issues. Proses ini memerlukan waktu, terutama karena kami ingin memberikan dokumentasi yang jelas dan dapat ditindaklanjuti untuk setiap masalah baru yang kami tambahkan. Kami berharap di masa mendatang, developer dapat mencari masalah di tab Issues, bukan di konsol.
Selain itu, kami memikirkan cara mengintegrasikan masalah dari sumber lain selain backend Chromium ke tab Masalah.
Kami sedang mencari cara untuk menjaga tab Masalah tetap rapi dan meningkatkan kegunaan. Penelusuran, pemfilteran, dan agregasi yang lebih baik ada dalam daftar kami untuk tahun ini. Untuk menyusun peningkatan jumlah masalah yang dilaporkan, kami sedang dalam proses memperkenalkan kategori masalah yang, misalnya, hanya akan dapat menampilkan masalah yang terkait dengan penghentian penggunaan mendatang. Kami juga mempertimbangkan untuk menambahkan fitur tunda, yang dapat digunakan developer untuk menyembunyikan masalah sementara waktu.
Agar masalah dapat ditindaklanjuti, kami ingin mempermudah Anda menemukan bagian halaman mana yang memicu masalah. Secara khusus, kami memikirkan cara untuk membedakan dan memfilter masalah yang benar-benar berasal dari halaman Anda (yaitu pihak pertama) dari masalah yang dipicu oleh resource yang Anda sematkan, tetapi tidak secara langsung berada di bawah kendali Anda (seperti jaringan iklan). Sebagai langkah pertama, Anda dapat menyembunyikan masalah cookie pihak ketiga di Chrome 86.
Jika ada saran untuk meningkatkan tab Masalah, beri tahu kami dengan melaporkan bug.
Mendownload saluran pratinjau
Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.
Menghubungi tim Chrome DevTools
Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.
- Kirim saran atau masukan kepada kami melalui crbug.com.
- Laporkan masalah DevTools menggunakan Opsi lainnya
> Bantuan > Laporkan masalah DevTools di DevTools. - Tweet di @ChromeDevTools.
- Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.