CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - Dev tools

Combine Flipper, DevTools and console to write a debug session.

Summary - Dev tools

In this group you met five development tools. Flipper bundles network, layout and console in one window. React DevTools shows the component tree and props/state. Console prints values quickly.

Remote debug attaches to Chrome DevTools; the debugger keyword is a breakpoint. Performance monitor shows FPS and RAM live; it has JS and UI rows. These five tools support finding bugs and understanding performance in a real app. Using them together makes debugging fast and visual.

Practice Write a component for inspection

Write an App component to inspect with DevTools and console. Inside it have a console.log('App opened') call and a debugger keyword. The component returns null.

Starter code

App.js
// Write the App component
// Put console.log and a breakpoint inside
// Return null

Sample solution

App.js
function App() {
  console.log("App opened");
  debugger;
  return null;
}

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 To inspect the component tree?

App.js
npx ???
  • React DevTools Correct answer
  • Flipper
  • Performance monitor
  • Console

Explanation: React DevTools shows the component tree.

2 Match each tool to its purpose

Term Meaning
Flipper All in one window
React DevTools Component tree
console Quick value print
remote debug Chrome DevTools
perf monitor FPS and RAM

3 The React DevTools command

Question 
$ ____ react-devtools
Answer 
$ npx react-devtools

Explanation: npx react-devtools opens the standalone version.

All lessons in Intermediate

1 Hooks

  1. useEffect
  2. Dependency array
  3. Cleanup
  4. useRef
  5. useMemo
  6. Summary - Hooks

2 Custom hooks

  1. Custom hook
  2. useToggle
  3. useCounter
  4. usePrevious
  5. Hook composition
  6. Summary - Custom hooks

3 Context

  1. What is Context?
  2. createContext
  3. Provider
  4. useContext
  5. Context default
  6. Summary - Context

4 Project: Notes app

  1. Project design
  2. Note model
  3. Adding notes
  4. AsyncStorage
  5. Putting it together

5 useReducer

  1. useReducer
  2. Reducer function
  3. Action dispatch
  4. Initial state
  5. useReducer vs useState
  6. Summary - useReducer

6 Form handling

  1. Controlled form
  2. Form state
  3. Validation
  4. Submit
  5. Form libraries
  6. Summary - Form handling

7 API and fetch

  1. fetch
  2. GET request
  3. async/await
  4. JSON parse
  5. Error handling
  6. Summary - API and fetch

8 Project: Quiz app

  1. Quiz model
  2. Loading questions
  3. Running the quiz
  4. Score calculation
  5. Putting it together

9 Tab navigation

  1. Bottom Tabs
  2. createBottomTabNavigator
  3. Tab icons
  4. Material Top Tabs
  5. Tab badge
  6. Summary - Tab navigation

10 Drawer navigation

  1. Drawer navigator
  2. createDrawerNavigator
  3. Drawer items
  4. Drawer toggle
  5. Nested navigation
  6. Summary - Drawer navigation

11 Lifecycle

  1. Mount
  2. Update
  3. Unmount
  4. useEffect lifecycle
  5. Layout effect
  6. Summary - Lifecycle

12 Project: E-commerce

  1. Project design
  2. Product list
  3. Product detail
  4. Cart
  5. Putting it together

13 Animated

  1. Animated.Value
  2. Animated.View
  3. Animated.timing
  4. Animated.spring
  5. interpolate
  6. Summary - Animated

14 Gestures

  1. PanResponder
  2. onMoveShouldSetPanResponder
  3. onPanResponderMove
  4. onPanResponderRelease
  5. react-native-gesture-handler
  6. Summary - Gestures

15 Theme

  1. Light/dark theme
  2. Theme context
  3. Theme toggle
  4. useColorScheme
  5. Persistent theme
  6. Summary - Theme

16 Performance

  1. React.memo
  2. useCallback
  3. useMemo
  4. FlatList optimization
  5. InteractionManager
  6. Summary - Performance

17 Testing

  1. Jest
  2. React Native Testing Library
  3. render
  4. getByText
  5. fireEvent
  6. Summary - Testing

18 Dev tools

  1. Flipper
  2. React DevTools
  3. Console
  4. Remote debug
  5. Performance monitor
  6. Summary - Dev tools

19 Permissions

  1. What are permissions?
  2. expo-permissions
  3. Camera permission
  4. Location permission
  5. Notification permission
  6. Summary - Permissions

20 Intermediate final

  1. Project design
  2. Context and hooks
  3. API integration
  4. Navigation
  5. Putting it together