▲

GN⁺: 구글 크롬 버그 수정에 처음으로 기여한 경험 공유

 (cprimozic.net)
14P by neo 3달전 | favorite | 댓글 2개
  • Chromium/Google Chrome 웹 브라우저의 버그를 처음으로 수정하며 대규모 오픈 소스 프로젝트에 기여함.
  • 과거의 오픈 소스 작업과는 매우 다른 독특한 경험이었음.
  • 이 과정을 통해 비슷한 작업을 시도하려는 개발자들에게 도움을 주기 위해 전체 과정을 기록함.

버그

  • 수정한 버그는 Chromium Devtools와 메인 스레드 외부에서 실행되는 AudioWorklet과 같은 worklet의 네트워크 요청 간의 통합 문제였음.
  • Worklet이 만든 네트워크 요청이 Devtools의 네트워크 탭에 전혀 표시되지 않음.
  • "Disable Cache" 옵션이 무시되어 개발 중에 오래된 코드가 캐시에서 제거되지 않았음.
  • 이 문제는 여러 프로젝트에서 꾸준히 발생했으며, 최소한 세 가지 오류 보고서와 일치했음.
  • 최소한의 재현 작업은 간단했고, 캐시 헤더가 설정된 스크립트를 사용하여 AudioWorkletProcessor를 생성하고 페이지를 다시 로드하는 방식으로 문제를 재현할 수 있었음.

Chromium 코드 다운로드 및 빌드

  • 버그를 실제로 수정하기 위한 첫 번째 단계는 Chromium을 처음부터 빌드하는 것이었음.
  • 다행히 주요 운영 체제에서 빌드하는 방법에 대한 상세한 문서가 제공되었음.
  • 강력한 컴퓨터를 사용했지만, 처음 빌드는 45분 이상 소요되었고, RAM 사용량은 50GB 이상, 디스크 공간은 100GB 이상 필요했음.
  • 증분 빌드는 10초 이내로 빠르게 완료되었음.
  • 빌드는 시간이 걸리지만, 일단 필요한 모든 전제 조건을 설치하면 자동으로 진행되는 편리한 작업이었음.

버그 찾기 및 수정

  • 빌드 환경이 작동한 후, 코드 탐색을 시작함.
  • Chromium 코드베이스는 매우 방대하고, 전체적인 구조를 파악하기 어려웠음.
  • 코드 내의 많은 간접 참조와 모듈화로 인해 코드 탐색이 어려웠고, 동적 디스패치가 광범위하게 사용됨.
  • printf 디버깅을 사용하여 네트워크 요청이 시작되는 지점에서 요청이 실제로 만들어지거나 캐시에서 검색될 때까지 추적함.
  • 문제는 InspectorNetworkAgent가 worklet 대상에 대해 생성되지 않아서 발생함.
  • 이를 수정하기 위해 InspectorNetworkAgent가 WorkerGlobalScope 대신 WorkerOrWorkletGlobalScope를 수락하도록 변경했음.
  • 그러나 이 수정은 충분하지 않았고, 추가로 Devtools 프런트엔드의 TypeScript 코드를 확인한 후 Type.Worklet에 대해 Capability.Networking이 누락된 것을 발견함.
  • 이를 추가한 후, 문제는 완전히 해결됨.

테스트 및 코드 리뷰

  • 디버그 로그를 정리하고 diff를 최종 확인한 후, 코드를 리뷰 및 병합하는 과정을 탐색함.
  • Chromium Gerrit 코드 리뷰 사이트에 계정을 만들고 CLA를 서명함.
  • 리뷰어를 선정하고, 작성한 코드를 검토하여 필요한 테스트를 추가함.
  • Devtools 네트워크 검사 기능을 테스트하는 여러 JavaScript 테스트를 참조하여 새로운 테스트를 작성함.
  • 최종적으로 코드 리뷰에서 "LGTM" 승인을 받았고, PR이 병합됨.

두 번째 CL

  • devtools_frontend 저장소에서 Capability.Network를 worklet Devtools 대상에 추가하는 변경을 위해 또 다른 CL을 작성함.
  • 첫 번째 PR과 유사하게 진행되었으며, CI 테스트가 통과한 후 자동으로 병합되었음.

릴리스

  • Chrome Canary에서 수정 사항이 포함된 버전이 출시될 때까지 기다림.
  • Chrome Canary는 하루에 두 번 업데이트되며, 최종적으로 수정된 내용을 확인함.
  • 수정을 완료하는 데 한 달 이상 걸렸으며, Chrome 130 버전에서 안정적인 릴리스 채널에 포함될 예정임.

결과 및 회고

  • 버그 수정에 시간이 걸리고 많은 노력이 필요했지만, 매우 독특한 경험이었음.
  • Chromium의 규모에서 소프트웨어가 어떻게 개발되는지 경험할 수 있었음.
  • 개인적으로 코드가 전 세계 수백만(또는 수십억) 대의 장치에 포함된다는 사실이 큰 동기부여가 되었음.
  • 이번 경험을 통해 Chromium에 기여하는 방법을 배웠으며, 앞으로도 더 많은 버그 수정을 시도해볼 예정임.
▲
neo 3달전  [-]
Hacker News 의견

  • Chromium 코드베이스 작업 경험

    • Sublime Text를 사용하여 코드 작업을 plain text로 처리함
    • VS Code를 사용하면 함수 정의나 선언으로 이동하는 등의 기능을 사용할 수 있음
    • Chromium 기반 브라우저를 만들고자 하는 사람들에게 자신의 기사를 추천함

  • VS Code의 C++ 확장 문제

    • 큰 코드베이스로 인해 VS Code의 C++ 확장이 제대로 작동하지 않음
    • CPU 코어가 100%로 고정되는 문제 발생
    • Chromium Code Search 도구가 유용함

  • Chrome 버그 경험

    • Linux에서 Chrome 기반 브라우저에서 "±±±±±±+..." 입력되는 버그 발생
    • 다른 애플리케이션에서는 발생하지 않음
    • 버그를 재현하고 해결하고 싶어함

  • Chromium 코드베이스 첫 경험

    • 처음으로 Chromium 코드베이스를 탐색하는 것이 어렵지 않았음
    • Windows에서 이미지 붙여넣기 버그를 해결하기 위해 Chrome의 코드를 참고함

  • Chrome 빌드 요구사항

    • Chrome의 빌드 요구사항이 매우 높음
    • 고성능 워크스테이션이 필요함
    • Firefox도 빌드 시간이 오래 걸림

  • printf 디버깅

    • printf 디버깅을 사용하는 것이 부끄럽지 않음
    • printf 디버깅이 매우 효과적임

  • 온라인 코드 브라우저 사용 추천

    • 온라인 코드 브라우저를 통해 코드 탐색을 추천함
    • cs.chromium.org URL을 기억하기 쉬움

  • WorkletGlobalScope와 WorkerGlobalScope 차이

    • 두 용어의 차이를 이해하는 데 시간이 걸림
    • 명명 규칙이 좋지 않음

  • Chromium 버그 수정 제안

    • Chromium 버그를 수정하는 것을 추천함
    • Chrome은 빠르게 업데이트되므로 4-6주 내에 버그가 수정될 수 있음
    • 버그 수정에 기여할 사람을 찾고 싶어함

  • 이미지 복사 버그 경험

    • Chrome 기반 브라우저에서 이미지를 클립보드에 복사할 때 UI가 멈춤
    • PNG 인코딩 문제로 인해 발생함
    • 압축 수준을 0으로 변경하여 문제를 해결함
    • Firefox는 지연이 없고 원본 이미지 파일을 클립보드에 넣음
답변달기
▲
huiya 3달전  [-]

대단하네요

답변달기