Skip to content
정보 블로그 배우기 탐구하다 패턴 Case studies
이 페이지에서
  • 버그인지 확인
    • 올바른 동작은 무엇입니까?
    • 다른 브라우저에서 작동합니까?
    • 최근 릴리스에서 중단되었습니까?
    • 다른 사람들도 같은 문제를 보고 있습니까?
  • 이전에 보고된 적이 있습니까?
  • 버그 신고
    • 최소화된 테스트 케이스 만들기
  • 문제 제기
    • 문제에 대한 명확한 설명과 문제를 재현하는 데 필요한 단계를 제공합니다
    • 환경 세부 정보 포함
    • 버그 제출
  • Home
  • All articles

양호한 브라우저 버그를 신고하는 방법

브라우저에서 발견한 문제에 대해 브라우저 공급업체에 알리는 것은 웹 플랫폼 개선에 필수적인 부분입니다!

Jun 15, 2020 — 업데이트됨 Jun 15, 2020
Available in: English, Español, Português 및 中文
Robert Nyman
Robert Nyman
TwitterGitHubHomepage
Pete LePage
Pete LePage
TwitterGitHubGlitchHomepage
이 페이지에서
  • 버그인지 확인
    • 올바른 동작은 무엇입니까?
    • 다른 브라우저에서 작동합니까?
    • 최근 릴리스에서 중단되었습니까?
    • 다른 사람들도 같은 문제를 보고 있습니까?
  • 이전에 보고된 적이 있습니까?
  • 버그 신고
    • 최소화된 테스트 케이스 만들기
  • 문제 제기
    • 문제에 대한 명확한 설명과 문제를 재현하는 데 필요한 단계를 제공합니다
    • 환경 세부 정보 포함
    • 버그 제출

양호한 버그를 신고하는 것은 어렵지 않지만 약간의 작업이 필요합니다. 목표는 고장 난 것을 쉽게 찾고, 근본 원인을 파악하고, 가장 중요한 점으로는 그것을 고칠 방법을 찾는 것입니다. 빠르게 진행되는 버그는 분명히 예상되는 동작으로 쉽게 재현되는 경향이 있습니다.

버그인지 확인 #

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

올바른 동작은 무엇입니까? #

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

다른 브라우저에서 작동합니까? #

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

가능하다면 사용자 에이전트 스니핑으로 인해 페이지가 의도적으로 다르게 동작하지 않는지 확인하세요. Chrome DevTools에서 User-Agent 문자열을 다른 브라우저로 설정해보세요.

최근 릴리스에서 중단되었습니까? #

과거에는 예상대로 작동했지만, 최근 브라우저 릴리스에서 중단되었습니까? 이러한 "회귀"에 대해서는 특히 작동한 버전 번호와 실패한 버전을 제공하는 경우 훨씬 더 빠르게 조치를 취할 수 있습니다. BrowserStack과 같은 도구를 사용하면 이전 브라우저 버전을 쉽게 확인할 수 있고 bisect-builds 도구(Chromium용)를 사용하면 변경 사항을 매우 효율적으로 검색할 수 있습니다.

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

다른 사람들도 같은 문제를 보고 있습니까? #

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

이전에 보고된 적이 있습니까? #

버그가 무엇인지 파악했으면 브라우저 버그 데이터베이스를 검색하여 이미 신고된 버그인지 확인할 차례입니다.

  • Chromium 기반 브라우저: https://crbug.com
  • Firefox: https://bugzilla.mozilla.org/
  • Safari 및 WebKit 기반 브라우저: https://bugs.webkit.org/

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

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

버그 신고 #

이전에 신고된 적 없는 버그인 경우 브라우저 공급업체에 이에 대해 알려야 합니다.

최소화된 테스트 케이스 만들기 #

Mozilla에는 최소화된 테스트 케이스를 만드는 방법에 대한 훌륭한 기사가 있습니다. 긴 내용을 짧게 요약하자면, 문제에 대한 설명은 훌륭한 시작이지만 문제를 보여주는 버그에 연결된 데모를 제공하는 것보다 나은 방법은 없다는 내용입니다. 빠른 진행 가능성을 최대화하려면 예제에 문제를 보여주는 데 필요한 최소한의 가능한 코드를 포함해야 합니다. 최소한의 코드 샘플은 버그가 수정될 확률을 높이기 위해 할 수 있는 가장 중요한 사항입니다.

다음은 테스트 케이스 최소화를 위한 몇 가지 팁입니다.

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

축소된 테스트 케이스 호스팅 #

축소된 테스트 케이스를 호스팅할 좋은 장소를 찾고 있다면 다음과 같은 몇 가지 좋은 장소를 사용할 수 있습니다.

  • Glitch
  • JSBin
  • JSFiddle
  • CodePen

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

문제 제기 #

최소화된 테스트 케이스가 있으면 해당 버그를 신고할 준비가 된 것입니다. 올바른 버그 추적 사이트로 이동하여 새 문제를 만드세요.

  • Chromium 기반 브라우저 - https://crbug.com/new
  • Firefox - https://bugzilla.mozilla.org/
  • Safari 및 WebKit 기반 브라우저 - https://bugs.webkit.org/

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

첫째, 엔지니어가 문제가 무엇인지 신속하게 이해하고 문제를 분류하는 데 도움이 되도록 명확히 설명합니다.

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 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)

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)

자세한 내용은 MDN에서 버그 보고서 작성 지침을 확인하세요.

보너스: 문제의 스크린샷 또는 스크린캐스트 추가 #

필수 사항은 아니지만, 경우에 따라 문제의 스크린샷이나 스크린캐스트를 추가하는 것이 도움이 될 수 있습니다. 이는 버그를 재현하기 위해 몇몇 이상한 단계가 필요할 수 있는 경우에 특히 유용합니다. 스크린캐스트나 스크린샷에서 어떤 일이 일어나는지 볼 수 있으면 도움이 될 수 있을 때가 많습니다.

환경 세부 정보 포함 #

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

버그 제출 #

마지막으로 버그를 제출합니다. 그런 다음 버그에 대한 응답이 있는지 이메일을 계속 주시하세요. 일반적으로 조사 도중과 버그 수정 시, 엔지니어가 추가 질문을 할 수도 있고 문제 재현에 어려움이 있는 경우 연락할 수도 있습니다.

마지막 업데이트: Jun 15, 2020 — 기사 개선하기
Return to all articles
공유
구독

Contribute

  • 버그 신고
  • 소스 보기

관련된 콘텐츠

  • developer.chrome.com
  • Chrome 업데이트
  • 사례 연구
  • 팟캐스트
  • 쇼

연결

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 전체 제품
  • 약관 및 개인정보 보호
  • 커뮤니티 가이드라인

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.