Requires hack to work with React Native remote debugging

[felixmc]

Because the document global is not defined in react native, the following line of code throws an error when using the module:
https://github.com/visionmedia/debug/blob/master/dist/debug.js#L369

The error looks like this in react native:
https://www.dropbox.com/s/kt12zlnpvtdn3pz/Screenshot%202016-06-03%2022.06.20.png?dl=0

My current workaround includes defining the following line before initializing debug:

global.document = { documentElement: { style: { WebkitAppearance: true } } }

Setting the value to true allows it to use colorful output when using Chrome for remote debugging.

Maybe there's a way to detect react native environment to avoid the hack above?

[inetfuture]

How do you set the filter since there is no LocalStorage?

[tianjianchn]

@inetfuture manually set it, like:

if(!window.localStorage) window.localStorage = {};
window.localStorage.debug = '*';

[thebigredgeek]

This should be fixed. Closing

[jhilden]

Unfortunately I was not able to get debug working with react-native. I imported debug, I added the snippet posted by @tianjianchn, but I'm not seeing any log output in the remote chrome debugger console. Anybody have any suggestions?

[ArvoGuo]

Unfortunately I was not able to get debug working with react-native. I imported debug, I added the snippet posted by @tianjianchn, but I'm not seeing any log output in the remote chrome debugger console. Anybody have any suggestions?

+1

[jhilden]

It looks like the issue for me was that namespaces were not enabled properly.

Ended up wrapping debug in this way and importing this module instead of the orginal package.

import Config from 'react-native-config'
import createDebug from 'debug'

if (Config.DEBUG_NAMESPACES) {
  createDebug.enable(Config.DEBUG_NAMESPACES)
}

export default createDebug

Probably not ideal yet, but it works for us.