Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Disable Debugging in Expo For React Native App

Tags:

ios

reactjs

react-native

expo

So I've opened up my react-native app in Expo today (using the iOS simulator) and I am creating by what looks like a debugging overlay.

Screenshot here: enter image description here

I don't need this and it's blocking some of the UI for testing.

How does one turn it off?

like image 772
Jack Robson Avatar asked Aug 10 '17 13:08

Jack Robson

People also ask

How do you debug Expo React Native app?

Download React Native Debugger from the releases page. Open the app, press Cmd ⌘ + T or Ctrl + T to open a new window, then set the port to 19000. Start your app, open the in-app developer menu, and select “Debug JS Remotely.”

How do I enable remote debugging in React Native?

Debugging React Native AppsPress Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) or use the Shake Gesture. Enable Pause On Caught Exceptions for a better debugging experience.

How do I debug React Native on a device?

Debugging on a device with Chrome Developer Tools If you're using Create React Native App or Expo CLI, this is configured for you already. On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.

How do I debug my React components in Expo Go?

This will open up the React DevTools console (for it to connect, you need to select Debug remote JS from the Developer Menu in the Expo Go app). From this console, you can search for your React components at the top, or open up the Developer Menu and enable the Element Inspector.

How do I debug an expo app?

You can debug Expo apps using the Chrome debugger tools. Rather than running your app's JavaScript on your phone, it will instead run it inside of a webworker in Chrome. You can then set breakpoints, inspect variables, execute code, etc, as you would when debugging a web app.

How do I debug React components in chrome?

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console. First, follow the instructions for debugging in Chrome to open the Chrome console. Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

1 Answers

You have the Element Inspector open. To toggle it off do either:

  • ⌘+D if you are in the simulator
  • Shake your phone if you are on an actual device

This should open up the debugging menu. You can then click on Toggle Element Inspector to close it.

Expo Debugging Menu

like image 164
Michael Cheng Avatar answered Oct 19 '22 17:10

Michael Cheng
Sign in to Comment

Related questions

Core Data Crash: [__NSArrayM insertObject:atIndex:]: object cannot be nil
How do I vertically correct the navigationBar's titleView text position when using a custom font?
Can't build project after adding testflight sdk
Problems adding Google Analytics to iOS App
What is the best way to sort a Core Data Entity?
Quickest way to install Release build on device?
iOS 7 and Helvetica Neue UltraLight: use as default for older iOS versions
ZBar memory leak on iOS?
Gesture recognizer not working for some reason, on iphone
An issue with AVSpeechSynthesizer, Any workarounds?
performSelector may cause a leak because its selector is unknown IN Singleton Class/ FUNCTION Pointer -Passing Function as parameter
Detect tap on UIImageView IOS
Is it possible to programmatically get the identifier of a basic UIViewController from an UIViewController or Storyboard in Swift/Objective-C?
How to compare colors in swift
Best way to create custom UITableview section header in storyboard
The file "<appName>.app" couldn’t be opened because you don’t have permission to view it
Add a string property to a UIButton in Swift
Detect Final Layout Size for View with Flexible Width in UITableViewCell
<Error>: ImageIO: PNG invalid PNG file: extra chunks between iDOT and IDAT
Expo on iOS is constantly refreshing my React Native app on MacOS, caused by Dropbox / iCloud

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!