Telefondan Ögeyi Denetle Nasıl Yapılır?

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.