좋은 브라우저 버그를 신고하는 방법

브라우저 공급업체에 브라우저에서 발견한 문제를 알리는 것은 웹 플랫폼을 개선하는 데 있어 매우 중요합니다.

Pete LePage
Robert Nyman

좋은 버그를 제출하는 것은 어렵지 않지만 약간의 노력이 필요합니다. 목표는 고장 난 것을 쉽게 찾고, 근본 원인을 찾고, 무엇보다도 이를 해결할 방법을 찾는 것입니다. 빠르게 진행되는 버그는 예상되는 동작으로 쉽게 재현할 수 있는 경향이 있습니다.

버그인지 확인

첫 번째 단계는 '올바른' 동작이 무엇인지 파악하는 것입니다.

올바른 동작은 무엇인가요?

MDN에서 관련 API 문서를 확인하거나 관련 사양을 찾아보세요. 이 정보는 실제로 손상된 API, 손상된 위치, 예상되는 동작을 결정하는 데 도움이 될 수 있습니다.

다른 브라우저에서도 작동하나요?

브라우저마다 다른 동작은 일반적으로 상호 운용성 문제로 우선순위가 높습니다. 특히 버그가 포함된 브라우저가 이상한 경우 우선순위가 높습니다. BrowserStack과 같은 도구를 사용하여 최신 버전의 Chrome, Firefox, Safari, Edge에서 테스트해 보세요.

가능한 경우 사용자 에이전트 스니핑으로 인해 페이지가 의도적으로 다르게 동작하고 있지 않은지 확인합니다. Chrome DevTools에서 User-Agent 문자열을 다른 브라우저로 설정해 봅니다.

최근 출시에서 문제가 발생했나요?

이전에는 예상한 대로 작동했지만 최신 브라우저 버전에서는 오류가 발생했나요? 이러한 '회귀'는 특히 작동한 버전 번호와 실패한 버전을 제공하는 경우 훨씬 더 빠르게 처리될 수 있습니다. BrowserStack과 같은 도구를 사용하면 이전 브라우저 버전을 쉽게 확인할 수 있으며 bisect-builds 도구(Chromium용)를 사용하면 변경사항을 매우 효율적으로 검색할 수 있습니다.

문제가 회귀이고 재현 가능한 경우 일반적으로 근본 원인을 빠르게 찾아서 수정할 수 있습니다.

다른 사람들에게도 동일한 문제가 표시되나요?

이러한 문제가 발생한다면 다른 개발자도 문제를 겪을 가능성이 높습니다. 먼저 Stack Overflow에서 버그를 검색해 보세요. 이를 통해 추상적인 문제를 손상된 특정 API로 변환할 수 있으며 버그가 수정될 때까지 단기적인 해결 방법을 찾는 데 도움이 될 수 있습니다.

이전에 보고된 적이 있나요?

버그가 무엇인지 파악했다면 브라우저 버그 데이터베이스를 검색하여 버그가 이미 신고되었는지 확인합니다.

문제를 설명하는 기존 버그를 발견하면 버그에 별표표시, 즐겨찾기 또는 댓글을 달아 지원을 추가하세요. 또한 많은 사이트에서 개발자가 CC 목록에 본인을 추가하고 버그가 변경되면 업데이트를 받을 수 있습니다.

버그에 관해 의견을 게시하기로 결정했다면 버그가 웹사이트에 미치는 영향에 관한 정보를 포함하세요. 버그 추적기는 일반적으로 모든 댓글에 이메일을 보내기 때문에 '+1' 스타일 댓글을 추가하지 마세요.

버그 신고

이전에 버그가 신고되지 않았다면 이제 브라우저 공급업체에 버그를 알려야 합니다.

최소화된 테스트 사례 만들기

Mozilla에 최소화된 테스트 사례를 만드는 방법에 관한 도움말이 있습니다. 긴 이야기를 짧게 만들려면 문제를 설명하는 것이 좋지만 문제를 보여주는 버그에 링크된 데모를 제공하는 것만큼 좋은 것은 없습니다. 빠른 진행 가능성을 극대화하려면 문제를 보여주는 데 필요한 최소한의 코드를 예시에 포함해야 합니다. 버그가 수정될 가능성을 높이기 위해 할 수 있는 가장 좋은 방법은 최소한의 코드 샘플입니다.

다음은 테스트 사례를 최소화하기 위한 몇 가지 팁입니다.

  • 웹페이지를 다운로드하고 <base href="https://original.url">를 추가한 후 버그가 로컬에 있는지 확인합니다. URL이 HTTPS를 사용하는 경우 실시간 HTTPS 서버가 필요할 수 있습니다.
  • 가능한 한 많은 브라우저의 최신 빌드에서 로컬 파일을 테스트합니다.
  • 하나의 파일로 압축합니다.
  • 버그가 사라질 때까지 코드를 삭제합니다 (불필요하다고 생각되는 것부터 시작).
  • 버전 제어를 사용하면 작업을 저장하고 잘못된 작업을 실행취소할 수 있습니다.

축소된 테스트 사례 호스팅

축소된 테스트 사례를 호스팅하기에 좋은 장소를 찾고 있다면 다음과 같은 여러 유용한 위치가 있습니다.

이러한 사이트 중 일부에서는 iframe에 콘텐츠를 표시하므로 기능이나 버그가 다르게 작동할 수 있습니다.

문제 제출

최소화된 테스트 사례가 있으면 버그를 신고할 준비가 된 것입니다. 올바른 버그 추적 사이트로 이동하여 새 문제를 작성합니다.

명확한 설명과 문제를 재현하는 데 필요한 단계를 제공합니다.

먼저 엔지니어가 문제를 빠르게 파악하고 문제를 분류할 수 있도록 명확한 설명을 제공합니다.

When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.

그런 다음 문제를 재현하는 데 필요한 자세한 단계를 제공하세요. 이때 필요한 것이 축소된 테스트 사례입니다.

What steps will reproduce the problem?
1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
   console tab.
2. Click the Install button in the page, you might need to interact with
   the page a bit before it becomes enabled.
3. Click Install on the browser modal install confirmation.

마지막으로 예상 결과와 실제 결과를 모두 설명합니다.

What is the expected result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)
2. INSTALL: Success (logged when `appinstalled` event fired)

What is the actual result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL: Success (logged when `appinstalled` event fired)
2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)

자세한 내용은 MDN의 버그 신고 작성 가이드라인을 참고하세요.

보너스: 문제의 스크린샷이나 스크린캐스트 추가

필수사항은 아니지만 문제의 스크린샷이나 스크린캐스트를 추가하는 것이 유용한 경우도 있습니다. 이는 버그를 재현하는 데 이상한 단계가 필요한 경우에 특히 유용합니다. 스크린캐스트나 스크린샷에서 어떤 일이 발생하는지 확인할 수 있으면 종종 도움이 될 수 있습니다.

환경에 대한 세부정보를 포함하세요.

일부 버그는 특정 운영체제에서만 또는 특정 종류의 디스플레이 (예: 낮은 dpi 또는 높은 dpi)에서만 재현 가능합니다. 사용한 테스트 환경의 세부정보를 포함해야 합니다.

버그 제출

마지막으로 버그를 제출합니다. 그런 다음 버그에 대한 응답이 있는지 이메일을 살펴보세요. 일반적으로 조사 중에 그리고 버그를 수정할 때 엔지니어는 추가 질문이 있을 수 있으며 문제를 재현하는 데 어려움이 있는 경우 문의할 수 있습니다.