Berbagi pengalaman pertama kali berkontribusi memperbaiki bug di Google Chrome

• Berhasil memperbaiki bug pada peramban web Chromium/Google Chrome untuk pertama kalinya dan berkontribusi pada proyek open source berskala besar.
• Ini adalah pengalaman unik yang sangat berbeda dibandingkan pekerjaan open source yang pernah dilakukan sebelumnya.
• Seluruh proses didokumentasikan agar dapat membantu pengembang lain yang ingin mencoba pekerjaan serupa.

Bug

• Bug yang diperbaiki adalah masalah integrasi antara Chromium Devtools dan permintaan jaringan dari worklet seperti AudioWorklet yang berjalan di luar main thread.
• Permintaan jaringan yang dibuat oleh worklet sama sekali tidak muncul di tab Network pada Devtools.
• Opsi "Disable Cache" diabaikan, sehingga kode lama tidak terhapus dari cache selama pengembangan.
• Masalah ini terus muncul di beberapa proyek, dan setidaknya cocok dengan tiga laporan error.
• Reproduksi minimalnya sederhana; masalah dapat direproduksi dengan membuat AudioWorkletProcessor menggunakan skrip yang memiliki header cache lalu me-reload halaman.

Mengunduh dan membangun kode Chromium

• Langkah pertama untuk benar-benar memperbaiki bug tersebut adalah membangun Chromium dari awal.
• Untungnya, tersedia dokumentasi rinci tentang cara membangunnya di sistem operasi utama.
• Meskipun menggunakan komputer yang kuat, build pertama memerlukan lebih dari 45 menit, dengan penggunaan RAM lebih dari 50GB dan ruang disk lebih dari 100GB.
• Build inkremental selesai dengan cepat dalam waktu kurang dari 10 detik.
• Proses build memang memakan waktu, tetapi setelah semua prasyarat yang diperlukan terpasang, prosesnya cukup nyaman karena berjalan otomatis.

Menemukan dan memperbaiki bug

• Setelah lingkungan build berfungsi, penelusuran kode pun dimulai.
• Codebase Chromium sangat besar, dan sulit memahami struktur keseluruhannya.
• Banyaknya referensi tidak langsung dan modularisasi di dalam kode membuat penelusuran menjadi sulit, dan dynamic dispatch digunakan secara luas.
• Dengan menggunakan debugging printf, alur ditelusuri dari titik dimulainya permintaan jaringan hingga saat permintaan benar-benar dibuat atau diambil dari cache.
• Masalahnya terjadi karena InspectorNetworkAgent tidak dibuat untuk target worklet.
• Untuk memperbaikinya, dilakukan perubahan agar InspectorNetworkAgent menerima WorkerOrWorkletGlobalScope alih-alih WorkerGlobalScope.
• Namun perbaikan ini belum cukup; setelah memeriksa kode TypeScript pada frontend Devtools, ditemukan bahwa Capability.Networking hilang untuk Type.Worklet.
• Setelah itu ditambahkan, masalah pun terselesaikan sepenuhnya.

Pengujian dan code review

• Setelah merapikan log debug dan memeriksa diff terakhir, proses review dan merge kode mulai dijajaki.
• Akun dibuat di situs code review Chromium Gerrit, dan CLA ditandatangani.
• Reviewer dipilih, kode yang ditulis ditinjau kembali, dan pengujian yang diperlukan ditambahkan.
• Pengujian baru ditulis dengan merujuk pada beberapa pengujian JavaScript yang menguji fitur inspeksi jaringan Devtools.
• Pada akhirnya, persetujuan "LGTM" diterima dalam code review, dan PR pun di-merge.

CL kedua

• Satu CL lagi dibuat untuk perubahan di repositori devtools_frontend guna menambahkan Capability.Network ke target worklet Devtools.
• Prosesnya berjalan mirip dengan PR pertama, dan setelah pengujian CI lolos, perubahan tersebut di-merge secara otomatis.

Rilis

• Menunggu hingga versi yang menyertakan perbaikan tersebut dirilis di Chrome Canary.
• Chrome Canary diperbarui dua kali sehari, dan akhirnya perbaikan yang dimaksud dapat dikonfirmasi.
• Penyelesaian perbaikan ini memakan waktu lebih dari satu bulan, dan dijadwalkan masuk ke stable release channel pada Chrome 130.

Hasil dan refleksi

• Memperbaiki bug ini memakan waktu dan membutuhkan banyak usaha, tetapi merupakan pengalaman yang sangat unik.
• Ini memberikan pengalaman langsung tentang bagaimana perangkat lunak dikembangkan pada skala Chromium.
• Secara pribadi, fakta bahwa kode tersebut akan masuk ke ratusan juta (atau miliaran) perangkat di seluruh dunia menjadi motivasi yang sangat besar.
• Melalui pengalaman ini, dipelajari cara berkontribusi ke Chromium, dan ke depan akan mencoba memperbaiki lebih banyak bug lagi.

[huiya]

Luar biasa.

[GN⁺]

Komentar Hacker News

• Pengalaman bekerja dengan codebase Chromium

  • Menggunakan Sublime Text untuk mengerjakan kode sebagai plain text
  • Jika menggunakan VS Code, ada fitur seperti lompat ke definisi atau deklarasi fungsi
  • Merekomendasikan artikelnya sendiri kepada orang-orang yang ingin membuat browser berbasis Chromium

• Masalah ekstensi C++ di VS Code

  • Ekstensi C++ di VS Code tidak berfungsi dengan baik karena codebase yang besar
  • Terjadi masalah CPU core terkunci di 100%
  • Alat Chromium Code Search berguna

• Pengalaman dengan bug Chrome

  • Di Linux, muncul bug pada browser berbasis Chrome yang membuat input menjadi "±±±±±±+..."
  • Tidak terjadi di aplikasi lain
  • Ingin mereproduksi dan memperbaiki bug tersebut

• Pengalaman pertama dengan codebase Chromium

  • Menjelajahi codebase Chromium untuk pertama kalinya ternyata tidak sulit
  • Melihat kode Chrome sebagai referensi untuk memperbaiki bug paste gambar di Windows

• Persyaratan build Chrome

  • Persyaratan build Chrome sangat tinggi
  • Membutuhkan workstation berperforma tinggi
  • Firefox juga membutuhkan waktu build yang lama

• Debugging dengan printf

  • Tidak perlu malu menggunakan debugging dengan printf
  • Debugging dengan printf sangat efektif

• Rekomendasi memakai code browser online

  • Merekomendasikan penelusuran kode lewat code browser online
  • URL cs.chromium.org mudah diingat

• Perbedaan WorkletGlobalScope dan WorkerGlobalScope

  • Butuh waktu untuk memahami perbedaan kedua istilah itu
  • Aturan penamaannya kurang baik

• Saran memperbaiki bug Chromium

  • Merekomendasikan untuk memperbaiki bug Chromium
  • Karena Chrome diperbarui dengan cepat, bug bisa diperbaiki dalam 4-6 minggu
  • Ingin mencari orang yang mau berkontribusi memperbaiki bug

• Pengalaman dengan bug salin gambar

  • Saat menyalin gambar ke clipboard di browser berbasis Chrome, UI menjadi macet
  • Terjadi karena masalah encoding PNG
  • Masalah diselesaikan dengan mengubah tingkat kompresi menjadi 0
  • Firefox tidak mengalami jeda dan menaruh file gambar asli ke clipboard