Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native code doesn't work without Remote Debugger enabled

This a weird question, but since I'm really curious about this I wanted to ask. I have a piece of code that works in the iOS Simulator when I enable Remote Debugging but it stops working without it. This is the code:

      let filtered = []
      let dueDate
      const dateNow = new Date(Date.now())

      for (let item of this.props.listData) {
        dueDate = new Date(item.dueDate)
        if (!item.paid && (dueDate < dateNow)) {
          filtered.push(item)
        }
      }
      if (filtered.length > 0) {          
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(filtered)
        })
      }

(item.dueDate is a string like "12.02.2016")

Obviously the code would work (and it works) if I supplied the date in a correct format (like ISO "2016-02-12"). What interests me is why does it work even with the wrong format when I enable Remote Debugging (which fires up a Google Chrome instance)? Because when I console.log the dates in Chrome they are converted normally. Thanks in advance!

like image 324
filiphosko Avatar asked Jan 26 '17 13:01

filiphosko


People also ask

How do I disable remote debugging in React Native?

Go to your android settings and clear app data and cache and reload the app remote debugging will be turned off.

How enable debugging JS remote in React Native?

Open the developer menu in Chrome and select “Debug JS Remotely” to debug JavaScript code. This will open http://localhost:8081/debugger-ui in a new tab.

How do I connect my emulator to React Native debugger?

In App Developer MenuOn Android emulator, you need to press command + M. Debug JS Remotely − Used for activating debugging inside browser developer console. Enable Live Reload − Used for enabling live reloading whenever your code is saved. The debugger will open at localhost:8081/debugger-ui.


2 Answers

I have the same issue with dates with debugging mode moment.js fixed my issue,

like image 152
Mohamed Ben Hartouz Avatar answered Oct 21 '22 11:10

Mohamed Ben Hartouz


This is most likely due to subtle differences between the JavaScript execution environments on the device, and in your remote debugger.

In this case, the Date constructor seems to accept the locale-specific date formats in the Chrome remote debugging environment, but not on the device. This probably due to your computer's locale having been set to a culture that uses the dd.MM.yyyy format, and the emulator to something else, such as en-US. The ISO format works on both, because it's supported regardless of the locale.

When you run the code on the device or simulator, the code executes in a JavaScriptCore on the device itself. This is the JavaScript engine React Native uses internally to run the application scripts

When you turn remote debugging on, the React Native packager will instead execute the code in your computer's Chrome's JavaScript engine, V8, and send messages between the browser and the device/simulator over WebSockets.

You've run into one of the many edge cases that make remote debugging in React Native unreliable. You should always test all features on a real device without the debugger.

like image 41
jevakallio Avatar answered Oct 21 '22 10:10

jevakallio