Tarayıcı tedarikçi firmalarına, tarayıcılarında bulduğunuz sorunlar hakkında bilgi vermek, web platformunu iyileştirmenin ayrılmaz bir parçasıdır.
İyi bir hata kaydı oluşturmak için biraz çalışmanız gerekir. Amacınız, tarayıcı mühendislerinin hatayı bulup temel nedene ulaşmasını ve en önemlisi de sorunu düzeltmenin bir yolunu bulmasını mümkün olduğunca kolaylaştırmak olmalıdır. Hızlı ilerleme kaydeden hataların, beklenen davranışın net olduğu durumlarda tekrar oluşturulması hızlı olur.
Bunun bir hata olduğunu doğrulama
İlk adım, "doğru" davranışın ne olması gerektiğini belirlemektir.
Doğru davranış nedir?
MDN'deki ilgili API dokümanlarını inceleyin veya ilgili özellikleri bulmaya çalışın. Bu bilgiler, hangi API'nin gerçekten bozuk olduğuna, nerede bozuk olduğuna ve beklenen davranışın ne olduğuna karar vermenize yardımcı olabilir.
Farklı bir tarayıcıda çalışıyor mu?
Tarayıcılar arasında farklı olan davranışlara genellikle birlikte çalışabilirlik sorunu olarak daha yüksek öncelik verilir. Özellikle de hatayı içeren tarayıcı diğerlerinden farklı olduğunda bu durum geçerlidir. BrowserStack gibi bir araç kullanarak Chrome, Firefox, Safari ve Edge'in en son sürümlerinde test yapmayı deneyin.
Mümkünse sayfanın, kullanıcı aracısı koklaması nedeniyle kasıtlı olarak farklı davranmadığından emin olun. Chrome Geliştirici Araçları'nda User-Agent
dizesini başka bir tarayıcıya ayarlamayı deneyin.
Yakın zamandaki bir sürümde mi bozuldu?
Bu özellik geçmişte beklendiği gibi çalışıyordu ancak son tarayıcı sürümünde çalışmamaya başladı mı? Bu tür gerilemelerle ilgili işlemler, özellikle de sorunun çalıştığı ve çalışmadığı sürüm numaralarını sağlarsanız çok daha hızlı yapılabilir. Eski tarayıcı sürümlerini kontrol etmek için BrowserStack gibi araçları kullanabilirsiniz. Değişikliği aramak için bisect-builds aracı (Chromium için) gibi araçları kullanın.
Bir sorun gerilemeyse ve yeniden oluşturulabiliyorsa genellikle temel nedeni bulunup hızlıca düzeltilebilir.
Diğer kullanıcılar da aynı sorunu mu yaşıyor?
Sorun yaşıyorsanız diğer geliştiricilerin de benzer sorunlar yaşadığı muhtemeldir. Öncelikle Stack Overflow'da hatayı aramayı deneyin. Bu, soyut bir sorunu belirli bir bozuk API'ye dönüştürmenize ve hata düzeltilene kadar kısa vadeli bir geçici çözüm bulmanıza yardımcı olabilir.
Daha önce bildirildi mi?
Hatanın ne olduğuna dair bir fikriniz oluştuğunda, tarayıcı hata veritabanında arama yaparak hatanın daha önce bildirilip bildirilmediğini kontrol etmeniz gerekir.
- Chromium tabanlı tarayıcılar: https://crbug.com
- Firefox: https://bugzilla.mozilla.org/
- Safari ve WebKit tabanlı tarayıcılar: https://bugs.webkit.org/
Sorunu açıklayan mevcut bir hata bulursanız yıldız ekleyerek, favorilere ekleyerek veya hata hakkında yorum yaparak desteğinizi gösterin. Ayrıca birçok sitede kendinizi CC listesine ekleyebilir ve hata değiştiğinde güncelleme alabilirsiniz.
Hata hakkında yorum yapmaya karar verirseniz hatanın web sitenizi nasıl etkilediğiyle ilgili bilgileri ekleyin. Hata takipçileri genellikle her yorum için e-posta gönderdiği için "+1" tarzı yorumlar eklemekten kaçının.
Hatayı bildirme
Hata daha önce bildirilmediyse tarayıcı tedarikçisine bildirme zamanı gelmiştir.
En aza indirilmiş test kaydı oluşturma
Mozilla'nın küçültülmüş test örneği oluşturma ile ilgili mükemmel bir makalesi var. Uzun lafın kısası, sorunun açıklaması iyi bir başlangıç olsa da hatada sorunu gösteren bağlantılı bir demo eklemek en iyisidir. Hızlı ilerleme şansını en üst düzeye çıkarmak için örnekte, sorunu göstermek için gereken minimum kod bulunmalıdır. Hatanızın düzeltilme olasılığını artırmak için yapabileceğiniz en önemli şey minimum kod örneği göndermektir.
Test vakasını en aza indirmek için birkaç ipucu:
- Web sayfasını indirin,
<base href="https://original.url">
ekleyin ve hatanın yerel olarak mevcut olduğunu doğrulayın. URL'de HTTPS kullanılıyorsa bunun için canlı bir HTTPS sunucusu gerekebilir. - Yerel dosyaları olabildiğince fazla tarayıcının en son sürümlerinde test edin.
- Her şeyi 1 dosyada toplamaya çalışın.
- Hata ortadan kalkana kadar kodu kaldırın (gereksiz olduğunu bildiğiniz öğelerden başlayarak).
- Çalışmanızı kaydedebilmek ve yanlış giden işlemleri geri alabilmek için sürüm kontrolünü kullanın.
Küçük boyutlu bir test durumu barındırma
Minified test vakanızı barındırmak için iyi bir yer arıyorsanız birkaç iyi yer vardır:
Bu sitelerin bazılarının içeriği iFrame'de gösterdiğini unutmayın. Bu durum, özelliklerin veya hataların farklı davranmasına neden olabilir.
Sorununuzu bildirme
En aza indirilmiş test durumunuzu oluşturduktan sonra ilgili hatayı bildirmeye hazırsınız demektir. Doğru hata izleme sitesine gidin ve yeni bir sorun oluşturun.
- Chromium tabanlı tarayıcılar: https://crbug.com/new
- Firefox: https://bugzilla.mozilla.org/
- Safari ve WebKit tabanlı tarayıcılar: https://bugs.webkit.org/
Net açıklamalar ve sorunun yeniden üretilmesi için uygulanacak adımları ekleyin
Öncelikle, mühendislerin sorunun ne olduğunu hızlıca anlamalarına ve sorunun önceliklendirilmesine yardımcı olmak için net bir açıklama sağlayın.
When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.
Ardından, sorunu yeniden oluşturmak için gereken ayrıntılı adımları sağlayın. Bu noktada küçültülmüş test senaryonuz devreye girer.
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.
Son olarak, beklenen ve gerçek sonucu açıklayın.
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)
Daha fazla bilgi için MDN'deki Hata raporu yazma yönergelerine göz atın.
Bonus: Sorunun ekran görüntüsünü veya ekran kaydı ekleyin
Zorunlu olmasa da sorunun ekran görüntüsünü veya ekran video kaydını eklemek genellikle faydalıdır. Bu özellik, özellikle birkaç adımdan sonra veya olağan dışı bir işlemden sonra hatalar oluştuğunda yararlıdır. Ekran kayıtları ve ekran görüntüleri, genellikle tarayıcı mühendislerine ne olduğunu daha iyi gösterebilir.
Ortamla ilgili ayrıntıları ekleyin
Bazı hatalar yalnızca belirli işletim sistemlerinde veya yalnızca belirli ekran türlerinde (ör. düşük DPI veya yüksek DPI) yeniden oluşturulabilir. Kullandığınız test ortamlarının ayrıntılarını eklediğinizden emin olun.
Hatayı gönderme
Son olarak hatayı gönderin. Hatayla ilgili yanıtları e-postanızdan takip edebilirsiniz. Mühendisler genellikle inceleme sırasında ek sorular sorabilir. Sorunu yeniden oluşturmakta zorluk yaşarlarsa sizinle iletişime geçebilirler.