mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -12,24 +12,43 @@
|
||||
</div>
|
||||
|
||||
</span><h2><a class="anchor" name="accessing-console-logs"></a>Accessing console logs <a class="hash-link" href="docs/debugging.html#accessing-console-logs">#</a></h2><p>You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native log<span class="token operator">-</span>ios
|
||||
$ react<span class="token operator">-</span>native log<span class="token operator">-</span>android</div><p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p><blockquote><p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p></blockquote><h2><a class="anchor" name="debugging-on-a-device-with-chrome-developer-tools"></a>Debugging on a device with Chrome Developer Tools <a class="hash-link" href="docs/debugging.html#debugging-on-a-device-with-chrome-developer-tools">#</a></h2><blockquote><p>If you're using Create React Native App, this is configured for you already.</p></blockquote><p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m" target="_blank"><code>RCTWebSocketExecutor.m</code></a> and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.</p><p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html" target="_blank"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p><p><code>adb reverse tcp:8081 tcp:8081</code></p><p>Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.</p><blockquote><p>If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.</p></blockquote><h3><a class="anchor" name="debugging-with-stetho-http-facebook-github-io-stetho-on-android"></a>Debugging with <a href="http://facebook.github.io/stetho/" target="_blank">Stetho</a> on Android <a class="hash-link" href="docs/debugging.html#debugging-with-stetho-http-facebook-github-io-stetho-on-android">#</a></h3><ol><li><p>In <code>android/app/build.gradle</code>, add these lines in the <code>dependencies</code> section:</p><div class="prism language-gradle">compile <span class="token string">'com.facebook.stetho:stetho:1.3.1'</span>
|
||||
compile <span class="token string">'com.facebook.stetho:stetho-okhttp3:1.3.1'</span></div></li><li><p>In <code>android/app/src/main/java/com/{yourAppName}/MainApplication.java</code>, add the following imports:</p><div class="prism language-java"><span class="token keyword">import</span> com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>modules<span class="token punctuation">.</span>network<span class="token punctuation">.</span>ReactCookieJarContainer<span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>stetho<span class="token punctuation">.</span>Stetho<span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> okhttp3<span class="token punctuation">.</span>OkHttpClient<span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>modules<span class="token punctuation">.</span>network<span class="token punctuation">.</span>OkHttpClientProvider<span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>stetho<span class="token punctuation">.</span>okhttp3<span class="token punctuation">.</span>StethoInterceptor<span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> java<span class="token punctuation">.</span>util<span class="token punctuation">.</span>concurrent<span class="token punctuation">.</span>TimeUnit<span class="token punctuation">;</span></div></li><li><p>In <code>android/app/src/main/java/com/{yourAppName}/MainApplication.java</code> add the function:</p><div class="prism language-java"><span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onCreate<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
$ react<span class="token operator">-</span>native log<span class="token operator">-</span>android</div><p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p><blockquote><p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p></blockquote><h2><a class="anchor" name="debugging-on-a-device-with-chrome-developer-tools"></a>Debugging on a device with Chrome Developer Tools <a class="hash-link" href="docs/debugging.html#debugging-on-a-device-with-chrome-developer-tools">#</a></h2><blockquote><p>If you're using Create React Native App, this is configured for you already.</p></blockquote><p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m" target="_blank"><code>RCTWebSocketExecutor.m</code></a> and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.</p><p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html" target="_blank"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p><p><code>adb reverse tcp:8081 tcp:8081</code></p><p>Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.</p><blockquote><p>If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.</p></blockquote><h3><a class="anchor" name="debugging-with-stetho-http-facebook-github-io-stetho-on-android"></a>Debugging with <a href="http://facebook.github.io/stetho/" target="_blank">Stetho</a> on Android <a class="hash-link" href="docs/debugging.html#debugging-with-stetho-http-facebook-github-io-stetho-on-android">#</a></h3><p>Follow this guide to enable Stetho for Debug mode:</p><ol><li><p>In <code>android/app/build.gradle</code>, add these lines in the <code>dependencies</code> section:</p><div class="prism language-gradle"> debugCompile <span class="token string">'com.facebook.stetho:stetho:1.5.0'</span>
|
||||
debugCompile <span class="token string">'com.facebook.stetho:stetho-okhttp3:1.5.0'</span></div></li></ol><blockquote><p>The above will configure Stetho v1.5.0. You can check at <a href="http://facebook.github.io/stetho/">http://facebook.github.io/stetho/</a> if a newer version is available.</p></blockquote><ol><li><p>Create the following Java classes to wrap the Stetho call, one for release and one for debug:</p><div class="prism language-java"><span class="token comment" spellcheck="true"> // android/app/src/release/java/com/{yourAppName}/StethoWrapper.java
|
||||
</span>
|
||||
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">StethoWrapper</span> <span class="token punctuation">{</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">void</span> <span class="token function">initialize<span class="token punctuation">(</span></span>Context context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // NO_OP
|
||||
</span> <span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">void</span> <span class="token function">addInterceptor<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // NO_OP
|
||||
</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></div><div class="prism language-java"><span class="token comment" spellcheck="true"> // android/app/src/debug/java/com/{yourAppName}/StethoWrapper.java
|
||||
</span>
|
||||
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">StethoWrapper</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">void</span> <span class="token function">initialize<span class="token punctuation">(</span></span>Context context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
Stetho<span class="token punctuation">.</span><span class="token function">initializeWithDefaults<span class="token punctuation">(</span></span>context<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">void</span> <span class="token function">addInterceptor<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
OkHttpClient client <span class="token operator">=</span> OkHttpClientProvider<span class="token punctuation">.</span><span class="token function">getOkHttpClient<span class="token punctuation">(</span></span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">newBuilder<span class="token punctuation">(</span></span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">addNetworkInterceptor<span class="token punctuation">(</span></span><span class="token keyword">new</span> <span class="token class-name">StethoInterceptor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">build<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
OkHttpClientProvider<span class="token punctuation">.</span><span class="token function">replaceOkHttpClient<span class="token punctuation">(</span></span>client<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></div></li><li><p>Open <code>android/app/src/main/java/com/{yourAppName}/MainApplication.java</code> and replace the original <code>onCreate</code> function:</p></li></ol><div class="prism language-java"> <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onCreate<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onCreate<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
Stetho<span class="token punctuation">.</span><span class="token function">initializeWithDefaults<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
OkHttpClient client <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">OkHttpClient<span class="token punctuation">.</span>Builder</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">connectTimeout<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">,</span> TimeUnit<span class="token punctuation">.</span>MILLISECONDS<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">readTimeout<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">,</span> TimeUnit<span class="token punctuation">.</span>MILLISECONDS<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">writeTimeout<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">,</span> TimeUnit<span class="token punctuation">.</span>MILLISECONDS<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">cookieJar<span class="token punctuation">(</span></span><span class="token keyword">new</span> <span class="token class-name">ReactCookieJarContainer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">addNetworkInterceptor<span class="token punctuation">(</span></span><span class="token keyword">new</span> <span class="token class-name">StethoInterceptor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">build<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
OkHttpClientProvider<span class="token punctuation">.</span><span class="token function">replaceOkHttpClient<span class="token punctuation">(</span></span>client<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div></li><li><p>Run <code>react-native run-android</code></p></li><li><p>In a new Chrome tab, open: <code>chrome://inspect</code>, then click on 'Inspect device' (the one followed by "Powered by Stetho").</p></li></ol><h2><a class="anchor" name="debugging-native-code"></a>Debugging native code <a class="hash-link" href="docs/debugging.html#debugging-native-code">#</a></h2><p>When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app.</p></div><div class="docs-prevnext"><a class="docs-prev btn" href="docs/timers.html#content">← Previous</a><a class="docs-next btn" href="docs/performance.html#content">Continue Reading →</a></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Debugging.md">Improve this page</a> by sending a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>BuildConfig<span class="token punctuation">.</span>DEBUG<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
StethoWrapper<span class="token punctuation">.</span><span class="token function">initialize<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
StethoWrapper<span class="token punctuation">.</span><span class="token function">addInterceptor<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
SoLoader<span class="token punctuation">.</span><span class="token function">init<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">/* native exopackage */</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><ol><li><p>Open the project in Android Studio and resolve any dependency issues. The IDE should guide you through this steps after hovering your pointer over the red lines.</p></li><li><p>Run <code>react-native run-android</code>.</p></li><li><p>In a new Chrome tab, open: <code>chrome://inspect</code>, then click on the 'Inspect device' item next to "Powered by Stetho".</p></li></ol><h2><a class="anchor" name="debugging-native-code"></a>Debugging native code <a class="hash-link" href="docs/debugging.html#debugging-native-code">#</a></h2><p>When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app.</p></div><div class="docs-prevnext"><a class="docs-prev btn" href="docs/timers.html#content">← Previous</a><a class="docs-next btn" href="docs/performance.html#content">Continue Reading →</a></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Debugging.md">Improve this page</a> by sending a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
Reference in New Issue
Block a user