React Native를 어떻게 디버깅합니까?

React Native를 어떻게 디버깅합니까?

---

앱이 앱 시뮬레이터에서 실행되는 동안 React Native로 React 코드를 어떻게 디버깅합니까?

---

Cmd+D시뮬레이터 내에서. Chrome이 팝업되고 거기에서 개발자 도구를 사용할 수 있습니다.

편집하다:

이것은 이제 도움말 문서에 연결되어 있습니다.

---

리 액트 네이티브 앱 디버깅

react 앱의 자바 스크립트 코드를 디버그하려면 다음을 수행하십시오.

1. iOS 시뮬레이터에서 애플리케이션을 실행하십시오.
2. 를 누르면 http : // localhost : 8081 / debugger-ui에Command + D 웹 페이지가 열립니다 . (현재 Chrome 만 해당) 또는Shake Gesture
3. 더 나은 디버깅 환경을 위해 잡힌 예외 일시 중지를 활성화하십시오 .
4. 를 눌러 Command + Option + IChrome 개발자 도구를 열거 나 View-> Developer-> 를 통해 엽니 다 Developer Tools.
5. 이제 평소와 같이 디버깅 할 수 있습니다.

선택 과목

Chrome 용 React Developer Tools 확장을 설치하십시오 . React개발자 도구가 열려있을 때 탭 을 선택하면 뷰 계층 구조를 탐색 할 수 있습니다 .

라이브 리로드

라이브 리로드를 활성화하려면 다음을 수행하십시오.

1. iOS 시뮬레이터에서 애플리케이션을 실행하십시오.
2. 를 누릅니다 Control + Command + Z.
3. 이제 볼 수 Enable/Disable Live Reload, Reload및 Enable/Disable Debugging옵션.

---

Android 앱의 경우 Genymotion을 사용하는 경우을 눌러 메뉴를 전환 할 수 CMD + m있지만 메뉴에서 메뉴 를 활성화해야 할 수도 있습니다.

• Untick 위젯
• 크롬CMD + m 에서 디버그를 클릭하여 사용하도록 설정

---

다른 답변 외에도. 디버거 문을 사용하여 react-native를 디버깅 할 수 있습니다

예:

debugger; //breaks execution

Chrome 개발자 도구가 열려 있어야 작동합니다.

---

이 프로그램을 사용해보십시오 : https://github.com/jhen0409/react-native-debugger

에서 작동 : windows, osx및 linux.

그것은 지원 react native과redux

가상 컴포넌트 트리를 검사하고 앱에 반영된 스타일을 수정할 수도 있습니다.

---

cmd ⌘+ D이상하게도 효과가 없었습니다. iOS 시뮬레이터에서 ctrl+ cmd ⌘+ Z를 누르면 디버깅 브라우저 창이 시작됩니다.

다음과 같은 화면이 나타납니다.

자세한 내용은 여기를 참조하십시오.

---

Windows에서 안드로이드 장치를 사용하여 디버그하려면 명령 프롬프트를 열고 다음을 입력하십시오 (adb가 올바르게 작동하는지 확인하십시오)

adb shell input keyevent 82

이미지와 같은 화면이 나타납니다

그런 다음 선택

debug JS Remotely

자동으로 새 창을 연 다음 검사 요소를 열거 나 F12 키를 눌러 콘솔을 엽니 다.

---

I don't have enough reputation to comment on the previous answers which are great. :) Here are some of the ways how I am debugging when developing react-native app.

1. Live reloading

   react-native makes it super easy to see your changes with the ⌘ + R keys or even just enable live reload and watchman will "refresh" the simulator with the latest changes. If you get an error, you can get a clue from the line number from that red screen. A couple of undo will get you back to working state and start again.

2. console.log('yeah, seriously.')

   I find myself prefer letting the program run and logging some informations than adding a debugger break point. (tough debugger is useful when trying to work with external packages/libraries and it comes with autocompletion, so you know what other methods you can utilise.)

3. Enable Chrome Debugging와 debugger;프로그램에 브레이크 포인트.

글쎄, 그것은 발생한 오류의 유형과 디버깅 방법의 환경 설정에 달려 있습니다. 대부분의 경우 undefined is not an object (evaluating 'something.something')방법 1과 2가 충분합니다.

다른 개발자가 작성한 외부 라이브러리 또는 패키지를 처리하는 데는 디버깅을 위해 더 많은 노력이 필요합니다. Chrome Debugging

때로는 반응 네이티브 플랫폼 자체에서 나오기 때문에 반응 네이티브 문제에 대한 인터넷 검색이 도움이 될 것입니다.

이것이 누군가를 도울 수 있기를 바랍니다.

---

Debugging react-native 0.40.0 on Debian 8 (Jessie) can be done by navigating to http://localhost:8081/debugger-ui 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 here:

adb shell input keyevent 82

---

adb logcat *:S ReactNative:V ReactNativeJS:V

run this in terminal for android log.

---

Instead of Cmd+M, for Android Emulator Press F10 in Windows. The emulator starts to show all the react-native debug options.

---

To me the best way to debug on React-Native is by using "Reactotron".

Install Reactotron then add these to your package.json:

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 

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

---

1. Run your app in simulator - react-native run-ios
2. Press ctrl + d and click on Debug JS Remotely

1. webpage should open up at http://localhost:8081/debugger-ui , if not type the URL and go to this link in Chrome
2. Right click on the page and click Inspect and it should open the developer tools for chrome

3. Go to the sources in the top menu and find your js class file in the right hand side file explorer

4. You can put breakpoints to the view and debug the code in there as you can see in the image.

---

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 :

Dont forget to enable Debug JS Remotely in emulator if you using it.

---

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

---

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.

---

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.

---

Having a space in the file path prevents the Cmd+D from working. I moved my project to a location without a space and I finally got the Chrome debugger to work. Seems like a bug.

---

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.

react-native-debugger

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

chrome-developer-tools

---

Very simple just two commands

For IOS $ react-native log-ios
For Android $ react-native log-android

---

Assuming you want to show this menu on Android emulator

• Then, try ⌘+m to pop up this dev settings dialog on Android emulator on a Mac.

• If it doesn't show then go to AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box.

• And then retry ⌘+m.

• If it doesn't show still then go to the running emulator settings and on the Send keyboard shortcuts to combobox/dropdown then select the Emulator controls (default) option.

• And then retry ⌘+m.

• I hope this helps, it worked for me.

---

If you're using Redux, I highly recommend React Native Debugger. It includes Chrome devtools, but also has Redux devtools and React devtools.

Redux Devtools: This allows you to view your actions, and step back and forth through them. It also allows you to view your redux store and has a feature to automatically diff the previous state with the updated state for each action, so you can see that as you step back and forth through a series of actions.

React Devtools: This allows you to inspect a certain component, namely all of it's props as well as it's component state. If you have a piece of the component state which is a boolean, it lets you click it to toggle it and see how your app reacts when it changes. Great feature.

Chrome Devtools Allows you to see all your console outputs, use breakpoints, pause on debugger; etc. Standard debugging features. If you right click the area where your actions are listed in Redux Devtools and select 'Allow Network Inspect', you can then inspect your API calls in the network tab of Chrome Devtools which is sweet.

In conclusion having these all in one place is fantastic! If you don't need one of them you can toggle it on/off. Get React Native Debugger and enjoy life.

---

There is also a very good debuger name Reactotron. https://github.com/infinitered/reactotron

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

---

In React-Native debugging is much easier.

• To debug in IOS use

cmd + d

ctrl + cmd + z ( For simulator )

• To debug in android

Shake device with touch ( Make sure your developer option is enable )

---

Step 1: Place debugger where ever you want to stop script, like:

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error('AsyncStorage error: ' + error.message);
    }
}

This will pause the debugger when ever control comes to this block of code.

Step 2: Press Cmd+D on ios emulator and Cmd+M on Android simulator. If you are having real device, shake the device to open dev menu, if you don't want to shake device follow this blog

Step 3: Select Enable Remote JS Debugging, this will open Chrome

Step 4: Select Developer Tools.

Step 5: Your debugger is paused in Sources tab wherever you have written debugger within your code . Go to console and type any parameters you want to debug (that are present in the code block) like: To move to next debugger point again move to Sources -> click on Resume script execution button (Right corner blue button)

Place the debugger, wherever you wanna pause the script.

Enjoy debugging!!

---

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

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

---

If you want to enable debugging by default:

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

To get this working on Android:

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

Reference: Launch a React Native app with “Debug JS Remotely” enabled by default

---

1. If you are using emulator use Ctrl+M & simulator Cmd+D

2. Click on the - Debug js remotely

3. Google Chrome go to console

---

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.

---

to debug your react native app just go to the following address:

localhost:8081/debugger-ui in your default browser(chrome) and open developer tools to debug your react native app

참고URL : https://stackoverflow.com/questions/29289304/how-do-you-debug-react-native