Charles Proxy ile Debugging

Merhabalar,

Kısa bir süre önce Testinium’da Yazılım Test Mühendisi olarak görev almaya başladım. Yeni başladığım Yemeksepeti projesinde çokça kullandığım Charles Proxy hakkında deneyimlediklerimi sizlerle paylaşmak istedim. Bu yazımda Charles Proxy Nedir, Nasıl Kurulur, Kullanımı ve Web Debugging Nedir gibi sorulara beraber cevap bulacağız.

Haydi Başlayalım!

Web Debugging Nedir?

Hata ayıklama; hataları bulmanın, kusurları düzeltmenin ve bütün bunların sayılarını en aza indirmenin yoludur. İşimizi kolaylaştırsın diye de bazı toollar kullanıyoruz. Bunlara bazı örnekler ise aşağıdaki gibidir:

• Charles Proxy
• Fiddler
• Proxyman

Charles Proxy Nedir?

Charles Web Debugging Proxy, Java ile yazılmış, platformlar arası bir HTTP/HTTPS hata ayıklama proxy sunucusu uygulamasıdır. HTTP izleyicisi veya Ters Proxy olarak da bilinen ve test cihazının makineleri ile İnternet arasındaki tüm HTTP ve SSL/HTTPS trafiğini görüntülemesini sağlayan bir HTTP proxy’sidir. Buna istekler, yanıtlar ve HTTP başlıkları dahildir.

Charles ile tüm trafiği kaydedebilir ve daha sonra kontrol edebiliriz.

Charles, testçinin sorunun kaynağını hızlı bir şekilde bulmasına, ortaya çıkan farklı hata türlerini verimli bir şekilde ayırmasına ve çeşitli test senaryolarını çoğaltmasına olanak tanır.

Charles Nasıl Kurulur?

Windows

https://www.charlesproxy.com/ sitesine girilerek “Download” seçilir. Sahip olunan pc özelliğine göre exe seçilerek indirme başlatılır. İndirme tamamlanıp kurulum yapılır.

Aşağıdaki adımlar izlenir.

Finish düğmesine tıklanır. Kısayol simgesine tıklayarak Charles uygulaması açılır.

İlk ekran aşağıda gösterildiği gibi görünmelidir. Windows proxy seçeneği varsayılan olarak etkinleştirilecektir. Bunu, üstteki proxy menü öğesine tıklayarak kontrol edebilirsiniz.

Mac

https://www.charlesproxy.com/ sitesine girilerek “Download” seçilir. Sahip olunan pc özelliğine göre exe seçilerek indirme başlatılır. İndirme tamamlanıp kurulum yapılır.

Charles uygulaması açılır.

İlk ekran aşağıda gösterildiği gibi görünmelidir. macOS proxy seçeneği varsayılan olarak etkinleştirilecektir. Bunu, üstteki proxy menü öğesine tıklayarak kontrol edebilirsiniz.

Şimdi sıra geldi telefonlarımıza 😊

Mobil cihazlarla nasıl bağlantı kurulur?

• Bilgisayarımız ve mobil cihazımız aynı wifi ağına bağlı olmalıdır.
• Bilgisayarımızda Charles proxy uygulaması açıkken Help>Local Ip Address bölümünden aldığımız ip adresini alıyoruz. Port numarasını ise Proxy>Proxy Settings bölümümden değiştirilebilir ve görüntülenebilir. Port numarası Default olarak 8888 olarak geliyor.

Telefonumuzdan proxy ayarlarına giriyoruz ve kaydet butonuna basıyoruz.

• Şimdi sıra geldi SSL sertifikasını kurmaya. SSL sertifikasını kurmadan sağlıklı veriler alamayız. Tarayıcıdan https://chls.pro/ssl adresine gidelim.
• Buradan “İzin Ver” diyoruz. “Profil indirildi” yazısını gördüğümüzde işlem tamamdır.
• Telefon ayarlarından “SSL sertifikasına güven” diyerek doğrulamak gerekmektedir.
• iOS için Ayarlar -> Genel -> Hakkında -> Sertifika Güven Ayarları -> Sertifikayı etkinleştir.

Buraya kadar geldikten sonra Mobil cihazların proxy isteği Charles uygulaması üzerine düşecektir. Bu adımda Charles üzerinden izin veriyoruz.

Artık telefon trafiğini Charles üzerinden görüntüleyebilirsiniz.

Web ve Telefon Trafiğini İzleme

Bilgisayarınız üzerinden yapılan tüm web istekleri ve telefonunuzda yapılan işlemler artık Charles üzerine düşmeye başlamış durumdadır.

İsteklerin üzerinde kilit resmi gözükmektedir. Bu da ssl proxy nin aktif edilmemiş olması demektir.

Bunun için Charles üzerinden Proxy>SSL Proxying Settings ayarlarından Add diyerek istenen bir host takip edilebilir olması için eklenir.

Artık yemeksepeti.com domaine ait tüm subdomainler de takip edilir hale gelmiştir.

Get Damla Görgülü’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Trafiğin Filtrelenmesi

Charles üzerinde bilgisayarınızdan ve telefonunuzdan atılan birçok istek vardır. Bunlar bilgisayarınızdaki;
Mesajlaşma uygulamaları,
Açık olan web sayfalarının yenilenmesi,
İşletim sisteminin yaptığı istekler vsdir.

Birçok istek arasında size lazım olan isteklerin görüntülenmesi için “Filter” opsiyonunu kullanabilirsiniz.

Request ve Responseların Görüntülenmesi

Structure altında yapılan istekler ve detayları görüntülenir. İlgili request urli seçildikten sonra contents sekmesi altında gönderilen request ve response görüntülenir.

Contents tabında sağ tuşa tıklandığında;
URL,
cURL,
Request,
Response bilgileri kopyalanabilir.

Breakpoints

Herhangi bir isteği breakpoint olarak işaretlerseniz, Charles bu istekle bir daha karşılaştığında, kullanıcıdan bir sonraki noktaya devam etmesini veya iptal etmesini isteyen kullanıcı girdisini bekler.

Peki Neden Breakpoint’e ihtiyaç duyarız?

Bir uygulamada frontend, backend’den gelen response göre davranacaktır. Önyüzde yakalanan bir hatanın kaynağını belirleyebilmek için yapılan request ve responseları kontrol etmek gerekecektir. Bu sayede hata frontendde mi yoksa backendde mi anlayabiliriz. Buda bize hatayı hangi ekibe ya da hangi developer grubuna ileteceğimiz noktasında yardımcı olacaktır.

Örneğin, frontend’in eksik parametre ya da yanlış parametreler ile attığı bir requestin sonucu beklendiği gibi gelmeyecektir. Buda frontendde hataya sebep olacaktır. Bu hatanın kaynağı frontendin requesti yanlış göndermesidir. Request düzeldiğinde response da düzelecek ve hata ortadan kalkacaktır.

Bir başka örnekte backend’in belirlenen, el sıkışılan response yapısından farklı ya da eksik bir Paremetre ile cevap döndüğünde hata Backend kaynaklıdır. Backend hatayı düzelttiğinde frontend olması gerektiği gibi çalışacaktır.

Breakpoint Ekleme

Yemeksepeti anasayfadayken yeni eklenen restoranlarda 5ten fazla olduğu için yanında tümü butonunun olduğunu görüyorum. Ben bu restoranların sayısını 5 düşürürsem tümü butonunu görmemem lazım.

Bunun için benim için gerekli olan requesti bulup, o noktaya breakpoint ekliyorum. Öncesinde response kopyalayıp, başka bir yerde 5 restoran kalacak şekilde düzenliyorum.

Daha sonra uygulamayı tekrar açıyorum ve yemeksepeti anasayfaya geçiş yapıyorum. Karşıma çıkan ekranda “Execute” e basıyorum.

Daha sonra çıkan sayfada “Edit Response” a tıklayıp, aşağıdan “JSON Text” e çeviriyoruz.

Bütün textin yerine yeni oluşturduğumuz json textini yapıştırıyoruz. Son olarak da tekrar “Execute” e basıyoruz.

Mobil cihazımdan kontrol ettiğimde “Tümü” butonunun artık olmadığını görüyorum.

Bu sayede elimizde ilgili koşulu test etmemizi sağlayacak data olmamasına rağmen response manipüle ederek testimizi gerçekleştirmiş oluyoruz.

Map Local

Map Local özelliği, yerel dosyaları uzak bir websitesinin bir parçasıymış gibi kullanmanıza yarayan çok faydalı bir özelliktir.

Geliştirme ve test aşamasında henüz backend hazır değilken local olarak ayarladığınız responselar ile geliştirmeye ve teste devam edebilirsiniz.

Peki nasıl çalışır?

Normalde clienttan çıkan bir istek API’ye gelir ve API bir response döner.

Local Map özelliğini aktif ettiğimizde ise request API’ye gitmez ve Charles o requested için önceden hazırlanmış olan cevabı otomatik olarak döner.

Örneğin;

Yemeksepeti Banabi üzerinden test siparişi oluşturalım. Siparişi takip edebiliyoruz. Sipariş durumundaki değişiklikleri ekrana yansıtabilmek ve kuryenin ilerlemesini gösterebilmek için her 5 saniyede client bir istek atıyor. Bu durumda istediğimiz yanıtları görmek için map local özelliğini kullanalım.

Sipariş takip butonu tıkladığımda henüz sipariş takip servisleri çalışmadığı için doğru cevap dönmüyor ama client tarafı geliştirmesini tamamladı ve test etmek istiyoruz.

Charles üzerinde DeliveryInfoya gelip response kopyalayıp json dosyası olarak kaydediyoruz. DeliveryInfo üzerine gelip sağ tuş ile URL i kopyalıyoruz. Tools> Map Local i açıyoruz. Add diyerek kopyaladığımız URL i Host’a yapıştırıyoruz. Path ve Protocol otomatik oluşuyor. Local path bölümüne gelerek Choose seçeneğinden kaydettiğimiz json dosyasını seçiyoruz ve OK’a basıyoruz. Böylece Map Localimizi ayarlamış oluyoruz.

Şimdi json dosyasında değişiklikler yaparak testlerimiz gerçekleştirebileceğiz.

Öncelikle json dosyamdaki “Status”: “Preparing” yaparak hazırlanıyor konumuna alıyorum. Sayfayı tekrar çağırıyorum.

“Status”: “OnTheWay” yaparak yolda konumuna getiriyorum.

“Status”: “Delivered” yaparak Teslim edildi konumuna getiriyorum.

Ben statuslerini değiştirdim ve kontrol ettim. İstediğimiz bütün parametreleri bu şekilde değiştirerek kontrol edebiliriz. Örneğin kurye ismi, telefonu, koordinatlar vs.

Bu özellik sayesinde henüz geliştirmesi tamamlanmamış servisleri veya data eksikliklerimizi gidererek test yapabiliriz.

İşte bu benim Charles Proxy maceramdı 😊 Umarım faydalı ve ileride kullanacağınız bilgiler olmuştur. Bir sonraki yazımda görüşmek üzere…