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.

Exercise 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.

Show example solution

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

Test yourself

To inspect the component tree?
```
npx ???
```
- React DevTools
- Flipper
- Performance monitor
- Console
Show answer

React DevTools — React DevTools shows the component tree.
Match each tool to its purpose

Flipper

All in one window
React DevTools

Component tree
console

Quick value print
remote debug

Chrome DevTools
perf monitor

FPS and RAM

The React DevTools command

$ ____ react-devtools

Show answer

$ npx react-devtools

Next lesson: What are permissions?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies