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

> Clean Markdown view of GeekNews topic #16480. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16480](https://news.hada.io/topic?id=16480)
- GeekNews Markdown: [https://news.hada.io/topic/16480.md](https://news.hada.io/topic/16480.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-08-27T09:51:41+09:00
- Updated: 2024-08-27T09:51:41+09:00
- Original source: [cprimozic.net](https://cprimozic.net/blog/fixing-a-bug-in-google-chrome/)
- Points: 14
- Comments: 2

## Summary

Chromium/Google Chrome의 버그를 처음으로 수정한 경험을 통해 대규모 오픈 소스 프로젝트에 기여하는 과정을 상세히 기록하고 있습니다. 버그 수정 과정에서 겪은 도전과 해결 방법을 공유하여 비슷한 작업을 시도하려는 개발자들에게 실질적인 도움을 제공합니다. 또한, Chromium의 방대한 코드베이스와 빌드 환경을 이해하고, 코드 리뷰 및 테스트 과정을 거쳐 최종적으로 수정 사항을 릴리스하는 과정을 배울 수 있습니다.

## Topic Body

- 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에 기여하는 방법을 배웠으며, 앞으로도 더 많은 버그 수정을 시도해볼 예정임.

## Comments



### Comment 28343

- Author: huiya
- Created: 2024-08-27T11:03:20+09:00
- Points: 1

대단하네요

### Comment 28334

- Author: neo
- Created: 2024-08-27T09:51:41+09:00
- Points: 2

###### [Hacker News 의견](https://news.ycombinator.com/item?id=41355303) 
- **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는 지연이 없고 원본 이미지 파일을 클립보드에 넣음