Как сообщить об ошибке в хорошем браузере

Сообщения производителям браузеров о проблемах, которые вы обнаруживаете в их браузерах, являются неотъемлемой частью улучшения веб-платформы!

Сообщить о хорошей ошибке несложно, но нужно немного поработать. Цель состоит в том, чтобы облегчить поиск того, что сломалось, выявить первопричину и, самое главное, найти способ ее исправить. Ошибки, которые быстро прогрессируют, обычно легко воспроизводятся с четким ожидаемым поведением.

Убедитесь, что это ошибка

Первый шаг — выяснить, каким должно быть «правильное» поведение.

Каково правильное поведение?

Ознакомьтесь с соответствующей документацией по API на MDN или попытайтесь найти соответствующие спецификации. Эта информация может помочь вам решить, какой API на самом деле сломан, где он сломан и каково ожидаемое поведение.

В другом браузере работает?

Поведение, которое различается в разных браузерах, обычно имеет более высокий приоритет как проблема совместимости, особенно когда браузер, содержащий ошибку, является лишним. Попробуйте протестировать последние версии Chrome, Firefox, Safari и Edge, возможно, используя такой инструмент, как BrowserStack .

Если возможно, убедитесь, что страница не ведет себя намеренно по-другому из-за прослушивания пользовательского агента. В Chrome DevTools попробуйте установить строку User-Agent для другого браузера .

Это сломалось в последнем выпуске?

Раньше это работало так, как ожидалось, но сломалось в недавней версии браузера? С такими «регрессиями» можно справиться гораздо быстрее, особенно если вы укажете номер версии, в которой это сработало, и версию, в которой произошел сбой. Такие инструменты, как BrowserStack, позволяют легко проверять старые версии браузера, а инструмент bisect-builds (для Chromium) позволяет очень эффективно искать изменения.

Если проблема является регрессивной и может быть воспроизведена, основную причину обычно можно быстро найти и устранить.

Видят ли другие ту же проблему?

Если у вас возникли проблемы, велика вероятность, что и другие разработчики тоже. Сначала попробуйте найти ошибку в Stack Overflow . Это может помочь вам преобразовать абстрактную проблему в конкретный сломанный API, а также найти краткосрочное решение, пока ошибка не будет исправлена.

Сообщалось ли об этом раньше?

Как только у вас появится представление о том, что это за ошибка, пришло время проверить, не сообщалось ли об этой ошибке, путем поиска в базе данных ошибок браузера.

Если вы обнаружите существующую ошибку, описывающую проблему, добавьте свою поддержку, отметив ошибку, добавив ее в избранное или прокомментировав. А на многих сайтах вы можете добавить себя в список CC и получать обновления при изменении ошибки.

Если вы решите прокомментировать ошибку, включите информацию о том, как ошибка влияет на ваш сайт. Избегайте добавления комментариев в стиле «+1», поскольку системы отслеживания ошибок обычно отправляют электронные письма на каждый комментарий.

Сообщить об ошибке

Если об ошибке ранее не сообщалось, самое время сообщить о ней производителю браузера.

Создайте минимизированный тестовый пример

В Mozilla есть отличная статья о том , как создать минимизированный тестовый пример . Короче говоря, хотя описание проблемы — отличное начало, ничто не сравнится с предоставлением связанной демонстрации ошибки, которая показывает проблему. Чтобы максимизировать вероятность быстрого прогресса, пример должен содержать минимально возможный код, необходимый для демонстрации проблемы. Минимальный пример кода — это первое, что вы можете сделать, чтобы увеличить вероятность исправления ошибки.

Вот несколько советов по минимизации тестового примера:

  • Загрузите веб-страницу, добавьте <base href="https://original.url"> и убедитесь, что ошибка существует локально. Для этого может потребоваться работающий HTTPS-сервер, если URL-адрес использует HTTPS.
  • Протестируйте локальные файлы в последних сборках как можно большего количества браузеров.
  • Попробуй сжать всё в 1 файл.
  • Удаляйте код (начиная с того, что, по вашему мнению, не нужно), пока ошибка не исчезнет.
  • Используйте контроль версий, чтобы сохранить свою работу и исправить ошибки.

Размещение мини-тестового примера

Если вы ищете хорошее место для размещения минимизированного тестового примера, есть несколько хороших мест:

Имейте в виду, что некоторые из этих сайтов отображают контент в 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.

Бонус: добавьте скриншот или скринкаст проблемы.

Хотя это и не обязательно, в некоторых случаях может быть полезно добавить снимок экрана или скринкаст проблемы. Это особенно полезно в тех случаях, когда для воспроизведения ошибок могут потребоваться некоторые странные действия. Возможность увидеть, что происходит, в скринкасте или на снимке экрана часто может оказаться полезной.

Включите подробную информацию об окружающей среде

Некоторые ошибки воспроизводятся только в определенных операционных системах или только на определенных типах дисплеев (например, с низким или высоким разрешением). Обязательно укажите подробную информацию обо всех тестовых средах, которые вы использовали.

Сообщить об ошибке

Наконец, отправьте сообщение об ошибке. Затем не забудьте следить за своей электронной почтой на предмет ответов на ошибку. Обычно во время расследования и исправления ошибки у инженеров могут возникнуть дополнительные вопросы, или, если у них возникают трудности с воспроизведением проблемы, они могут обратиться к вам.