iOS App Development

iOS WebView Debugging

April 28, 2023

Cihazda safari ve uygulamada kullandığımız webview içeriğinin bilgisayar üzerinden debug edilmesi.

iOS WebView Debugging

Webview kullanılan projelerde sayfaları ve JavaScriptleri debug ederek web sayfasındaki hataları giderebilmekteyiz. Bunun için cihazı bilgisayarınıza bağlamanız ve tarayıcınızın geliştirici ayarlarını kullanmanız gerekmektedir.

iOS Web Görünümlerinde Hata Ayıklama

iOS webviewde web sayfasındaki console.log() mesajları Xcode log’larında görüntülenememektedir. Bunun için Safari’nin geliştirici ayarlarını kullanarak kolaylıkla log’ları ve hata ayıklamalarını yapabilmekteyiz.

  • iOS web görünümlerinde hata ayıklamak için Safari gerekir, bu nedenle geliştirici bilgisayarınızda macOS çalışıyor olmalıdır.
  • Web görünümlerinde yalnızca Xcode aracılığıyla cihazınıza yüklenen uygulamalarda hata ayıklayabilirsiniz. App Store veya Apple Configurator aracılığıyla yüklenen uygulamalarda web görünümlerinde hata ayıklayamazsınız.

Bu sınırlamaları göz önünde bulundurarak, iOS’ta bir web görünümünde uzaktan hata ayıklama adımları şunlardır:

  1. İlk olarak, iOS Ayarları uygulamasını açıp Settings > Safari > Advanced (Ayarlar > Safari > Gelişmiş’e) giderek ve Web Denetçisi seçeneğini açık konuma getirerek iOS cihazınızda Safari Web Inspector (Web Denetçisini) etkinleştirin.
Settings > Safari > Advanced

2. Ardından, geliştirmeyi yaptığınız bilgisayarınızda Safari’de geliştirici araçlarını da etkinleştirmelisiniz. Geliştirme bilgisayarınızda Safari’yi başlatın ve menü çubuğunda Safari > Preferences (Safari > Tercihler’e) gidin. Görüntülenen tercihler bölmesinde, Gelişmiş sekmesine tıklayın ve ardından alttaki Show Develop (Geliştirmeyi Göster) menü seçeneğini etkinleştirin. Bunu yaptıktan sonra tercihler bölmesini kapatabilirsiniz.

Show Develop

3. iOS cihazınızı geliştirici bilgisayarınıza bağlayın ve uygulamanızı veya safari başlatın.

4. Geliştirici bilgisayarınızdaki Safari’de, menü çubuğunda Develop (Geliştir’e) tıklayın ve iOS cihazınızda çalışan webview örneklerinin bir listesini göstermek için iOS cihazınızın adını seçin.

Safari Develop

5. Hatalarını ayıklamak istediğiniz web görünümü için açılır seçeneği tıklayın. Bu, web görünümünü incelemek için yeni bir Safari Web Denetçisi penceresi açacaktır.

Web Inspector

Author: Atakan Cengiz Kurt

Tags

Debugging iOS WebView