blocks|key|4522848|text|如果您想在Windows上使用android设备进行调试，只需打开命令提示符，然后键入(确保您的adb工作正常)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522849|adb+shell+input+keyevent+82|code-block|syntax|javascript|4522850|它将提示一个类似于该图像的屏幕|4522851|📷|atomic|offset|length|4522852|​|4522853|然后选择|4522854|debug+JS+Remotely|4522855|它将自动打开一个新的window.then+open+inspect元素或按F12进入控制台。|4522856|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/66b925b99fe7977a2baad6b5fee2e036.png|imageAlt^0|0|0|0|0|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|17|8|@]|9|@$L|18|M|19|1|1A]]|A|$]]|$1|N|3|O|5|6|7|1B|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1C|8|@]|9|@]|A|$]]|$1|R|3|S|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|T|3|U|5|6|7|1E|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12|13|-4]]]]

if you want to debug using android device on Windows just open a command prompt then type ( make sure your adb working properly)

<pre><code>adb shell input keyevent 82
</code></pre>

it will prompt a screen like the image 
<a href="https://i.stack.imgur.com/ew83J.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ew83J.png" alt="enter image description here"></a>

then select 

<pre><code>debug JS Remotely
</code></pre>

it will automatically open a new window.then open inspect element or press F12 for console.

blocks|key|4522133|text|除了其他答案之外。可以使用调试器语句调试react-native|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522134|示例：|4522135|debugger;+//breaks+execution|code-block|syntax|javascript|4522136|您的chrome+dev工具必须处于打开状态才能运行|4522137|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

In addition to the other answers. You can debug react-native using the debugger statement

example:

<pre><code>debugger; //breaks execution
</code></pre>

Your chrome dev tools must be open for this to work

blocks|key|4522273|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522274|📷|atomic|offset|length|4522275|4522276|试试这个程序：https://github.com/jhen0409/react-native-debugger|4522277|适用于：windows、osx和linux。|style|CODE|4522278|支持：react+native和redux|4522279|您还可以检查虚拟组件树并修改反映在应用程序中的样式。|4522280|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/aea979a7b68c20991a10a18efd1324a2.png|imageAlt|1|LINK|MUTABLE|url|https://github.com/jhen0409/react-native-debugger^0|0|0|1|0|0|0|7|1D|1|0|4|7|C|3|G|5|0|3|C|G|5|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@$E|17|F|18|1|19]]|A|$]]|$1|G|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1B|8|@]|9|@$E|1C|F|1D|1|1E]]|A|$]]|$1|J|3|K|5|6|7|1F|8|@$E|1G|F|1H|L|M]|$E|1I|F|1J|L|M]|$E|1K|F|1L|L|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1M|8|@$E|1N|F|1O|L|M]|$E|1P|F|1Q|L|M]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1R|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y|Z|-4]]|10|$5|11|V|12|A|$13|14]]]]

<a href="https://i.stack.imgur.com/cI0Ji.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cI0Ji.png" alt="enter image description here"></a>

Try this program: <a href="https://github.com/jhen0409/react-native-debugger" rel="noreferrer">https://github.com/jhen0409/react-native-debugger</a>

Works on: <code>windows</code>, <code>osx</code> and <code>linux</code>.

It supports: <code>react native</code> and <code>redux</code>

You can also inspect the virtual component tree and modify styles that are reflected in the app.

blocks|key|14650|text|在Debian8(杰西)上调试原生反应0.40.0可以通过在Chromium或Firebug中导航到http://localhost:8081/debugger-ui来完成，而你的应用程序正在安卓模拟器中运行。要访问应用程序内开发人员菜单，请在另一个终端窗口中运行以下命令，如here所示|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|14651|adb+shell+input+keyevent+82|style|CODE|14652|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/facebook/react-native/issues/6390#issuecomment-236678286|1|https://stackoverflow.com/a/40990431^0|1E|X|0|3U|4|1|0|0|R|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]|$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

Debugging react-native 0.40.0 on Debian 8 (Jessie) can be done by navigating to <a href="https://github.com/facebook/react-native/issues/6390#issuecomment-236678286" rel="noreferrer" title="jhabdas comment on Github">http://localhost:8081/debugger-ui</a> in Chromium or Firebug while your app is running in the android simulator. To access the in-app developer menu, run the following command in another terminal window, as pointed out <a href="https://stackoverflow.com/a/40990431">here</a>:

<code>adb shell input keyevent 82</code>

blocks|key|15322|text|对于Android系统:+Ctrl+%2BM(模拟器)或摇动手机(在设备中)以显示菜单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|15323|对于iOS:+Cmd+%2BD或摇动手机以显示菜单|15324|确保你有chrome。|15325|在显示的菜单上，选择Debug+JS+Remotely选项。|15326|Chrome将在localhost:8081/debugger-ui中自动打开。您也可以使用此链接手动转到调试器。|15327|在那里显示控制台，您可以看到被记录的日志。|15328|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

For Android: Ctrl + M (emulator) or Shake the phone (In Device) to reveal menu.

For iOS: Cmd + D or Shake the Phone to reveal menu

Make sure you have chrome.

On the revealed menu select Debug JS Remotely Option.

Chrome will be opened automatically at localhost:8081/debugger-ui. You can also manually go to debugger with this link. 

There reveal console and you can see logs being noted.

blocks|key|14586|text|adb+logcat+*:S+ReactNative:V+ReactNativeJS:V|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|14587|在android日志的终端中运行此命令。|unstyled|14588|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>adb logcat *:S ReactNative:V ReactNativeJS:V
</code></pre>

run this in terminal for android log.

blocks|key|4522528|text|如果您使用的是Microsoft+Visual+Code，请安装React+Native+Tools扩展。然后，您只需单击所需的行号即可添加断点。按照以下步骤设置和调试应用程序：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522529|📷|atomic|offset|length|4522530|4522531|​|4522532|如果您使用模拟器，不要忘记在模拟器中远程启用Debug+JS。|4522533|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/5ec65acd9e4cd61a3d16e071d813ef9c.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/5ac3b12879e43a514cbb838f95e0d0f0.png^0|0|0|1|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@$E|Y|F|Z|1|10]]|A|$]]|$1|G|3|C|5|D|7|11|8|@]|9|@$E|12|F|13|1|14]]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|16|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S|T|-4]]|U|$5|O|P|Q|A|$R|V|T|-4]]]]

If you are using Microsoft Visual Code , then install React Native Tools extension. Then you can add break points simply by clicking on the desired line number.
Follow these steps to setup and debug app :
<a href="https://i.stack.imgur.com/ggaHE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ggaHE.png" alt="SETUP" /></a>
<a href="https://i.stack.imgur.com/HXSH8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HXSH8.png" alt="RUN" /></a>
Dont forget to enable Debug JS Remotely in emulator if you using it.

blocks|key|4522186|text|对我来说，在React-Native上调试的最好方法是使用"Reactotron"。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4522187|安装Reactotron，然后将以下内容添加到您的package.json：|4522188|"reactotron-apisauce":+"%5E1.1.2",
"reactotron-react-native-under-37":+"%5E1.1.2",
"reactotron-redux":+"%5E1.1.2",+|code-block|syntax|javascript|4522189|现在，这只是登录你的代码的问题。例如：console.tron.log('debug')|style|CODE|4522190|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/infinitered/reactotron^0|T|C|0|0|0|0|J|P|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@$A|13|B|14|M|N]]|9|@]|C|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

To me the best way to debug on React-Native is by using <a href="https://github.com/infinitered/reactotron" rel="noreferrer">"Reactotron"</a>. 

Install Reactotron then add these to your package.json:

<pre><code>"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 
</code></pre>

now, it just the matter of logging in your code.
e.g.: <code>console.tron.log('debug')</code>

blocks|key|4523110|text|如果要在默认情况下启用调试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4523111|import+{+NativeModules+}+from+'react-native';

if+(__DEV__)+{
++NativeModules.DevSettings.setIsDebuggingRemotely(true)
}|code-block|syntax|javascript|4523112|要让它在Android上工作：|4523113|npm+install+--save+react-native-devsettings-android
react-native+link+react-native-devsettings-android|4523114|参考：Launch+a+React+Native+app+with+“Debug+JS+Remotely”+enabled+by+default|offset|length|4523115|entityMap|0|LINK|mutability|MUTABLE|url|https://www.bram.us/2017/12/23/launch-a-react-native-app-with-debug-js-remotely-enabled-by-default/^0|0|0|0|0|3|1X|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

If you want to enable debugging by default:

<pre><code>import { NativeModules } from 'react-native';

if (__DEV__) {
 NativeModules.DevSettings.setIsDebuggingRemotely(true)
}
</code></pre>

To get this working on Android:

<pre><code>npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android
</code></pre>

Reference: <a href="https://www.bram.us/2017/12/23/launch-a-react-native-app-with-debug-js-remotely-enabled-by-default/" rel="noreferrer">Launch a React Native app with “Debug JS Remotely” enabled by default</a>

blocks|key|15573|text|首先在你的ios模拟器中，如果你按下command+%2BD键，你会看到这个屏幕。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|15574|​|15575|📷|atomic|offset|length|15576|15577|然后单击Debug+JS+remotely按钮。|15578|在你看到像这样的React+Native+Debugger页面之后。|15579|15580|15581|15582|然后打开您的inspectorf12，并转到控制台选项卡调试它！:)|15583|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/cd82721d49c5a545bb55eea09fa889c3.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/a3873cd64f44b04a7202906e4986fec6.png^0|0|0|0|1|0|0|0|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@$G|16|H|17|1|18]]|A|$]]|$1|I|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1A|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1B|8|@]|9|@]|A|$]]|$1|N|3|C|5|6|7|1C|8|@]|9|@]|A|$]]|$1|O|3|E|5|F|7|1D|8|@]|9|@$G|1E|H|1F|1|1G]]|A|$]]|$1|P|3|C|5|6|7|1H|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1I|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]|11|$5|V|W|X|A|$Y|12|10|-4]]]]

First in your ios simulator, if you press [command + D] key then you can see this screen.

<a href="https://i.stack.imgur.com/XcXNj.png?s=256" rel="noreferrer"><img src="https://i.stack.imgur.com/XcXNj.png?s=256" alt="enter image description here"></a>

Then click Debug JS remotely button.

After you might see React Native Debugger page like this.

<a href="https://i.stack.imgur.com/i9tF1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/i9tF1.png" alt="enter image description here"></a>

And then open your inspector[f12], and go to console tab debug it! :)

blocks|key|4522098|text|默认情况下，我的ios模拟器不能识别按键，这就是cmd-D无法工作的原因。我不得不使用模拟器的菜单打开键盘的设置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522099|硬件>键盘>连接键盘|4522100|现在cmd-D启动chrome调试。|4522101|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

By default, my ios simulator wasn't picking up the keystrokes which is why cmd-D didn't work. I had to turn on the settings for the keyboard using simulator's menu: 

Hardware > Keyboard > Connect Keyboard 

Now cmd-D launches chrome debugging.

blocks|key|4522360|text|对于android应用程序，.Press+Ctrl%2BM选择debug+js+remotely，它将在chrome中打开一个带有url+http://localhost:8081/debugger-ui的新窗口。您现在可以在chrome浏览器中调试应用程序|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4522361|entityMap|0|LINK|mutability|MUTABLE|url|http://localhost:8081/debugger-ui^0|1V|X|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

For android app .Press Ctrl+M select debug js remotely it will open a new window in chrome with url <a href="http://localhost:8081/debugger-ui" rel="noreferrer">http://localhost:8081/debugger-ui</a>. You can now debug the app in chrome browser

blocks|key|14823|text|非常简单，只有两个命令|type|unstyled|depth|inlineStyleRanges|entityRanges|data|14824|For+IOS+$+react-native+log-ios
For+Android+$+react-native+log-android|code-block|syntax|javascript|14825|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Very simple just two commands

<pre><code>For IOS $ react-native log-ios
For Android $ react-native log-android
</code></pre>

blocks|key|15363|text|您可以使用Safari来调试您的应用程序的iOS版本，而无需开启“远程调试JS”，只需按照以下步骤操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|15364|1.+Enable+Develop+menu+in+Safari:+Preferences+→+Advanced+→+Select+"Show+Develop+menu+in+menu+bar"
2.+Select+your+app's+JSContext:+Develop+→+{Your+Simulator}+→+Automatically+Show+Web+Inspector+for+JS+JSContext
3.+Safari's+Web+Inspector+should+open+which+has+a+Console+and+a+Debugger|code-block|syntax|javascript|15365|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely", Just follow the following steps:

<pre><code>1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger
</code></pre>

blocks|key|4523086|text|这是使用react本机调试器应用程序的另一种方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4523087|你可以使用下面的链接下载应用程序，它是管理redux商店的非常好的应用程序以及源代码。|4523088|react-native-debugger|offset|length|4523089|还有，现在你可以直接使用下面的链接来帮助你。|4523090|chrome-developer-tools|4523091|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jhen0409/react-native-debugger|1|https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools^0|0|0|0|L|0|0|0|0|M|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$F|Y|G|Z|1|10]]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@$F|13|G|14|1|15]]|A|$]]|$1|L|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]]]

This is the alternate way to use react native debugger application.

you can download application using below link it's very good application for managing redux store along with the source code.

<a href="https://github.com/jhen0409/react-native-debugger" rel="noreferrer">react-native-debugger</a>

as well now a days you may directly use below link for help you out.

<a href="https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools" rel="noreferrer">chrome-developer-tools</a>

blocks|key|4522935|text|还有一个非常好的调试器名称Reactotron。https://github.com/infinitered/reactotron|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4522936|您不必处于调试模式才能看到一些数据值，并且有很多选项。|4522937|去看看真正有用的东西吧。;)|4522938|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/infinitered/reactotron^0|O|15|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

There is also a very good debuger name Reactotron.
<a href="https://github.com/infinitered/reactotron" rel="nofollow noreferrer">https://github.com/infinitered/reactotron</a>

You don't have to be in debug mode to see some data value and there is a lot of option.

go have a look that is really usefull. ;)

blocks|key|15166|text|这实际上很简单。只需按cmd+D(如果在mac上)，模拟器将创建一个弹出式菜单。从那里只需点击"Debug+JS+Remotely“或类似的东西。请注意，众所周知，在执行与某些包相关的代码时运行调试器会给人们带来问题。我在使用react-native-map和调试器时遇到了问题。但那是固定的。不过，在大多数情况下，您应该会很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|15167|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

It's actually pretty simple. Just press cmd D (if on mac) and the simulator will create a pop up menu. From there just click "Debug JS Remotely" or something along the lines of that. Beware that running the debugger while executing code related to certain packages has been known to give people problems. I had a problem with react-native-maps and the debugger. But that was fixed. For the most part you should be fine though.

blocks|key|4522905|text|如果你在Atom编辑器中使用Nuclide进行React+Native+App开发，那么你也可以使用“元素检查器”，它可以帮助观察开发阶段应用在设备上运行时道具和状态值的变化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522906|了解更多信息here|offset|length|4522907|​|4522908|📷|atomic|4522909|4522910|entityMap|0|LINK|mutability|MUTABLE|url|https://nuclide.io/docs/platforms/react-native/#element-inspector|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/83c8380c09a65ce2baa48fa525456a14.png|imageAlt^0|0|6|4|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|K|3|G|5|6|7|19|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|U|P|V|A|$W|X|Y|-4]]]]

If you use Nuclide in Atom editor for React Native App Development then you can also &quot;Element Inspector&quot; which helps in observing props and state values changes when app is running on device in development phase.
Know more about it <a href="https://nuclide.io/docs/platforms/react-native/#element-inspector" rel="nofollow noreferrer">here</a>
<a href="https://i.stack.imgur.com/eLwrB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eLwrB.png" alt="enter image description here" /></a>

blocks|key|15623|text|使用Flipper或reactotron。每种方法都有自己的优点，而且都不需要您启用调试模式，因此您的环境不会变慢！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|15624|entityMap|0|LINK|mutability|MUTABLE|url|https://fbflipper.com/|1|http://%2520infinitered/reactotron:%2520A%2520desktop%2520app%2520for%2520inspecting%2520...%2520-%2520GitHubhttps://github.com%2520%25E2%2580%25BA%2520infinitered%2520%25E2%2580%25BA%2520reactotron^0|2|7|0|A|A|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

Use <a href="https://fbflipper.com/" rel="nofollow noreferrer">Flipper</a> or <a href="http://%20infinitered/reactotron:%20A%20desktop%20app%20for%20inspecting%20...%20-%20GitHubhttps://github.com%20%E2%80%BA%20infinitered%20%E2%80%BA%20reactotron" rel="nofollow noreferrer">reactotron</a>. each one has its own benefits and none requires you to enable debug mode, so your environment won't get slow!

blocks|key|4522418|text|您可以从brew安装React+Native+Debugger。在chrome中使用它比使用调试器更舒适|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522419|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can install React Native Debugger from brew. it's more comfortable to use than debugger in chrome

blocks|key|4522576|text|这真的取决于我在做什么。如果我正在进行UI更改或调试UI，我通常会打开实时和热重新加载，并进行更改，然后立即获得反馈。如果是更技术性的东西，我会打开JS调试来查看应用程序的状态。然而，因为在原生react中重新加载太快，如果状态太混乱，我只需要控制台日志。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522577|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

It really depends on what I am doing. If I am making UI changes or debugging UI, I typically turn on live and hot reloading and make changes then get instant feedback on it. If it's something more technical, I turn on JS debugging to look at the state of the app. However because reloading is so quick in react native, if the state is too messy, I just console log.

blocks|key|15049|text|如果你在连接到笔记本电脑的真实设备上运行你的应用程序，你可以使用react-native+log-ios或react-native+log-android通过终端对其进行调试(它也适用于模拟器)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|15050|entityMap^0|W|K|1H|O|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

If you run your app on real devices, which is connected to the laptop, you can debug it via terminal using <code>react-native log-ios</code> or <code>react-native log-android</code> (It works also for simulators)

blocks|key|4522721|text|我使用的一种技术非常类似于Android中的调试策略，那就是在我所有的.js文件中包含一个名为TAG的全局变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522722|const+TAG+=+'APP_NAME%2BSCREEN_NAME';|code-block|syntax|javascript|4522723|然后，在需要的地方，我会这样做：console.log(TAG+%2B+'ACTION');|offset|length|style|CODE|4522724|这样，我就可以跟踪操作并查看日志语句的来源。|4522725|entityMap^0|0|0|G|S|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

A technique that I use that very similar to a debugging tactic in Android is to include a global variable called TAG in all my .js files. 

<pre><code>const TAG = 'APP_NAME+SCREEN_NAME';
</code></pre>

Then where needed, I'll do: <code>console.log(TAG + 'ACTION');</code>

This way, I can track actions and see where the log statements are coming from.

blocks|key|15291|text|在新版本的react-native中，您可以使用react-native+log-android或react-native+log-android在开发模式下查看应用程序的日志。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|15292|entityMap^0|O|O|1D|O|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

In new version of react-native you can use <code>react-native log-android</code> or <code>react-native log-android</code> to see logs of your application in dev mode.

blocks|key|4523058|text|React本机调试器。它帮助我解决了90%25的问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4523059|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

React Native Debugger. It's helps me to solve 90% of my problems

blocks|key|4523151|text|如果您想了解有关信息，请检查网络流量并了解本机UI视图层次结构。凭借其可扩展的插件API，React+Native+Update版本为开发人员提供了调试移动应用程序的工具。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4523152|Flipper是一个用于调试移动应用程序的优秀开发工具。此工具随react-native+62一起提供|4523153|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

if you want know about inspect network traffic and understand the native UI view hierarchy. With its extensible plugin API then React Native Update version provide developer tool for debugging mobile apps.

Flipper is a great developer tool for debugging mobile apps. This tool is shipped with react-native 62

How does one debug their React code with React Native while the app is running in app simulator?

How do you debug React Native?

远程调试

React Native

Native App

调试器

Android

Windows

当应用程序在应用程序模拟器中运行时，如何使用React Native调试其React代码？

问如何调试React Native？
EN

回答 26

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何调试React Native？EN

回答 26

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何调试React Native？
EN