Chia sẻ trải nghiệm lần đầu đóng góp sửa lỗi cho Google Chrome

• Đã lần đầu sửa một lỗi của trình duyệt web Chromium/Google Chrome và đóng góp cho một dự án mã nguồn mở quy mô lớn.
• Đây là một trải nghiệm rất độc đáo, khác biệt nhiều so với các công việc mã nguồn mở trước đây.
• Tác giả đã ghi lại toàn bộ quá trình để giúp các lập trình viên muốn thử những công việc tương tự.

Lỗi

• Lỗi được sửa là vấn đề tích hợp giữa Chromium Devtools và các yêu cầu mạng từ worklet như AudioWorklet, vốn chạy ngoài luồng chính.
• Các yêu cầu mạng do worklet tạo ra hoàn toàn không hiển thị trong tab Network của Devtools.
• Tùy chọn "Disable Cache" bị bỏ qua, khiến mã cũ không bị loại khỏi bộ nhớ đệm trong quá trình phát triển.
• Vấn đề này liên tục xuất hiện trong nhiều dự án và khớp với ít nhất ba báo cáo lỗi.
• Việc tái hiện tối thiểu khá đơn giản: dùng một script có thiết lập cache header để tạo AudioWorkletProcessor, rồi tải lại trang để tái hiện vấn đề.

Tải mã nguồn và build Chromium

• Bước đầu tiên để thực sự sửa lỗi là build Chromium từ đầu.
• May mắn là có tài liệu chi tiết hướng dẫn cách build trên các hệ điều hành chính.
• Dù dùng một máy tính mạnh, lần build đầu tiên vẫn mất hơn 45 phút, dùng hơn 50GB RAM và cần hơn 100GB dung lượng đĩa.
• Các bản build tăng dần hoàn thành rất nhanh, trong vòng chưa đến 10 giây.
• Dù việc build tốn thời gian, nhưng sau khi cài đủ mọi điều kiện tiên quyết thì đây là một công việc khá thuận tiện và tự động.

Tìm và sửa lỗi

• Sau khi môi trường build hoạt động, tác giả bắt đầu khám phá mã nguồn.
• Codebase của Chromium cực kỳ đồ sộ và khó nắm được cấu trúc tổng thể.
• Việc điều hướng mã khó khăn do có nhiều lớp tham chiếu gián tiếp và mô-đun hóa, cùng với việc sử dụng dynamic dispatch rất rộng rãi.
• Tác giả dùng gỡ lỗi bằng printf để lần theo từ điểm khởi phát yêu cầu mạng cho đến khi yêu cầu thực sự được tạo hoặc được lấy từ cache.
• Nguyên nhân là InspectorNetworkAgent không được tạo cho target worklet.
• Để sửa, tác giả thay đổi để InspectorNetworkAgent chấp nhận WorkerOrWorkletGlobalScope thay vì WorkerGlobalScope.
• Tuy nhiên, thay đổi này vẫn chưa đủ; sau khi kiểm tra thêm mã TypeScript của frontend Devtools, tác giả phát hiện Capability.Networking bị thiếu với Type.Worklet.
• Sau khi bổ sung phần này, vấn đề được giải quyết hoàn toàn.

Kiểm thử và review code

• Sau khi dọn dẹp log debug và kiểm tra lại diff cuối cùng, tác giả tìm hiểu quy trình review và merge code.
• Tác giả tạo tài khoản trên trang review code Chromium Gerrit và ký CLA.
• Sau đó chọn reviewer, rà soát phần code đã viết và bổ sung các bài kiểm thử cần thiết.
• Tác giả tham khảo nhiều bài kiểm thử JavaScript dùng để kiểm tra tính năng network inspection của Devtools rồi viết thêm test mới.
• Cuối cùng, bản sửa nhận được phê duyệt "LGTM" trong quá trình review code và PR được merge.

CL thứ hai

• Tác giả viết thêm một CL khác để thêm Capability.Network cho target Devtools của worklet trong kho devtools_frontend.
• Quá trình này diễn ra tương tự PR đầu tiên và được tự động merge sau khi các bài kiểm thử CI vượt qua.

Phát hành

• Tác giả chờ đến khi bản phát hành có chứa bản sửa xuất hiện trên Chrome Canary.
• Chrome Canary được cập nhật hai lần mỗi ngày, và cuối cùng tác giả đã xác nhận bản sửa.
• Việc hoàn tất bản sửa mất hơn một tháng, và dự kiến sẽ được đưa vào kênh phát hành ổn định trong Chrome 130.

Kết quả và nhìn lại

• Việc sửa lỗi tốn thời gian và cần nhiều công sức, nhưng đây là một trải nghiệm rất độc đáo.
• Tác giả có cơ hội trải nghiệm cách phần mềm được phát triển ở quy mô như Chromium.
• Với cá nhân tác giả, việc đoạn mã của mình sẽ có mặt trên hàng triệu, thậm chí hàng tỷ thiết bị trên toàn thế giới là một động lực rất lớn.
• Qua trải nghiệm này, tác giả đã học được cách đóng góp cho Chromium và dự định sẽ tiếp tục thử sửa thêm nhiều lỗi trong tương lai.

[huiya]

Thật tuyệt vời.

[GN⁺]

Ý kiến trên Hacker News

• Trải nghiệm làm việc với codebase Chromium

  • Dùng Sublime Text để làm việc với mã như văn bản thuần túy
  • Nếu dùng VS Code thì có thể sử dụng các tính năng như chuyển tới phần định nghĩa hoặc khai báo hàm
  • Tác giả giới thiệu bài viết của mình cho những ai muốn tạo trình duyệt dựa trên Chromium

• Vấn đề với phần mở rộng C++ của VS Code

  • Do codebase quá lớn nên phần mở rộng C++ của VS Code không hoạt động ổn định
  • Có hiện tượng các lõi CPU bị giữ ở mức 100%
  • Công cụ Chromium Code Search rất hữu ích

• Trải nghiệm về một lỗi của Chrome

  • Trên Linux, xuất hiện lỗi trong trình duyệt dựa trên Chrome khiến chuỗi "±±±±±±+..." được nhập vào
  • Không xảy ra trong các ứng dụng khác
  • Muốn tái hiện và sửa lỗi này

• Lần đầu tiếp xúc với codebase Chromium

  • Việc khám phá codebase Chromium lần đầu không quá khó
  • Đã tham khảo mã của Chrome để sửa lỗi dán ảnh trên Windows

• Yêu cầu build của Chrome

  • Yêu cầu build của Chrome rất cao
  • Cần một máy trạm hiệu năng mạnh
  • Firefox cũng mất nhiều thời gian để build

• Gỡ lỗi bằng printf

  • Không có gì phải xấu hổ khi dùng gỡ lỗi bằng printf
  • Gỡ lỗi bằng printf rất hiệu quả

• Khuyến nghị dùng trình duyệt mã trực tuyến

  • Khuyên nên khám phá mã thông qua trình duyệt mã trực tuyến
  • URL cs.chromium.org rất dễ nhớ

• Sự khác biệt giữa WorkletGlobalScope và WorkerGlobalScope

  • Mất khá nhiều thời gian để hiểu sự khác nhau giữa hai thuật ngữ này
  • Quy ước đặt tên không tốt

• Đề xuất sửa lỗi Chromium

  • Khuyên nên thử sửa lỗi Chromium
  • Chrome cập nhật nhanh nên lỗi có thể được sửa trong vòng 4-6 tuần
  • Muốn tìm người sẽ đóng góp sửa lỗi

• Trải nghiệm về lỗi sao chép ảnh

  • Khi sao chép ảnh vào clipboard trong trình duyệt dựa trên Chrome, giao diện bị treo
  • Nguyên nhân là vấn đề mã hóa PNG
  • Đã giải quyết bằng cách đổi mức nén về 0
  • Firefox không bị trễ và đưa tệp ảnh gốc vào clipboard