WordPress sitenizde tarayıcı çapraz uyumluluğunu test etmek için önemli bir araç
Sitenizin görünümünü ve performansını farklı bir tarayıcıda test etmiyorsanız, site ziyaretçilerinizin bunu istediğiniz gibi görüp görmediğini gerçekten bilmiyorsunuz. Buna ek olarak, farklı işletim sistemleri ve farklı cihazlarda çeşitli tarayıcıda test etmek de bir zorunluluktur. Sonuçta, OS X’teki Google Chrome, Windows’ta Google Chrome veya iPhone 6S’deki Google Chrome gibi değil. Tabii ki, birkaç işletim sistemi çalıştıran çok fazla tarayıcınız yoksa, bu test tamamen imkansızdır. Neyse ki, sitenizin trafiğini test etmenizi sağlayan bazı harika araçlar var. Bu yazıda, çapraz tarayıcı uyumluluğunu ve test için bazı ücretsiz ve en iyi premium seçeneklerin nasıl test edileceğini göreceğiz.
Çapraz tarayıcılarla uyumlu bir sitede başlayarak, sitenin görünür ve aynı şekilde tüm cihazlarda, ekranlarda ve tarayıcılarda çalıştığı anlamına gelir. Sitenizi çapraz tarayıcı ile uyumlu olacak şekilde doğrudan test etmeden önce, bilmeniz gereken bazı şeyler vardır:
Sitenizi görmek için ziyaretçileriniz tarafından kullanılan keşif yöntemi
Bu arama yönteminin en yaygın sürümü
Siteye erişmek için küresel olarak kullanılan en popüler cihazlar
İdeal olarak, her cihazı ve tarayıcıyı test etmek istersiniz, ancak özellikle testi yapan tek kişi sizseniz, yapmak çok zordur. Mümkün olduğunca tam olmak hala önemlidir, ama nasıl?
Başlamak için en iyi yer, ziyaretçileriniz tarafından düzenli olarak kullanıldığını bildiğiniz yöntemdir, böylece sitenize geri dönmek için bir problemi olmadığından emin olabilirsiniz. Ardından, tüm dünyanın sitenize erişebilmesini sağlamak için diğer tüm arama yöntemlerini ve sürümlerini test edebilirsiniz. Test, ne test edileceğini bilmek kadar önemlidir. Ziyaretçilerinizin sitenizi tam olarak nasıl gördüğünü bilmek istiyorsanız, başlamak için net bir yer, trafik istatistiklerinizdir, çoğu için Google Analytics stilidir. Ziyaretçileriniz tarafından kullanılan tarayıcıyı bulmak için Google Analytics’i ve Açıcı Kitle> Teknoloji> Tarayıcı ve OS’yi çalıştırın. Kullanıcınızın sitenizi nasıl gördüğüne dair daha derin bir analiz için, ikincil boyutu tıklayın ve kullanıcılarınızın sitenizi belirli bir tarayıcı ve işletim sisteminin bir kombinasyonu ile kontrol ettiğini görmek için cihaz kategorisini seçin.
İşletim sistemi ve masaüstü bilgisayar
Microsoft, Windows – 7, 10, XP, 8.1, 8, Vista, NT, 2000, 98
Apple, Mac – OS X, 10.11 El Capitan, 10.10 Yosemite, 10.9 Mavericks, 10.8 dağ aslanı, 10.7 aslan, 10.6 kar leoparı, 10.5 leopar, 10.4 Tiger
Linux – Mint, Debian, Ubuntu, Opensuse, Fedora, Mageia, Manjaro, Centos, Arch, İlköğretim Browser
Chrome – 49.0, 48.0, 45.0, 31.0, 47.0, 36.0, 38.0, 46.0, 43.0, 42.0, 29.0, 39.0, 44.0, 18.0, 32.0, 35.0, 30.0 Maxthon Edition, 50.0
Internet Explorer – 11.0, 8.0, 9.0, 10.0, 6.0, 6.0
Kenar – 13, 12
Firefox – 44, 45, 43, 38, 42, 46, 41
Safari – 9.0, 9.1, 8.0, 5.0
Opera – 35, 36, 12. ×
Mobil cihaz
Android-Marshmallow, Kitkat, Lollipop, Jelly Bean, Gingerbread, Dondurma Sandviç ve Samsung Galaxy S3 (GT-I9300), Galaxy S5 (SM-G900F), Galaxy S4 (GT-I9505), Galaxy S4 (GT-I9500), Galaxy Grand Prime (SM-G530H), Galaxy Note 3 (SM-N9005), Galaxy Note 2 (SM-N7100), Galaxy S Duos 2 (GT-S7582), LG G3 (LG-D855)
iPhone ve iPad – iOS 9. ×, 8. ×, 6. ×, 5. ×, 4. × ve iPhone 6, iPhone 5s, iPhone 6s, iPhone 5, iPhone 6+, iPhone 5C, iPad 2G, iPad Air, İPhone 4S, iPad Mini, iPhone 6s+, iPhone 4, iPad Air 2, iPad 4G, iPad Mini 2, iPod Touch 5G, iPad 3G, iPod Touch 4G, iPad Pro
Windows Phone – 8.1, 8, 7, 10 ve Nokia Lumia 520, Nokia Lumia 630, Microsoft Lumia 535, Nokia Lumia 625, Nokia Lumia 635, Nokia Lumia 920, Nokia Lumia 925, Nokia Lumia Lumia 720
Bu tam bir liste olmasa da, bu size başlamak için güçlü bir temel verecektir.
Testi ne içerir? Çapraz tarayıcı testi, sitenizin sahip oldukları tüm farklı tarayıcılarda ve sürümlerde çalışmasını sağlamakla ilgili olduğundan, Chrome, Firefox, Internet Explorer ve Safari gibi popüler olarak test etmek mantıklıdır, ancak sitenizi mobil cihazlarda ve sitenizi test etmek de önemlidir. bilgisayarlar farklı. Her cihaz tarayıcısının alınan kod türü hakkında kendi kuralları vardır ve diğer tarayıcılarla aynı şekilde görüntülenir, bu nedenle tüm varyasyonları test etmek önemlidir. Bu, daha yeni bir sürümden daha uzun bir sürüm için geçerlidir. Programlama dilinin zaman zaman ilerlemesi olarak, geliştiriciler için yeni kod türü yayınlandı. Siteniz farklı cihazlarda yanlış görüntülenebilir ve cihaz için test bu hatayı algılayabilir. Onunla yapabileceğiniz yeni kodlar ve işlevler, farklı bir tarayıcının yeni bir sürümüne dahil edilir, ancak elbette daha uzun bir gecikme sürümü. Farklı tarayıcıların tüm yeni sürümleri bir programlama dili güncellemesi içermediğinde daha karmaşık hale gelir. Belki de test edileceğini bilmek, test ederken ne bulacağınızı bilmek kadar önemlidir. Sitenizin görünür ve tüm cihazlarda ve tarayıcılarda tam olarak istediğiniz gibi çalıştığından emin olmak için test etmelisiniz. Test ettiğinizde, birçok performans problemi hız sorunlarıyla ilgili olduğu için sitenin hızını da kontrol edebilirsiniz.
Dikkat edilmesi gereken en yaygın sorun, diğer tarayıcılarda sitenizdeki tutarsızlıklardır:
Düzen – Sayfa öğeleri doğru şekilde yüklenemez veya konumlandırılamaz. Gezinme düşüşü aşağı navigasyon veya bağlantı çalışmayabilir. Metin görüntüsünüzün ve diğer sayfa öğelerinizin yayılması doğru şekilde sarılmayabilir.
Düğme – Form verileri veya ayarladığınız yere bağlantılar gönderemeyebilirler.
Element – Görüntülenmeyen veya beklendiği gibi işlev görmeyen animasyonlar gibi diğer sayfa öğelerinde çeşitli sorunlar görebilirsiniz.
SSL Sertifikası – Sitenizin doğru şekilde sabitlenmediğini söyleyen bir hata görebilirsiniz.
Ayrıca dikkat edebileceğiniz ve tarayıcı boyunca ne tür bir kodun alındığını bildiğiniz başka anomaliler de olabilir.
En popüler tarayıcı tarafından desteklenen kodlama öğesini tanımlayan destek tablosu için bazı kaynaklar:
Canuse.com – HTML, CSS, JavaScript ve diğerleri için geniş bir tarayıcı destek tablosu
Geliştiriciler için MDN Web Teknolojisi – HTML gibi bölümlerde etiketleri görebilir ve uyumluluğu görebilirsiniz
CSS3 W3Schools Tarayıcı Desteği – CSS3 öğeleri için tarayıcı desteği ve referans bölümünde tek tek öğeler için uyumluluk görebilirsiniz.
Sitenizi tüm tarayıcılarda ve cihazlarda test etmek için kullanabileceğiniz aracı girmeden önce çapraz tarayıcı uyumluluğu nasıl test edilir, sitenizi test etmeye başladığında başlamak için en iyi yerlerden biri, sitenizi yükleyebileceğiniz bir tarayıcıda kontrol eder. Kendiniz işletim sisteminde ve hangi cihazı kullanırsanız kullanın. Sahip olmak.
Ayrıca yükleyebileceğiniz veya birçok popüler tarayıcıya dahil edilen geliştirici araçları da vardır. Edge, Internet Explorer ve Chrome içine yerleştirildiler ve Firefox ile kullanım için Firebug’u da kurabilirsiniz. Internet Explorer’da, artık mevcut olmayan önceki sürümü indirmenize gerek kalmadan sitenizi çeşitli sürümlerde görebilirsiniz. Belirli bir sayfada hangi kodun kullanıldığını da belirleyebilirsiniz. Geliştirici aracına kenarda erişebilirsiniz. Sitenizi ziyaret edin, sayfayı sağlayın ve öğeyi inceleyin. Ayrıca sağ üstteki Elipsis simgesine tıklayabilir ve F12 geliştirici araçlarını seçebilirsiniz. Görünen küçük pencerede, Emülasyon sekmesini tıklayıp damla sürümünü, internet explorer, chrome, firefox, safari veya operayı bırakın. -Saydown kullanıcı aracısı dize kutusu.
Kenardan çeşitli tarayıcıları simüle edebilirsiniz.
Sitenizin en son Windows telefonlarında görünümünü görmek için tarayıcı profili altında Windows 10 Mobile’ı da seçebilirsiniz. Standart bir masaüstü ekranı içindir. Aynı şekilde, Internet Explorer’daki geliştirici aracına erişmek için tarayıcıyı açın ve pencerenin sağ üst kısmındaki dişli ayar simgesini tıklayın ve F12 geliştiricisini seçin. Segmentli pencerede görünen tarayıcı modunu tıklayın ve seçtiğiniz Explorer sürümünde sitenizin görüntülenmesini görmek için seçeneklerden birini seçin.
Chrome’da, çeşitli tarayıcı türleriyle uyumluluğu test edemezsiniz, ancak sayfadaki herhangi bir öğede kullanılan kodu görebilirsiniz. Sitenizi ziyaret edin ve sayfadaki sağa tıklayın, ardından İncele’yi seçin. (Daha fazla ayrıntı için WordPress geliştirme için Chrome Geliştirici Araçlarını kullanan kılavuzumuza bakın.)
Sorun kodunu Chrome geliştiricisinde bulabilirsiniz. İmleci her kod satırına yönlendirdiğinizde, satırı değiştirirseniz neyin etkileneceğini görebilmeniz için sayfa vurgulanacaktır. Firefox’ta, benzer bir araç almak için Firebug eklentisini de yükleyebilirsiniz. Adres çubuğunuzdaki hata simgesine tıklayarak etkinleştirebilirsiniz. Konsol açık olduğunda, gerçek zamana atıfta bulunan sayfa öğelerini görmek için imleci kod satırına yönlendirebilirsiniz.
Firebug geliştirme aracı, sorun kodunu tanımlamanıza yardımcı olur. Ayrıca, sadece sayfa öğesiyle ilgili derinlikli kodunu ortaya çıkarmak için imleci sayfanın belirli bir bölümüne yönlendirmek için konsoldaki işaretçi simgesini de tıklayabilirsiniz.
Safari ve Opera tarayıcısında, sitenizi ziyaret ederek, sayfanın herhangi bir yerine doğru tıklayıp inceleyin öğesini seçerek tarayıcıda aynı tür araçları da alabilirsiniz. Konsol, sayfa öğesi kodunu, satırdan satır. Herhangi bir sorun için kodunuzu kontrol etmek için bir doğrulayıcı da kullanabilirsiniz. İşte bazı harika kod doğrulayıcıları (ve ücretsiz!):
Markup W3C Doğrulama Hizmeti – HTML, XHTML, SMIL, MATHML ve diğerlerindeki sorunlar için URL’lerin kontrol edilmesi CSS W3C Doğrulama Hizmeti – URL girerek CSS’yi kontrol edin
NU HTML Damin – HTML belgelerini kontrol etme Unicorn – HTML, CSS, bağlantılar ve hücresel için entegre doğrulayıcı
JSFiddle – HTML, CSS, SCSS, JavaScript, JQuery ve JSON doğrulama
JSLINT – JavaScript veya JSON’da Hata Bulma Ekli
Kod Güzel JavaScript Doğrulayıcı – JavaScript Sözdizimsel Hataları Kontrol Etme
Kod Güzel JSON Doğrulayıcı – JSON kodunuzu doğrulamak ve PHP kodunu kontrol eden bir sözdizimi hatası bulur – Sözdizimi muayenesi (fiber) ve yaygın hatalar için özel muayene
PHP PHP Kodu Sözdizimi İncelemesi – Sözdizimi hataları için PHP4 ve PHP5 kodunu kontrol edin
Bu sitelerin hepsi kodunuzun kullanıma hazır olduğundan emin olmak için iyidir, ancak uyumluluk çapraz tarayıcı için eksiksiz testler çalıştırmak için kullanabileceğiniz başka birçok araç da vardır. Tarayıcı Testini Geçmek İçin Araçlar Birkaç test çalıştırmak için, simüle edilmiş işletim sistemlerinde farklı bir tarayıcı çalıştırmak için bir sanal makine hazırlayabilirsiniz, ancak bu zaman ayırıcı bir işlemdir. Çapraz tarayıcı testlerini daha kolay ve daha hızlı hale getiren birkaç alternatif vardır. Bu ücretsiz ve premium araç, tarayıcı testi için çok iyidir. Premium Araçlar ayrıca ücretsiz bir deneme veya demoya sahiptir, böylece ne kullanmak istediğinizi seçmeden önce tüm bunları ücretsiz olarak deneyebilirsiniz.
Kum kutusuna göz atın
Bir sanal alan tarayıcısı ile Chrome, Firefox ve Internet Explorer’ın tüm sürümlerini çevrimiçi olarak test edebilirsiniz. Safari ve Opera’nın çeşitli versiyonları da vardır. Bu araç ücretsizdir, ancak testi çalıştırmak için bir hesap kaydetmeniz gerekir. Tarayıcı kum kutusuyla ilgileniyor musunuz?
Detaylar
Tarayıcı
Browsera aslında versiyonu yan yana karşılaştırır ve size ikisi arasındaki farkın tam olarak ne olduğunu söyler. Internet Explorer, Firefox ve Safari tarayıcısını test edebilirsiniz. Gelişmiş hata raporlaması için ücretsiz bir hesap almak veya Premium sürümünü artırmak için kaydolabilirsiniz. Bir tarayıcı ile ilgileniyor musunuz?
Detaylar
Tarayıcı
En popüler tüm tarayıcıları ve sürümleri Windows ve Android işletim sistemi için ücretsiz olarak test edebilirsiniz. Sitenizin URL’sini ön sayfaya girin ve bir hesap oluşturmadan test etmeye başlayabilirsiniz, ancak kuyruğa yerleştirilirsiniz ve bazı testler yapana kadar birkaç dakika beklemeniz gerekir. Ücretsiz bir hesap almak veya premium sürüme çıkarmak için de kayıt olabilirsiniz. Tarayıcılarla ilgileniyor mu? Detaylar
Sitenizi Debugbar ile ücretsiz olarak test edebilir ve sitenizi Windows 8 masaüstü, Windows 7, Vista ve XP’de Internet Explorer sürümleri 5.5, 6, 7, 8, 9, 10 ve 11’de kontrol edebilirsiniz. Bu, kişisel ve profesyonel kullanım için indirip kullanabileceğiniz bir yazılımdır. Debugbar ile ilgileniyor musunuz?
Detaylar Tarayıcı çekimi
Sitenizi Firefox ve Chrome sürümlerinin çoğunda ve diğer birkaç sürümde ücretsiz olarak test edebilirsiniz, ancak bu araç bu listedeki diğerleriyle tam olarak aynı değildir. Siteyi doğrudan test etmek için test araçlarıyla etkileşim kurmak yerine, tarayıcı çekimleri mevcut sürümlerden istediğiniz kadar sürüm seçmenizi sağlar. Birkaç dakika içinde, sitenizin ekran görüntüleri çeşitli tarayıcılardan ve bu sürümden yapılır. Ardından, farkı görsel olarak kontrol edebilirsiniz, ancak neyin yanlış olduğunu tam olarak belirlemek zor olabilir. Tarayıcı çekimleriyle ilgileniyor musunuz?
Detaylar Çapraz browser testi
Çapraz tarayıcı testi, sitenizi 900’den fazla tarayıcıda ve 40 işletim sisteminde test edebileceğiniz birinci sınıf bir hizmettir. Bu aynı zamanda farklı cihazları simüle eden bir hizmet değildir – sitenizi en yüksek doğruluk için fiziksel cihazlarda test edebilirsiniz. Çapraz browser testi ile ilgileniyor mu? Detaylar
Laboratuvar sosu Saucelabs, sitenizi 700’den fazla farklı tarayıcı kombinasyonu ve işletim sisteminde manuel olarak test etmenizi sağlayan bir başka premium hizmettir. Sitenizi birkaç saniye içinde farklı bir tarayıcıda görebilirsiniz. Laboratuar sosu ile ilgileniyor musunuz?
Detaylar
Browesstack Bowserstack ile aslında fiziksel cihazlara erişebilirsiniz, ancak sitenizi Internet Explorer, Edge, Safari, Chrome, Firefox’un en son sürümleri dahil 700’den fazla farklı tarayıcıda test edebileceğiniz simülatörlerde, çeşitli pencerelerde ve OS X sistem. Bu aynı zamanda beklemek için kuyruksuz premium bir hizmettir. Browserstack ile ilgileniyor musunuz?
Detaylar
Kullanıcının yeniden oynatılması UserRepplay, hata rapor edildiğinde son kullanıcı ekranını kaydeden birinci sınıf bir hizmettir, böylece neyin yanlış olduğunu ve oraya giden adımları tam olarak görebilirsiniz, böylece sorunu çözmek için hızlı bir şekilde çalışabilirsiniz. Bu, iletişimi aktarır ve bulunan hataları netleştirmek için ileri geri sabit olma ihtiyacını ortadan kaldırır. UserRepplay ile ilgileniyor musunuz?
Detaylar
Sarma Şimdi, WordPress sitenizin bir çapraz tarayıcı testine başlamak için ihtiyacınız olan her şeyle silahlısınız. Ücretsiz kullanabileceğiniz başka araçlar istiyorsanız, duyarlı WordPress tasarımları için CSS3 Medya Sorguları kullanarak diğer yayınlarımızdan birine bakın. Sitenizin başarılı olduğundan emin olmak için çeşitli test türlerinin nasıl çalıştırılacağı hakkında daha fazla bilgi edinmek için, ayrıca bkz. Uyumluluk sorunları için WordPress sitenizi test etmek için 4 ücretsiz eklenti
Trafik artışına hazır olmak için WordPress sitenizi stres test etmek
Çoklu WordPress için Kloner ile Hızlı ve Güvenilir Hata Testi Daha önce bir tarayıcı testini tamamladınız mı? En sevdiğin araçlar hangi araçlar? Birkaçını özlüyor muyuz? Hiç üstesinden gelebileceğiniz inatçı bir hata buldunuz mu? Deneyiminizi aşağıdaki yorumlarda paylaşın.
Etiket:
tarayıcı uygunluk
Test Ortamı
