Informowanie dostawców przeglądarek o problemach, które występują w ich przeglądarkach, jest integralną częścią procesu ulepszania platformy internetowej.
Zgłoszenie błędu wymaga trochę pracy, ale jest dobrym rozwiązaniem. Twoim celem powinno być jak największe ułatwienie inżynierom przeglądarek znajdowania tego, co jest zepsute, znajdowania przyczyny problemu i co najważniejsze – znajdowania sposobu na jego rozwiązanie. Błędy, które szybko prowadzą do postępu, są zwykle łatwe do odtworzenia i mają wyraźnie określone oczekiwane działanie.
Sprawdzanie, czy problem jest błędem
Pierwszym krokiem jest ustalenie, jakie powinno być „prawidłowe” działanie.
Jakie jest prawidłowe działanie?
Sprawdź odpowiednie dokumenty API na stronie MDN lub znajdź powiązane specyfikacje. Te informacje pomogą Ci ustalić, który interfejs API jest uszkodzony, gdzie występuje błąd i jakie jest oczekiwane działanie.
Czy działa w innej przeglądarce?
Zachowanie, które różni się w różnych przeglądarkach, jest zwykle traktowane priorytetowo jako problem ze zgodnością, zwłaszcza gdy przeglądarka z błędem jest jedyną, która się wyróżnia. Spróbuj przetestować najnowsze wersje Chrome, Firefoxa, Safari i Edge, najlepiej za pomocą narzędzia takiego jak BrowserStack.
Jeśli to możliwe, sprawdź, czy strona nie zachowuje się inaczej z powodu podsłuchiwania przez użytkownika. W Narzędziach deweloperskich Chrome spróbuj ustawić ciąg znaków User-Agent na inną przeglądarkę.
Czy wystąpił błąd w ostatniej wersji?
Czy ta funkcja działała zgodnie z oczekiwaniami w przeszłości, ale przestała działać w ostatniej wersji przeglądarki? W przypadku takich regresji można szybciej podjąć działania, zwłaszcza jeśli podasz numer wersji, w której funkcja działała, i numer wersji, w której przestała działać. Aby sprawdzić starsze wersje przeglądarek, możesz użyć narzędzi takich jak BrowserStack. Aby znaleźć zmianę, użyj narzędzi takich jak bisect-builds (w przypadku Chromium).
Jeśli problem jest regresywny i można go odtworzyć, zwykle można szybko znaleźć jego główną przyczynę i go naprawić.
Czy inni użytkownicy mają ten sam problem?
Jeśli masz problemy, istnieje duże prawdopodobieństwo, że mają je też inni deweloperzy. Najpierw wyszukaj błąd na stronie Stack Overflow. Może to pomóc w przełożeniu abstrakcyjnego problemu na konkretny błąd w usłudze interfejsu API. Może też pomóc w tymczasowym rozwiązaniu problemu, dopóki błąd nie zostanie naprawiony.
Czy został on zgłoszony wcześniej?
Gdy już określisz, na czym polega błąd, sprawdź, czy został on już zgłoszony, wyszukując go w bazie danych błędów przeglądarki.
- przeglądarki oparte na Chromium: https://crbug.com.
- Firefox: https://bugzilla.mozilla.org/
- Safari i przeglądarki oparte na WebKit: https://bugs.webkit.org/
Jeśli znajdziesz błąd opisujący problem, możesz go oznaczyć jako ulubiony, dodać do ulubionych lub skomentować. W wielu witrynach możesz dodać siebie do listy DW i otrzymywać powiadomienia o zmianach w błędach.
Jeśli zdecydujesz się skomentować błąd, podaj informacje o tym, jak wpływa on na Twoją witrynę. Unikaj dodawania komentarzy w stylu „+1”, ponieważ lokalizatory błędów wysyłają e-maile dotyczące każdego komentarza.
Zgłaszanie błędu
Jeśli błąd nie został jeszcze zgłoszony, należy poinformować o nim dostawcę przeglądarki.
Tworzenie zminimalizowanego test case
Mozilla udostępniła świetny artykuł o tworzeniu zminimalizowanego test case. Krótko mówiąc, opis problemu to dobry początek, ale nic nie zastąpi załączonego w błędzie pliku demonstracyjnego, który pokazuje problem. Aby zwiększyć szanse na szybkie rozwiązanie problemu, przykład powinien zawierać minimalny kod potrzebny do jego zilustrowania. Minimalny kod sample to najważniejsza rzecz, jaką możesz zrobić, aby zwiększyć szanse na naprawienie błędu.
Oto kilka wskazówek dotyczących minimalizowania przypadku testowego:
- Pobierz stronę internetową, dodaj
<base href="https://original.url">i sprawdź, czy błąd występuje lokalnie. Jeśli adres URL używa protokołu HTTPS, może być potrzebny działający serwer HTTPS. - Przetestuj pliki lokalne w najnowszych wersjach jak największej liczby przeglądarek.
- Spróbuj zmieścić wszystko w 1 pliku.
- Usuń kod (zaczynając od elementów, które są niepotrzebne), aż błąd zniknie.
- Używaj kontroli wersji, aby zapisywać swoją pracę i odwracać błędy.
Hostowanie zminiaturyzowanego przypadku testowego
Jeśli szukasz dobrego miejsca do hostowania zminiaturyzowanego przypadku testowego, masz do wyboru kilka opcji:
Pamiętaj, że wiele z tych witryn wyświetla treści w elemencie iframe, co może powodować nieprawidłowe działanie funkcji lub błędy.
Zgłoś problem
Gdy masz zminimalizowany przypadek testowy, możesz zgłosić błąd. Otwórz odpowiednią stronę śledzenia błędów i utwórz nowy problem.
- Przeglądarki oparte na Chromium – https://crbug.com/new
- Firefox – https://bugzilla.mozilla.org/
- Safari i przeglądarki oparte na WebKit – https://bugs.webkit.org/
Dodaj jasne opisy i instrukcje odtwarzania problemu
Najpierw podaj jasny opis, aby pomóc inżynierom szybko zrozumieć, na czym polega problem, i pomóc w jego klasyfikacji.
When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.
Następnie podaj szczegółowe instrukcje umożliwiające odtworzenie problemu. Właśnie w tym momencie przydaje się zminiaturyzowany przypadek testowy.
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.
Na koniec opisz oczekiwany i rzeczywisty wynik.
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)
Więcej informacji znajdziesz w wskazówkach dotyczących tworzenia zgłoszeń błędów na stronie MDN.
Bonus: dodaj zrzut ekranu lub nagranie ekranu przedstawiające problem
Chociaż nie jest to wymagane, często warto dołączyć zrzut ekranu lub screencast przedstawiający problem. Jest to szczególnie przydatne, gdy błędy występują po kilku krokach lub nietypowej aktywności. Nagrania ekranu i zrzuty ekranu często lepiej obrazują, co się stało, niż opisy.
Dołącz szczegóły środowiska
Niektóre błędy można odtworzyć tylko w określonych systemach operacyjnych lub na określonych rodzajach wyświetlaczy (np. o niskiej lub wysokiej rozdzielczości). Pamiętaj, aby podać szczegóły wszystkich wykorzystanych środowisk testowych.
Przesyłanie błędu
Na koniec prześlij błąd. Sprawdź skrzynkę e-mail, aby zobaczyć odpowiedź na zgłoszenie błędu. Podczas analizy inżynierowie mogą mieć dodatkowe pytania. Jeśli mają problem z odtworzeniem problemu, mogą się z Tobą skontaktować.