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.

Exercise Pause with debugger

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

Show example solution

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.

Test yourself

Which browser does traditional remote debug use?
```
DevTools -> Debug Remote JS
```
- Safari
- Firefox
- Chrome
- Edge
Show answer

Chrome — Remote debug works in Chrome.

The debugger keyword

function calculate() {
  ____;
  return 42;
}

Show answer

function calculate() {
  debugger;
  return 42;
}

Match each concept to its role

Debug Remote JS

Opens the link
localhost:8081

Connection address
debugger

Breakpoint
DevTools

Inspection tool

Next lesson: Performance monitor

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies