Özet - Geliştirme araçları

Flipper, DevTools ve console'u birleştirerek bir debug oturumu yazarsın.

Özet - Geliştirme araçları

Bu grupta beş geliştirme aracını tanıdın. Flipper ağ, layout ve console'ı tek pencerede toplar. React DevTools bileşen ağacını ve props/state'i gösterir. Console hızlı değer yazdırır.

Remote debug Chrome DevTools'a bağlanır; debugger anahtar kelimesi kesme noktasıdır. Performance monitor FPS ve RAM'i canlı gösterir; JS ve UI satırı vardır. Bu beş araç, gerçek bir uygulamanın hatasını bulma ve performansı anlama sürecini destekler. Hepsini birlikte kullanmak, hata ayıklamayı hızlı ve görsel kılar.

Uygulama İnceleme için bileşen yaz

DevTools ve console'da incelemek için bir App bileşeni yaz. İçinde console.log('App açıldı') çağrısı ve debugger anahtar kelimesi olsun. Bileşen null döndürsün.

Örnek çözümü göster

function App() {
  console.log("App açıldı");
  debugger;
  return null;
}

Kendini test et

Bileşen ağacını incelemek için?
```
npx ???
```
- React DevTools
- Flipper
- Performance monitor
- Console
Cevabı göster

React DevTools — React DevTools bileşen ağacını gösterir.
Aracı amacına eşle

Flipper

Tek pencerede toplar
React DevTools

Bileşen ağacı
console

Hızlı değer yazdırır
remote debug

Chrome DevTools
perf monitor

FPS ve RAM

React DevTools komutu

$ ____ react-devtools

Cevabı göster

$ npx react-devtools

Sıradaki ders: İzin nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler