DevTools

Development Tools

React Native heeft verschillende tools om je te helpen bij het ontwikkelen en debuggen van je app.

Expo Go App

Met de Expo Go app kun je je React Native app direct op je telefoon testen zonder te publiceren.

Installatie

App Starten

# Start development server
npx expo start

# Of met specifieke opties
npx expo start --clear  # Clear cache
npx expo start --tunnel # Voor testing via internet

Verbinden met Expo Go

Methode 1: QR Code Scannen

1. Start je app met npx expo start
2. Open Expo Go op je telefoon
3. Scan de QR code in de terminal

Methode 2: Zelfde WiFi Netwerk

1. Zorg dat laptop en telefoon op hetzelfde WiFi zitten
2. Start je app met npx expo start
3. Druk op 'a' voor Android of 'i' voor iOS

Developer Menu

Het Developer Menu geeft toegang tot debugging tools en instellingen.

Developer Menu Openen

Developer Menu Opties

Console.log Debugging

De simpelste manier om te debuggen is met console.log().

Basis Console.log

import { useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  // Log bij component mount
  useEffect(() => {
    console.log('Component gemount!');
  }, []);

  // Log bij state change
  useEffect(() => {
    console.log('Count is nu:', count);
  }, [count]);

  return (
    <View>
      <Text>Count: {count}</Text>
    </View>
  );
}

Console Methodes

// Normale log
console.log('Dit is een log');

// Waarschuwing (geel)
console.warn('Dit is een waarschuwing');

// Error (rood)
console.error('Dit is een error');

// Info
console.info('Dit is info');

// Object/Array printen
const user = { name: 'Jan', age: 25 };
console.log('User:', user);

// Meerdere waarden
console.log('Name:', user.name, 'Age:', user.age);

Waar Console Output te Zien

Remote Debugging

Voor geavanceerder debuggen kun je Chrome DevTools gebruiken.

Chrome DevTools Openen

1. Open Developer Menu (shake telefoon of Cmd + D)
2. Klik op "Debug Remote JS"
3. Chrome opent automatisch met DevTools

Breakpoints Gebruiken

import { useState } from 'react';
import { View, Pressable, Text } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  const increment = () => {
    debugger; // Pauze hier!
    setCount(count + 1);
  };

  return (
    <View>
      <Text>{count}</Text>
      <Pressable onPress={increment}>
        <Text>+</Text>
      </Pressable>
    </View>
  );
}

Element Inspector

Met de Element Inspector kun je UI elementen inspecteren en hun styles bekijken.

Inspector Activeren

1. Open Developer Menu
2. Klik op "Toggle Element Inspector"
3. Tik op een element in je app
4. Zie de styles en layout info

Layout Animatie Inspecteren

Zie hoe layout veranderingen worden geanimeerd:

1. Open Developer Menu
2. Enable "Debug Chrome"
3. In Chrome DevTools: More Tools → Rendering
4. Enable "Paint Flashing"

Debug Tips & Tricks

1. Fast Refresh

Fast Refresh herlaadt automatisch je app bij code wijzigingen.

// Als Fast Refresh niet werkt, forceer reload:
// Developer Menu → Reload

2. Error Boundaries

Vang errors op in je app:

import { Component } from 'react';

class ErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log('Error:', error);
    console.log('Error Info:', errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <Text>Er ging iets mis!</Text>;
    }
    return this.props.children;
  }
}

3. Performance Monitor

Zie FPS en memory gebruik:

1. Open Developer Menu
2. Klik op "Show Perf Monitor"
3. Zie RAM, JS heap, Views, UI/JS FPS

4. Network Debugging

Debug API calls met Reactotron (third-party tool):

npm install --save-dev reactotron-react-native

5. Veelgemaakte Fouten

6. Handige Shortcuts

Samenvatting