Tarayıcı tedarikçi firmalarına, tarayıcılarında karşılaştığınız sorunları bildirmek, web platformunu daha iyi hale getirmenin 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ışır mı?
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ıysa 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ı yoklaması nedeniyle bilinçli bir şekilde 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.
Başkaları da aynı sorunla karşılaşıyor mu?
Sorun yaşıyorsanız diğer geliştiricilerin de benzer sorunlar yaşadığı muhtemeldir. Öncelikle Stack Overflow'da hatayı aramayı deneyin. Bu yöntem, 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ştuktan sonra, 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.
Hatayla ilgili yorum yapmaya karar verirseniz hatanın web sitenizi nasıl etkilediğiyle ilgili bilgileri ekleyin. Hata izleyiciler genellikle her yorum için e-posta gönderdiğinden "+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 bir hikayeyi kısa anlatmak gerekirse, sorunun açıklaması iyi bir başlangıç noktası olsa da hiçbir şey, hata içinde sorunu gösteren bağlantılı bir demo sağlamanın yerini tutmaz. 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 durumunu en aza indirmek için birkaç ipucunu burada bulabilirsiniz:
- 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 çok sayıda tarayıcının en yeni derlemelerinde test edin.
- Her şeyi 1 dosyada toplamayı deneyin.
- 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
Küçükleştirilmiş test durumunuzu barındırmak için iyi bir yer arıyorsanız birkaç iyi yer vardır:
Bu sitelerden bazılarının bir iframe'de içerik görüntülediğine ve bunun da özelliklerin veya hataların farklı davranmasına neden olabileceğini unutmayın.
Sorununuzu bildirin
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 oluşturulması 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, sorunun yeniden üretilmesi 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 tüm test ortamlarının ayrıntılarını eklediğinizden emin olun.
Hatayı gönderme
Son olarak hatayı gönderin. Hataya verilen yanıtlar için e-postanızı düzenli olarak kontrol edin. Mühendisler genellikle inceleme sırasında ek sorular sorabilir. Sorunu yeniden oluşturmakta zorluk yaşarlarsa sizinle iletişime geçebilirler.