Chrome ile debugging

Ekran Resmi 2016-01-20 21.21.26

React Native ile Chrome Dev. Tools kullanarak nasıl debugging yapabiliriz ona değineceğim.

Simulator açıkken cmd+kntrl+z kombinasyonu ile dev. menüsünü açıyoruz ve oradan Debug in Chrome’u seçiyoruz.

Daha sonra karşımıza Chrome penceresi çıkacak. Bu ekranda cmd+alt+J kombinasyonu ile console ve sources sekmelerini açıyoruz. Console’u altta açmak isterseniz esc tuşuna basınız.

Örneğin aşağıdaki gibi bir componentimiz olsun ve hi değişkenine hello stringini atayalım.

Ekran Resmi 2016-01-20 22.49.31

Hiç bir değişiklik yapmadığımız için çıktı olarak aynen hello yazdı.

Şimdi bunu console aracılığı ile değiştirelim.

Sources sekmesinden debug yapmak istediğimiz dosyayı açıyoruz ve daha sonra istediğimiz bir noktaya breakpoint koyuyoruz.

Ekran Resmi 2016-01-20 22.46.25

Cmd+R ile simulatoru yenilediğimizde aşağıdaki gibi breakpointe takılacak. Daha sonra sağ üstteki mavi play/pause tuşunun yanındaki üzerinden ok geçen butona basıyoruz ve bir sonraki aşamaya bizi götürüyor. Burada da görüldüğü gibi değişkenin değeri hello olarak tanımlı.

Ekran Resmi 2016-01-20 22.55.53

Console dan değişkenin değerini ‘hi’a eşitleyelim ve artık yeni değer ‘hi’ oldu.

Ekran Resmi 2016-01-20 22.59.56

Sonuç:

Ekran Resmi 2016-01-20 23.00.58