Telefondan ögeyi denetle aracını kullanmak istemenizin birçok sebebi olabilir fakat buna en çok geliştiricilerin ihtiyacı vardır. Ne de olsa tüm cihazlarla uyumlu bir web sitesi yapmak zor bir iştir. Örneğin bir yazının rengini değiştirdiğinizde masaüstü tarayıcıda hiçbir sorun olmazken mobil tarayıcıda bazı aksaklıklar yaşanabilir.
Başka bir örnek vermek gerekirse yazının boyutunu masaüstü tarayıcıda arttırdığınızda hiçbir sorun göremezken mobil tarayıcıda arttırdığınız zaman ortada bir uyumsuzluk olduğunu kolayca fark edebilirsiniz.
Bu tür aksaklıkları tespit etmenin en kolay yolu, ögeyi denetleme aracıdır. Herhangi bir değişikliği herkese geçerli hâle getirmeden önce yapılacak olan değişikliğin nasıl görüneceğini sadece bir cihazda inceleyebilirsiniz.
Daha önce en az 1 kez masaüstü tarayıcı kullananlar zaten tesadüfen de olsa boş bir kısma sağ tıklamış ve “İncele” seçeneğini görmüştür. Sorun şu ki Chrome gibi web tarayıcılarının mobil sürümünde sayfanın boş bir kısmına basılı tutarsanız “İncele” seçeneğini göremezsiniz.
Peki, mobilde de bu aracı kullanabilmek için ne yapmalısınız? Gelin, telefon ya da tablette ögeyi denetleme aracının nasıl kullanılabileceğini öğrenelim.
Telefondan Ögeyi Denetle Yapma Adımları
- Inspect and Edit HTML Live uygulamasını indirin.
- Uygulamayı açın.
- Ögeyi denetleme aracını kullanacağınız web sitesine girin.
- Değiştirmek istediğiniz ögeyi bulun.
- Adres çubuğunun hemen yanındaki parmak simgesine basın.
- Simge sarı renkle vurgulandığında değiştireceğiniz ögeyi seçin.
- O ögenin kodları karşınıza gelecektir. Arama yapmak için üst kısımdaki kutucuğu kullanabilirsiniz.
- Denetleme modundan çıkmak için arama kutusunun yanındaki simgeye basabilirsiniz.
Telefonda Kaynak Kodlarını Açma Nasıl Yapılır?
- Chrome, Opera, Vivaldi, Firefox gibi tarayıcılardan birini açın.
- Kaynak kodunu görüntülemek istediğiniz web sitesine gidin.
- Web sitesi açıldıktan sonra adres çubuğuna dokunun.
- Web sitesinin başına tırnaklar olmadan “view-source:” ekleyin (Örnek: view-source:google.com).
- O web sitesinin kaynak kodlarına erişeceksiniz. Bu sayfada verilen bağlantılara, medya ögelerine ve çok daha fazlasına ulaşabilirsiniz.
Ögeyi değiştirmek değil de web sitesinin kaynak kodlarını görüntülemek istiyorsanız yukarıda yer alan adımları takip edebilirsiniz. Unutmamalısınız ki bu adımlar size yalnızca web sayfasındaki kodları gösterir. Bu kodlar üzerinde herhangi bir değişiklik yapamazsınız.
Bilgisayar Üzerinden Telefonda Ögeyi Denetleme (USB ile)
Telefonda doğrudan ögeyi denetlemek mümkün olmasa da, mobilde açılan bir siteyi bilgisayar üzerinden birebir mobil görünümde denetlemek mümkündür. Bu yöntem özellikle geliştiriciler tarafından sıkça tercih edilir ve ek uygulama gerektirmez.
Bu işlem için telefonunuzu USB kablosu ile bilgisayara bağlamanız yeterlidir. Android cihazlarda Geliştirici Seçenekleri ve USB hata ayıklama açık olmalıdır. Ardından bilgisayarda Google Chrome açılır ve adres çubuğuna chrome://inspect yazılır. Telefonunuzda açık olan sekmeler burada listelenir ve “Inspect” seçeneği ile mobil sayfa, masaüstündeki geliştirici araçları üzerinden denetlenebilir.
Bu yöntem sayesinde mobil ekranda görünen CSS hataları, font boyutu sorunları, taşan içerikler ve responsive problemler gerçek cihaz üzerinde anlık olarak incelenebilir. Yapılan değişiklikler sadece size özel olur ve siteyi ziyaret eden diğer kullanıcıları etkilemez.
Özellikle mobil uyumluluk testleri, breakpoint kontrolleri ve dokunmatik alanların doğru çalışıp çalışmadığını görmek için bu yöntem, telefondan uygulama kullanmaya kıyasla çok daha kapsamlı bir kontrol imkânı sunar.
Yorum Yap