Skip to content

Development #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lucassouzamatos wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Development #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
871711a
Atualizando arquivos com a versão atual da documentação.
lucassouzamatos Mar 7, 2019
ca8d50b
Adicionando pasta assets
lucassouzamatos Mar 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 96 additions & 25 deletions docs/Accessibility.md
View file
Open in desktop

Large diffs are not rendered by default.

258 changes: 91 additions & 167 deletions docs/Animations.md
View file
Open in desktop

Large diffs are not rendered by default.

89 changes: 31 additions & 58 deletions docs/Debugging.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
---
id: debugging
title: Debugging
layout: docs
category: Guides
permalink: docs/debugging.html
next: performance
previous: timers
---

## Enabling Keyboard Shortcuts
Expand All @@ -14,9 +9,9 @@ React Native supports a few keyboard shortcuts in the iOS Simulator. They are de

## Accessing the In-App Developer Menu

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the `⌘D` keyboard shortcut when your app is running in the iOS Simulator, or `⌘M` when running in an Android emulator.
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the `⌘D` keyboard shortcut when your app is running in the iOS Simulator, or `⌘M` when running in an Android emulator on Mac OS and `Ctrl+M` on Windows and Linux. Alternatively for Android, you can run the command `adb shell input keyevent 82` to open the dev menu (82 being the Menu key code).

![](img/DeveloperMenu.png)
![](/react-native/docs/assets/DeveloperMenu.png)

> The Developer Menu is disabled in release (production) builds.

Expand Down Expand Up @@ -51,7 +46,12 @@ Warnings will be displayed on screen with a yellow background. These alerts are

As with a RedBox, you can use `console.warn()` to trigger a YellowBox.

YellowBoxes can be disabled during development by using `console.disableYellowBox = true;`. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: `console.ignoredYellowBox = ['Warning: ...'];`.
YellowBoxes can be disabled during development by using `console.disableYellowBox = true;`. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored:

```javascript
import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);
```

In CI/Xcode, YellowBoxes can also be disabled by setting the `IS_TESTING` environment variable.

Expand All @@ -63,7 +63,7 @@ To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Deve

Select `Tools → Developer Tools` from the Chrome Menu to open the [Developer Tools](https://developer.chrome.com/devtools). You may also access the DevTools using keyboard shortcuts (`⌘⌥I` on macOS, `Ctrl` `Shift` `I` on Windows). You may also want to enable [Pause On Caught Exceptions](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511) for a better debugging experience.

> Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read [this section](docs/debugging.html#react-developer-tools) to learn how.
> Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read [this section](debugging.md#react-developer-tools) to learn how.

### Debugging using a custom JavaScript debugger

Expand All @@ -73,6 +73,19 @@ The debugger will receive a list of all project roots, separated by a space. For

> Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.

## Safari Developer Tools

You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely".

* Enable Develop menu in Safari: `Preferences → Advanced → Select "Show Develop menu in menu bar"`
* Select your app's JSContext: `Develop → Simulator → JSContext`
* Safari's Web Inspector should open which has a Console and a Debugger

However, there are some disadvantages:

1. No sourcemaps when debugging
2. Every time the app is reloaded (using live reload, or by manually reloading), a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually.

## React Developer Tools

You can use [the standalone version of React Developer Tools](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) to debug the React component hierarchy. To use it, install the `react-devtools` package globally:
Expand All @@ -87,23 +100,23 @@ Now run `react-devtools` from the terminal to launch the standalone DevTools app
react-devtools
```

![React DevTools](img/ReactDevTools.png)
![React DevTools](/react-native/docs/assets/ReactDevTools.png)

It should connect to your simulator within a few seconds.

> Note: if you prefer to avoid global installations, you can add `react-devtools` as a project dependency. Add the `react-devtools` package to your project using `npm install --save-dev react-devtools`, then add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools.

### Integration with React Native Inspector

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
Open the in-app developer menu and choose "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

![React Native Inspector](img/Inspector.gif)
![React Native Inspector](/react-native/docs/assets/Inspector.gif)

However, when `react-devtools` is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

![React DevTools Inspector Integration](img/ReactDevToolsInspector.gif)
![React DevTools Inspector Integration](/react-native/docs/assets/ReactDevToolsInspector.gif)

You can choose "Hide Inspector" in the same menu to exit this mode.
You can choose "Toggle Inspector" in the same menu to exit this mode.

### Inspecting Component Instances

Expand All @@ -115,7 +128,7 @@ Make sure that the dropdown in the top left corner of the Chrome console says `d

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as `$r` in the Chrome console, letting you inspect its props, state, and instance properties.

![React DevTools Chrome Console Integration](img/ReactDevToolsDollarR.gif)
![React DevTools Chrome Console Integration](/react-native/docs/assets/ReactDevToolsDollarR.gif)

## Performance Monitor

Expand All @@ -129,7 +142,7 @@ You can enable a performance overlay to help you debug performance problems by s
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
Expand All @@ -147,11 +160,11 @@ $ react-native log-android

You may also access these through `Debug → Open System Log...` in the iOS Simulator or by running `adb logcat *:S ReactNative:V ReactNativeJS:V` in a terminal while an Android app is running on a device or emulator.

> If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
> If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.

## Debugging on a device with Chrome Developer Tools

> If you're using Create React Native App, this is configured for you already.
> 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`](https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m) and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.

Expand All @@ -163,46 +176,6 @@ Alternatively, select "Dev Settings" from the Developer Menu, then update the "D

> 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.

### Debugging with [Stetho](http://facebook.github.io/stetho/) on Android

1. In ```android/app/build.gradle```, add these lines in the `dependencies` section:

```gradle
compile 'com.facebook.stetho:stetho:1.3.1'
compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'
```

2. In ```android/app/src/main/java/com/{yourAppName}/MainApplication.java```, add the following imports:

```java
import com.facebook.react.modules.network.ReactCookieJarContainer;
import com.facebook.stetho.Stetho;
import okhttp3.OkHttpClient;
import com.facebook.react.modules.network.OkHttpClientProvider;
import com.facebook.stetho.okhttp3.StethoInterceptor;
import java.util.concurrent.TimeUnit;
```

3. In ```android/app/src/main/java/com/{yourAppName}/MainApplication.java``` add the function:
```java
public void onCreate() {
super.onCreate();
Stetho.initializeWithDefaults(this);
OkHttpClient client = new OkHttpClient.Builder()
.connectTimeout(0, TimeUnit.MILLISECONDS)
.readTimeout(0, TimeUnit.MILLISECONDS)
.writeTimeout(0, TimeUnit.MILLISECONDS)
.cookieJar(new ReactCookieJarContainer())
.addNetworkInterceptor(new StethoInterceptor())
.build();
OkHttpClientProvider.replaceOkHttpClient(client);
}
```

4. Run ```react-native run-android ```

5. In a new Chrome tab, open: ```chrome://inspect```, then click on 'Inspect device' (the one followed by "Powered by Stetho").

## Debugging native code

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.
Loading