Informowanie dostawców przeglądarek o problemach w ich przeglądarkach jest integralną częścią procesu ulepszania platformy internetowej.
Dobry błąd, ale wymaga trochę pracy. 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 w 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 przeglądarek Chrome, Firefox, 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 coś się zepsuło 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 regresją 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 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 o błędach 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, który opisuje 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 ten błąd wpływa na Twoją witrynę. Unikaj dodawania komentarzy w stylu „+1”, ponieważ śledzenie błędów zazwyczaj wysyła e-maile dotyczące każdego komentarza.
Zgłaszanie błędu
Jeśli błąd nie został jeszcze zgłoszony, poinformuj o nim dostawcę przeglądarki.
Tworzenie zminimalizowanego test case
Mozilla udostępniła świetny artykuł o tworzeniu zminimalizowanego testu. Aby w skrócie wyjaśnić, że opis problemu to świetny początek, ale nic nie bije połączonego z błędem 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. Może to wymagać użycia działającego serwera HTTPS, jeśli adres URL używa protokołu 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ć zmiany, które nie wyszły dobrze.
Hostowanie uproszczonego przypadku testowego
Jeśli szukasz dobrego miejsca do hostowania uproszczonego 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 już 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 ułatwić jego klasyfikację.
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ę skompresowany 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 dodać 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 uwzględnić szczegóły wszystkich wykorzystanych środowisk testowych.
Przesyłanie błędu
Na koniec prześlij błąd. Sprawdź skrzynkę e-mailową, 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ć.