CodeBlanks Logo Icon CodeBlanks
Login Register

Remote debug

Learn remote JS debugging.

What is remote debug?

Remote debug lets you debug a React Native app in the Chrome browser. While the app runs you open Debug Remote JS from the developer menu; Chrome DevTools attaches. The debugger keyword in your code acts like a breakpoint.

Remote debug runs JavaScript code in Chrome's V8 engine. This differs from the regular device; some timing bugs may behave differently. Still, breakpoints, variable inspection and the call stack view are powerful. Newer React Native versions prefer Flipper and React DevTools; remote debug is a fallback option.

Practice Pause with debugger

Write a calculate function. Put a debugger keyword inside. The function returns 42.

Starter code

App.js
// Write a calculate function
// Put a breakpoint inside; it returns 42

Sample solution

App.js
function calculate() {
  debugger;
  return 42;
}

Chrome connection

To use remote debug you open the developer menu and pick Debug Remote JS. Chrome opens a debugging page at localhost:8081. There you can use the full power of DevTools: breakpoints, call stack, scope variables.

Once connected the app runs in Chrome; only the UI shows on the device. This lowers performance a bit but increases debugging power. Where you wrote debugger the app stops; if DevTools is open you can inspect variables. To disconnect you pick Stop Remote JS Debugging from the developer menu. This returns to normal device speed.

Questions and answers

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

1 Which browser does traditional remote debug use?

App.js
DevTools -> Debug Remote JS
  • Safari
  • Firefox
  • Chrome Correct answer
  • Edge

Explanation: Remote debug works in Chrome.

2 The debugger keyword

Question 
function calculate() {
  ____;
  return 42;
}
Answer 
function calculate() {
  debugger;
  return 42;
}

Explanation: debugger acts like a breakpoint.

3 Match each concept to its role

Term Meaning
Debug Remote JS Opens the link
localhost:8081 Connection address
debugger Breakpoint
DevTools Inspection tool

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