Сообщения производителям браузеров о проблемах, которые вы обнаруживаете в их браузерах, являются неотъемлемой частью улучшения веб-платформы.
Регистрация хорошей ошибки, но требует небольшой работы. Ваша цель должна состоять в том, чтобы разработчикам браузеров было как можно проще найти то, что сломано, выявить первопричину и, самое главное, найти способ исправить это. Ошибки, которые быстро прогрессируют, как правило, быстро воспроизводятся с четким ожидаемым поведением.
Убедитесь, что это ошибка
Первый шаг — выяснить, каким должно быть «правильное» поведение.
Каково правильное поведение?
Ознакомьтесь с соответствующей документацией по API на MDN или попытайтесь найти соответствующие спецификации. Эта информация может помочь вам решить, какой API на самом деле не работает, где он сломан и каково ожидаемое поведение.
В другом браузере работает?
Поведение, которое различается в разных браузерах, обычно имеет более высокий приоритет как проблема совместимости, особенно когда браузер, содержащий ошибку, является лишним. Попробуйте протестировать последние версии Chrome, Firefox, Safari и Edge, возможно, используя такой инструмент, как BrowserStack .
Если возможно, убедитесь, что страница не ведет себя намеренно по-другому из-за прослушивания пользовательского агента. В 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">и убедитесь, что ошибка существует локально. Для этого может потребоваться работающий HTTPS-сервер, если URL-адрес использует HTTPS. - Протестируйте локальные файлы в последних сборках как можно большего количества браузеров.
- Попробуй сжать всё в 1 файл.
- Удаляйте код (начиная с того, что, по вашему мнению, не нужно), пока ошибка не исчезнет.
- Используйте контроль версий, чтобы сохранить свою работу и исправить ошибки.
Разместите минимизированный тестовый пример
Если вы ищете подходящее место для размещения минимизированного тестового примера, есть несколько хороших мест:
Имейте в виду, что некоторые из этих сайтов отображают контент в iframe, что может привести к тому, что функции или ошибки будут работать по-другому.
Сообщите о своей проблеме
Как только вы получите минимизированный тестовый пример, вы готовы зарегистрировать эту ошибку. Перейдите на правильный сайт отслеживания ошибок и создайте новую проблему.
- Браузеры на базе Chromium — https://crbug.com/new
- Фаерфокс - 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 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.
Бонус: добавьте скриншот или скринкаст проблемы.
Хотя это и не обязательно, часто бывает полезно добавить снимок экрана или скринкаст проблемы. Это особенно полезно, когда ошибки возникают после нескольких шагов или необычной активности. Скринкасты и снимки экрана часто могут лучше продемонстрировать, что произошло с разработчиками браузеров.
Включите подробную информацию об окружающей среде
Некоторые ошибки воспроизводятся только в определенных операционных системах или только на определенных типах дисплеев (например, с низким или высоким разрешением). Обязательно укажите подробную информацию обо всех тестовых средах, которые вы использовали.
Сообщить об ошибке
Наконец, отправьте сообщение об ошибке. Следите за своей электронной почтой, чтобы увидеть ответы на ошибку. Обычно в ходе расследования у инженеров могут возникнуть дополнительные вопросы. Если у них возникнут трудности с воспроизведением проблемы, они могут обратиться к нам.