Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Safari Web Inspector
Webdesign

Hızlı İpucu: Web Denetçi(Web Inspector)'yi Kullanarak Mobile Safari'de Hata Ayıklama(Debug)

by
Length:LongLanguages:

Turkish (Türkçe) translation by Nevres Emre Alsancak (you can also view the original English article)

Mobil cihazlar için web siteleri ve web uygulamaları oluşturmak ve bunların hatalarını ayıklamak oldukça güçtür. Masaüstü ortamlar için güçlü hata ayıklama araçlarımı mevcuttur; Çoğu tarayıcı bir tür web denetçisine(web inspector) sahip. Ancak, iPhone ve iPad gibi cihazlar için bu araçlara sahip değiliz... şimdiye kadar!

Safari 6 ve iOS 6'nın son sürümüyle artık masaüstünde ve mobil Safari'de web denetçisi kullanarak web siteleri oluşturabilir ve hataları tespit edebilirsiniz. En önemlisi? Kurulum oldukça basittir. Bu dersi takip edin ve kısa sürede mobil iDevices(iAygıtlar) için güçlü hata ayıklama araçlarına sahip olun.

Modern tarayıcı geliştirici araçları, web siteleri ve web uygulamaları oluşturma konusunda çok önemli rol oynamaktadır. Chrome'da geliştirici araçları(developer tools) bulunur. Firefox'da? Firebug. Safari'de? Web denetçisi. Web geliştirme alanında son derece güçlü araçlardır.

Screenshot Safari web inspector

Buna rağmen simdiye kadar web sitelerinin ve web uygulamalarının mobil aygıtlarda hatalarının giderilmesi oldukça zordu. Safari ve Chrome aynı webkit motorunu kullandığından, masaüstü ve mobil tarayıcıların bir web görünümünü oluşturma biçiminde birçok benzerlik vardır. Bu yüzden, çoğu tasarımcı/geliştirici,  webkit motorundan kaynaklanan benzerliklerin bir mobil cihazda'da benzer görüneceğini varsayarak, bu tarayıcılardan birini kullanarak web sitelerini masaüstünde oluşturur ve değiştirir.

Ancak mobil ve masaüstü platformlar aslında oldukça farklıdır. Farklı hafıza kapasitelerine, performans potansiyellerine, giriş cihazlarına ve ağ bağlantılarına sahiptirler. Dolayısıyla, bir tasarımcının mobil cihazlar için kullandığı hata ayıklama araçlarının, daha performanslı hale getirilmesi ve masaüstü araçlarlarla eşdeğer özelliklere sahip olması zorunluluk haline gelmiştir.

Apple'ın iOS 6 ve Safari 6 sürümü, hepimizin bildiği ve sevdiği masaüstü tarayıcı hata ayıklama araçlarının birçok özelliğini mobil cihazlara getirmektedir. Bu ders basit bir şekilde Safari'nin web denetçisini kullanarak mobil web sitelerinizde nasıl hata ayıklama yapabileceğinizi gösterecektir.

Başlamadan önce uyumluluk konusunda bir not: Windows kullananlar için biraz kötü bir haberimiz var. Uzak web denetçisini(remote web inspector) sadece Mac'te kullanarak hata ayıklama ayıklayabilirsiniz. Windows için Safari 6 mevcut değildir. Ayrıca, Safari 6 yalnızca OSX Lion veya daha yeni bir sürümü çalıştıran Mac'lerde kullanılabilir.

Web Denetçiyi Kullanma Yöntemleri

Mobil Safari'de web denetçisini kullanmanın iki yöntemi vardır:

  1. Gerçek Aygıt Yöntemi: Bilgisayarınıza USB ile bağlanmış gerçek bir iAygıt(iPhone, iPad vb.)ile kullanım
  2. Sanal Aygıt Yöntemi: Xcode'un bir parçası olan iOS simülatörü ile kullanım

Bu yöntemlerin ikisini de ele alacağız ve durumunuza göre en uygununu seçebilirsiniz.

1. Adım: Güncel Olduğunuzdan Emin Olun

Web denetçi ile mobil aygıtlarda hata ayıklama yeni bir özellik olduğundan, en son versiyon yazılımlara sahip olduğunuzdan emin olmanız gerekir.

Gerçek Aygıt Yöntemi: Web denetçisini gerçek bir iAraç ile birlikte kullanmak için aşağıdakilere ihtiyacınız olacak:

  • iOS 6 ile çalışan bir iAygıt(iPhone, iPad, iTouch)
  • USB kablosu
  • Safari 6
  • Mac OSX Lion (10.7.4) veya daha yenisi

Sanal Aygıt Yöntemi: iOS simülatörüyle birlikte web denetçisini kullanmak için aşağıdakilere ihtiyacınız olacaktır:

Yazılım sürümlerini kontrol etme: iAygıtınızın iOS 6 çalıştırıp çalıştırmadığını kontrol etmek için cihazınızda "Ayarlar > Genel > Hakkında" bölümüne gidin.

iOS Version Number Screenshot

Safari 6'yı çalıştırıp çalıştırmadığınızı kontrol etmek için Safari'nin menu çubuguna gidin ve "Safari > Safari Hakkında"ya tıklayın.

Safari Version Number Screenshot

Lion'u çalıştırdığınızdan emin olmak için menü çubuğundaki Apple logosuna tıklayın ve "Bu Mac Hakkında"yı seçin.

OSX Version Number Screenshot

Doğru Xcode sürümünü çalıştırdığınızdan emin olmak için Xcode'u açın ve "Xcode > Xcode Hakkında"yı seçin.

Xcode Version Number Screenshot

2. Adım: Geliştirici Araçlarını Açın

Safari'nin masaüstü ve mobil sürümlerinde geliştirici araçlarını ve web denetçisini etkinleştirmeniz gerekir.

Gerçek Aygıt Yöntemi: Gerçek bir aygıtı kullanacaksanız, Mac'inize USB aracılığıyla bağlayın.

Sanal Aygıt Yöntemi: iOS simülatörünü kullanacaksanız, Xcode'u açın, ardından dock simgesine sağ tıklayın ve "Open Developer Tools > iOS Simulator" seçeneğini seçin.

Screenshot opening iOS Simulator

Mobil Safari: Gerçek iAygıt'da veya iOS simülatöründe "Ayarlar > Safari > Gelişmiş"e gidin ve "Web Denetçisi"ni açın.

iOS Screenshot for turning on web inspector

Masaüstü Safari: Henüz yapmadıysanız, Safari'de geliştirici araçlarınızın(developer tools) açık olduğundan emin olun. Menü çubuğunda "Geliştir(Develop)"i görüyorsanız açıktır.

Safari 6 Developer Menu

Menü çubuğunda "Geliştir"i göremiyorsanız, menü çubuğuna gidin ve "Safari > Tercihler > Gelişmiş"i tıklayın ve "Menü çubuğunda geliştirme menüsünü göster(Show develop menu in menu bar)" onay kutusunu seçin.

Safari 6 Advandced Preferences

3. Adım: Web Sitenizi İnceleyin

iOS Simülatörünüz açıksa ya da iAygıtınızı USB ile Mac'inize bağladıysanız((ya da her ikisi birden!), web sitenizde web denetçisini kullanmaya hazırsınız demektir.

Mac'inizde Safari'yi açın ve "Geliştir"e gidin. Artık bağladığınız ve mac'iniz ile çalışan iAraçları(sanal veya gerçek) görmelisiniz. Aşağıdaki ekran görüntüsünde, menüde iki aygıt olduğunu göreceksiniz: biri iOS simülatörü, diğeri benim mac'ime bağlı gerçek bir iPhone.

Screenshot developer menu devices

Bir web sitesini incelemeye başlamak için cihazınızda mobil Safari'nin çalışıyor olması ve web sitesinin açık sekmelerden birinde olması gerekir. Mobil Safari çalışmıyorsa, "İncelenebilir Uygulamalar Yok(No Inspectable Applications)" mesajını görürsünüz.

Screenshot developer menu no applications

İncelemeye başlamak için, incelemek istediğiniz sayfanın adresini mobil Safari'ye girin ve ardından "Geliştir" menüsünden o siteyi seçin. Siteleri gerçek iAygıtınızdan veya iOS simülatöründen incelemeye başlayabilirsiniz. Sayfayı seçtiğinizde seçilen sayfayı belirtmek için mavi bindirme(blue overlay) göreceksiniz.

Screenshot developer menu virtual device
Screenshot developer menu real device

Bir site seçince, Safari'nin web denetçisi açılacak ve web sitenizi incelemeye başlamanıza izin verecektir. Bu kadar!

Screenshot iOS simulator and web inspector

Sonuç

Safari'nin web denetçisi artık parmaklarınızın ucunda olduğuna göre web siteleri ve web uygulamaları oluşturmada ve hata ayıklamada artık çok daha fazla kontrole sahipsiniz.

Mobil sitelerde hata ayıklarken yapabileceklerinizden bazıları aşağıdadır:

  • HTML ve CSS'de canlı değişiklikler yapın.
  • Web sitenizin/uygulamanızın performansını test edin ve JavaScript olaylarını(events) ve ağ isteklerini(network requests) ayrıntılı görün.
  • Durdurma noktaları(breakpoints) ve diğer araçları kullanarak JavaScript'de hata ayıklayın.
  • Uyarıları ve hataları görüntüleyin.
  • Konsola(console)'a erişin.
  • DOM'da arama yapın
  • Site saklama alanına(site storage) erişin ve görüntüleyin.

Artık araçlarınız var, gidin ve inşa edin!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.