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

브라우저에서 발견한 문제에 관해 브라우저 공급업체에 알림 웹 플랫폼을 개선하는 데 있어 핵심적인 부분입니다.

Pete LePage
Robert Nyman

좋은 버그를 제출하는 것은 어렵지 않지만 약간의 노력이 필요합니다. 목표는 문제를 쉽게 발견하고, 근본 원인을 파악하며, 무엇보다도 해결할 수 있습니다. 빠르게 발전하는 버그는 명확하게 나타납니다.

버그인지 확인

첫 번째 단계는 지정해야 합니다.

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

MDN에서 관련 API 문서를 확인하거나 관련 사양을 찾을 수 있습니다. 이 정보는 어떤 API가 실제로 어떤 API가 사용 가능한지 고장난 위치, 예상되는 동작을 확인할 수 있습니다.

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

브라우저별로 다른 작동 방식은 일반적으로 특히 버그가 있는 브라우저가 이상합니다. Chrome, Firefox, Safari 및 Chrome 브라우저 최신 버전에서 Edge(BrowserStack과 같은 도구를 사용할 수 있음)

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

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

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

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

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

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

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

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

문제를 설명하는 기존 버그가 발견되면 지원팀 추가 별표 표시, 즐겨찾기 등록, 버그 댓글 달기 등의 방법이 있습니다. 그리고 많은 사이트에서 자신을 CC 목록에 추가하고 버그가 변경되면 업데이트를 받을 수 있습니다.

버그에 댓글을 달기로 결정하면 버그 발생 방법에 대한 정보를 제공해 주세요. 있습니다. '+1'을 추가하지 마세요. 버그 추적기처럼 댓글 스타일을 일반적으로 모든 댓글에 대해 이메일을 보냅니다.

버그 신고

이전에 버그를 신고한 적이 없다면 브라우저 공급업체에 알려야 합니다. 소개하겠습니다.

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

Mozilla에서는 최소화된 테스트 사례를 만드는 방법을 참조하세요. 라벨을 만들려면 문제를 설명하는 것은 좋은 출발점일 수 있지만 버그에 링크된 데모를 제공하여 있습니다. 빠른 진행 가능성을 극대화하려면 예시에 문제를 보여주는 데 필요한 최소의 코드를 제공합니다. 최소한의 코드 가장 좋은 방법은 있습니다.

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

  • 웹페이지를 다운로드하고 <base href="https://original.url"> 드림 버그가 로컬에 있는지 확인합니다. 다음과 같은 경우 라이브 HTTPS 서버가 필요할 수 있습니다. URL이 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)

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

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

필수는 아니지만 경우에 따라 스크린샷을 추가하면 도움이 될 수 있습니다. 문제에 관한 스크린캐스트를 작성할 수 있습니다 이 기능은 버그가 발생했거나 재현하는 데 이상한 단계가 필요할 수 있습니다. 예를 들어 스크린캐스트나 스크린샷이 유용할 때가 많습니다

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

일부 버그는 특정 운영 체제에서만 또는 특정 종류의 디스플레이 (예: 낮은 dpi 또는 높은 dpi). 반드시 사용한 테스트 환경의 세부정보를 포함하세요.

버그 제출

마지막으로 버그를 제출합니다. 그런 다음 혹시 모를 수 있는 문제가 있는지 버그에 대한 응답을 수집합니다. 일반적으로 조사 단계와 버그를 수정할 때 엔지니어에게 추가 질문이 있거나 문제를 재현하기가 어려울 수 있습니다