Debugging Expo Applications

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

const MyComponent = () => {
  return (
    <View>
      <Text>Hello, world!</Text>
    </View>
  );
};

export default MyComponent;

// In your Expo project, run:
npx expo start --tunnel

// Then in the Expo DevTools menu:
// - Select "Debug" or "Open DevTools"
// - This opens Chrome DevTools with your app

// Install Flipper in your project
npm install flipper

// Or with Yarn
yarn add flipper

// Enable network inspection in Expo DevTools
// Open Expo DevTools in browser and navigate to "Network" tab

// Example API call being monitored
fetch("https://api.example.com/data", {
  method: "GET",
  headers: {
    "Authorization": "Bearer <token>"
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Fetch error:", error));

console.log("App started");
console.info("User logged in");
console.warn("Deprecated API used");
console.error("Failed to fetch data");

function handlePress() {
  console.log('Before breakpoint');
  debugger; // Execution will pause here
  console.log('After breakpoint');
}

npm install -g react-native-debugger

react-native-debugger-open

// Enable native debugging in Expo
import { Constants } from 'expo-constants';

// Check if app is running in development mode
if (Constants.appOwnership === 'expo') {
  console.log('Native debugging enabled');
}

import { LogBox } from 'expo';

// Ignore specific warnings
LogBox.ignoreLogs([
  'Warning: componentWillMount is deprecated',
  'Remote debugger'
]);

// Ignore all warnings
LogBox.ignoreAllLogs(true);

// Install React DevTools
npm install --save-dev react-devtools

// In your app entry point
import { LogBox } from 'react-native';
LogBox.ignoreAllLogs(true);

// Enable React DevTools
import { DevSettings } from 'react-native';
DevSettings.addFPSProvider(() => {
  console.log('FPS:', performance.now());
});

import { AppState } from 'react-native';

AppState.addEventListener('change', (state) => {
  console.log('App state changed to:', state);
});

{
  "expo": {
    "sourceMap": true,
    "sourceMapFile": ".expo/source-map.json"
  }
}