Làm thế nào để một người gỡ lỗi mã React của họ với React Native trong khi ứng dụng đang chạy trong trình giả lập ứng dụng?

Cmd+Dtừ trong Trình mô phỏng. Nó sẽ bật Chrome và từ đó bạn có thể sử dụng Công cụ dành cho nhà phát triển.

Biên tập:

Điều này hiện được liên kết trong các tài liệu trợ giúp .

Gỡ lỗi Ứng dụng gốc

Để gỡ lỗi mã javascript của ứng dụng phản ứng của bạn, hãy làm như sau:

1. Chạy ứng dụng của bạn trong trình giả lập iOS.
2. Nhấn Command + Dvà một trang web sẽ mở ra tại http: // localhost: 8081 / debugger-ui . (Chỉ Chrome bây giờ) hoặc sử dụngShake Gesture
3. Bật tạm dừng ngoại lệ bị bắt để có trải nghiệm gỡ lỗi tốt hơn.
4. Nhấn Command + Option + Iđể mở các công cụ Nhà phát triển Chrome hoặc mở qua View-> Developer-> Developer Tools.
5. Bây giờ bạn có thể gỡ lỗi như bình thường.

Không bắt buộc

Cài đặt tiện ích mở rộng React Developer Tools cho Google Chrome. Điều này sẽ cho phép bạn điều hướng phân cấp chế độ xem nếu bạn chọn Reacttab khi các công cụ dành cho nhà phát triển đang mở.

Tải lại trực tiếp

Để kích hoạt Live Tải lại, hãy làm như sau:

1. Chạy ứng dụng của bạn trong trình giả lập iOS.
2. Nhấn Control + Command + Z.
3. Bây giờ bạn sẽ thấy Enable/Disable Live Reload, Reloadvà Enable/Disable Debuggingcác tùy chọn.

Đối với Ứng dụng Android, nếu bạn đang sử dụng Genymotion, bạn có thể chuyển đổi menu bằng cách nhấn CMD + m, nhưng bạn có thể phải bật nó trong menu bằng cách thực hiện việc này.

• untick phụ tùng
• Kích hoạt nó bằng cách CMD + mnhấp vào gỡ lỗi trong chrome

Ngoài các câu trả lời khác. Bạn có thể gỡ lỗi Reac -igen bằng cách sử dụng câu lệnh gỡ lỗi

thí dụ:

debugger; //breaks execution

Công cụ phát triển chrome của bạn phải được mở để làm việc này

nếu bạn muốn gỡ lỗi bằng thiết bị Android trên Windows, chỉ cần mở một dấu nhắc lệnh sau đó nhập (đảm bảo adb của bạn hoạt động chính xác)

adb shell input keyevent 82

Nó sẽ nhắc một màn hình như hình ảnh

sau đó chọn

debug JS Remotely

nó sẽ tự động mở một cửa sổ mới. Sau đó mở phần tử kiểm tra hoặc nhấn F12 cho bàn điều khiển.

Hãy thử chương trình này: https://github.com/jhen0409/react-native-debugger

Hoạt động trên: windows, osxvà linux.

Nó hỗ trợ: react nativevàredux

Bạn cũng có thể kiểm tra cây thành phần ảo và sửa đổi các kiểu được phản ánh trong ứng dụng.

cmd ⌘+ Dkỳ quặc đã không làm việc cho tôi. Nhấn ctrl+ cmd ⌘+ Ztrong trình giả lập iOS đã khởi động cửa sổ trình duyệt gỡ lỗi cho tôi.

Đây là màn hình bật lên:

Thêm chi tiết tại đây.

Gỡ lỗi gốc -40 0.40.0 trên Debian 8 (Jessie) có thể được thực hiện bằng cách điều hướng đến http: // localhost: 8081 / debugger-ui trong Chromium hoặc Fireorms trong khi ứng dụng của bạn đang chạy trong trình giả lập Android. Để truy cập menu nhà phát triển trong ứng dụng, hãy chạy lệnh sau trong cửa sổ đầu cuối khác, như được chỉ ra ở đây :

adb shell input keyevent 82

Tôi không có đủ danh tiếng để bình luận về các câu trả lời trước đó là tuyệt vời. :) Dưới đây là một số cách tôi gỡ lỗi khi phát triển ứng dụng gốc.

1. Tải lại trực tiếp

   Reac -igen giúp dễ dàng thấy các thay đổi của bạn bằng các phím ⌘ + R hoặc thậm chí chỉ cần bật tải lại trực tiếp và watchman sẽ "làm mới" trình giả lập với những thay đổi mới nhất. Nếu bạn gặp lỗi, bạn có thể nhận được manh mối từ số dòng từ màn hình đỏ đó. Một vài hoàn tác sẽ đưa bạn trở lại trạng thái làm việc và bắt đầu lại.

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

   Tôi thấy mình thích để chương trình chạy và ghi lại một số thông tin hơn là thêm debuggerđiểm dừng. (trình gỡ lỗi khó khăn rất hữu ích khi cố gắng làm việc với các gói / thư viện bên ngoài và nó đi kèm với tự động hoàn thành, vì vậy bạn biết những phương pháp nào khác bạn có thể sử dụng.)

3. Enable Chrome Debuggingvới debugger;điểm dừng trong chương trình của bạn.

Vâng, nó phụ thuộc vào loại lỗi bạn gặp phải và sở thích của bạn về cách gỡ lỗi. Đối với hầu hết undefined is not an object (evaluating 'something.something'), phương pháp 1 và 2 sẽ đủ tốt cho tôi.

Trong khi đó việc xử lý các thư viện hoặc gói bên ngoài được viết bởi các nhà phát triển khác sẽ đòi hỏi nhiều nỗ lực hơn để gỡ lỗi do đó là một công cụ tốt như Chrome Debugging

Đôi khi nó đến từ chính nền tảng phản ứng tự nhiên vì vậy việc tìm kiếm các vấn đề gốc phản ứng chắc chắn sẽ giúp ích.

hy vọng điều này sẽ giúp ai đó ngoài kia.

Thay vì Cmd+M, cho Trình giả lập Android Nhấn F10trong Windows. Trình giả lập bắt đầu hiển thị tất cả các tùy chọn gỡ lỗi gốc phản ứng.

adb logcat *:S ReactNative:V ReactNativeJS:V

chạy này trong thiết bị đầu cuối cho nhật ký Android.

Nếu bạn đang sử dụng Microsoft Visual Code, thì hãy cài đặt tiện ích mở rộng React Native Tools. Sau đó, bạn có thể thêm điểm dừng chỉ bằng cách nhấp vào số dòng mong muốn. Thực hiện theo các bước sau để thiết lập và gỡ lỗi ứng dụng:

Đừng quên bật Debug JS từ xa trong trình giả lập nếu bạn sử dụng nó.

Đối với Android: Ctrl + M (trình giả lập) hoặc Lắc điện thoại (Trong thiết bị) để hiển thị menu.

Đối với iOS: Cmd + D hoặc Lắc điện thoại để hiển thị menu

Hãy chắc chắn rằng bạn có chrome.

Trên menu được tiết lộ, chọn Debug JS Remote Remote Option.

Chrome sẽ được mở tự động tại localhost: 8081 / debugger-ui. Bạn cũng có thể tự đi đến trình gỡ lỗi với liên kết này.

Có bảng điều khiển tiết lộ và bạn có thể thấy các bản ghi đang được ghi chú.

Đối với tôi cách tốt nhất để gỡ lỗi trên React-Native là sử dụng "Reactotron" .

Cài đặt Reactotron sau đó thêm chúng vào gói.json của bạn:

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

Bây giờ, đó chỉ là vấn đề đăng nhập mã của bạn. ví dụ:console.tron.log('debug')

1. Chạy ứng dụng của bạn trong trình giả lập - run-ios run-ios
2. Nhấn ctrl + d và nhấp vào Gỡ lỗi JS từ xa

1. trang web sẽ mở ra tại http: // localhost: 8081 / debugger-ui , nếu không nhập URL và truy cập liên kết này trong Chrome
2. Nhấp chuột phải vào trang và nhấp vào Kiểm tra và nó sẽ mở các công cụ dành cho nhà phát triển cho chrome

3. Đi đến các nguồn trong menu trên cùng và tìm tệp lớp js của bạn trong trình thám hiểm tệp bên phải

4. Bạn có thể đặt các điểm dừng để xem và gỡ lỗi mã trong đó như bạn có thể thấy trong hình ảnh.

Theo mặc định, trình giả lập ios của tôi không chọn tổ hợp phím, đó là lý do tại sao cmd-D không hoạt động. Tôi đã phải bật cài đặt cho bàn phím bằng menu giả lập:

Phần cứng> Bàn phím> Bàn phím kết nối

Bây giờ cmd-D khởi chạy gỡ lỗi chrome.

Đối với ứng dụng android. Bấm Ctrl + M chọn gỡ lỗi js từ xa, nó sẽ mở một cửa sổ mới bằng chrome với url http: // localhost: 8081 / debugger-ui . Bây giờ bạn có thể gỡ lỗi ứng dụng trong trình duyệt chrome

Có một không gian trong đường dẫn tập tin ngăn chặn các Cmd+ Dlàm việc. Tôi đã chuyển dự án của mình đến một vị trí không có chỗ trống và cuối cùng tôi đã có trình gỡ lỗi Chrome hoạt động. Có vẻ như một lỗi .

Nếu bạn muốn bật gỡ lỗi theo mặc định:

import { NativeModules } from 'react-native';

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

Để làm việc này trên Android:

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

Tham khảo: Khởi chạy ứng dụng React Native với JS Debug JS từ xa được bật theo mặc định

Rất đơn giản chỉ cần hai lệnh

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

Giả sử bạn muốn hiển thị menu này trên trình giả lập Android

• Sau đó, hãy thử ⌘+mbật lên hộp thoại cài đặt dev này trên trình giả lập Android trên máy Mac.

• Nếu nó không hiển thị thì đi đến AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box.

• Và sau đó thử lại ⌘+m.

• Nếu nó không hiển thị thì hãy chuyển đến cài đặt trình giả lập đang chạy và trên hộp Send keyboard shortcuts totổ hợp / thả xuống, sau đó chọn Emulator controls (default)tùy chọn.

• Và sau đó thử lại ⌘+m.

• Tôi hy vọng điều này sẽ giúp, nó làm việc cho tôi.

Nếu bạn đang sử dụng Redux, tôi khuyên bạn nên dùng React Native Debugger. Nó bao gồm các devtools Chrome, nhưng cũng có các devtools Redux và devtools React.

Redux Devtools : Điều này cho phép bạn xem hành động của mình và bước qua lại thông qua chúng. Nó cũng cho phép bạn xem cửa hàng redux của mình và có một tính năng để tự động tìm trạng thái trước đó với trạng thái được cập nhật cho từng hành động, do đó bạn có thể thấy điều đó khi bạn lùi lại qua một loạt các hành động.

React Devtools : Điều này cho phép bạn kiểm tra một thành phần nhất định, cụ thể là tất cả các đạo cụ cũng như trạng thái thành phần của nó. Nếu bạn có một phần của trạng thái thành phần là boolean, nó cho phép bạn nhấp vào nó để chuyển đổi nó và xem ứng dụng của bạn phản ứng như thế nào khi nó thay đổi. Tính năng tuyệt vời.

Chrome Devtools Cho phép bạn xem tất cả các kết quả đầu ra của bảng điều khiển, sử dụng các điểm dừng, tạm dừng trên trình gỡ lỗi; vv Các tính năng sửa lỗi tiêu chuẩn. Nếu bạn nhấp chuột phải vào khu vực nơi các hành động của bạn được liệt kê trong Redux Devtools và chọn 'Cho phép kiểm tra mạng', thì bạn có thể kiểm tra các lệnh gọi API của mình trong tab mạng của Devtools Chrome.

Trong kết luận có tất cả những điều này ở một nơi là tuyệt vời! Nếu bạn không cần một trong số họ, bạn có thể bật / tắt nó. Nhận React Native Debugger và tận hưởng cuộc sống.

Đây là cách thay thế để sử dụng ứng dụng gỡ lỗi gốc.

bạn có thể tải xuống ứng dụng bằng liên kết bên dưới, đây là ứng dụng rất tốt để quản lý cửa hàng redux cùng với mã nguồn.

Reac -igen-debugger

cũng như bây giờ một ngày bạn có thể trực tiếp sử dụng liên kết dưới đây để giúp bạn ra ngoài.

chrome-developer-tools

1. Nếu bạn đang sử dụng trình giả lập, hãy sử dụng Ctrl+ M& giả lập Cmd+D

2. Nhấp vào - Gỡ lỗi js từ xa

3. Google Chrome đi tới bảng điều khiển

Ngoài ra còn có một tên gỡ lỗi rất tốt Reactotron. https://github.com/infinitered/reactotron

Bạn không cần phải ở chế độ gỡ lỗi để xem một số giá trị dữ liệu và có rất nhiều tùy chọn.

đi có một cái nhìn thực sự hữu ích. ;)

Trong React-Native gỡ lỗi dễ dàng hơn nhiều.

• Để gỡ lỗi trong iOS sử dụng

cmd + d

ctrl + cmd + z (Dành cho trình giả lập)

• Để gỡ lỗi trong Android

Lắc thiết bị bằng cảm ứng (Đảm bảo tùy chọn nhà phát triển của bạn được bật)

Bước 1: Đặt debuggernơi bạn muốn dừng tập lệnh, như:

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

Điều này sẽ tạm dừng trình gỡ lỗi khi bao giờ kiểm soát đến khối mã này.

Bước 2: Nhấn Cmd+Dvào trình giả lập ios và Cmd+Mtrên trình giả lập Android . Nếu bạn đang có thiết bị thực, hãy lắc thiết bị để mở menu dev, nếu bạn không muốn lắc thiết bị hãy theo dõi blog này

Bước 3: Chọn Enable Remote JS Debugging, điều này sẽ mở Chrome

Bước 4: ChọnDeveloper Tools.

Bước 5: Trình gỡ lỗi của bạn bị tạm dừng trong Sourcestab bất cứ nơi nào bạn đã viết debuggertrong mã của mình. Đi tới bàn điều khiển và nhập bất kỳ tham số nào bạn muốn gỡ lỗi (có trong khối mã) như: Để di chuyển đến điểm gỡ lỗi tiếp theo, hãy di chuyển đến Nguồn -> nhấp vào nút Tiếp tục thực thi tập lệnh (Nút góc phải màu xanh)

Đặt trình gỡ lỗi, bất cứ nơi nào bạn muốn tạm dừng tập lệnh.

Thích gỡ lỗi !!

Bạn có thể sử dụng Safari để gỡ lỗi phiên bản iOS của ứng dụng mà không cần phải bật "Gỡ lỗi JS từ xa", chỉ cần làm theo các bước sau:

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

Đầu tiên trong trình giả lập ios của bạn, nếu bạn nhấn phím [lệnh + D] thì bạn có thể thấy màn hình này.

Sau đó nhấp vào nút Debug JS từ xa.

Sau khi bạn có thể thấy trang React Native Debugger như thế này.

Và sau đó mở trình kiểm tra của bạn [f12], và chuyển đến tab bảng điều khiển gỡ lỗi nó! :)

Phát hành React Native 0.62 - Giải pháp chính thức là Flipper

Flipper là công cụ gỡ lỗi Android & iOS Mobile mà không sử dụng chế độ gỡ lỗi trong phản ứng gốc.

Vì RN 0.62 (Xem liên kết này ), Flipper được khởi tạo với dự án mặc định.

Flipper có một vài plugin để gỡ lỗi. Các plugin bao gồm Layout, Network,Shared preferences

Lợi ích lớn nhất của Flipper không phải là nhiều plugin nhưng bạn cũng có thể thấy bảng điều khiển thiết bị Android / iOS dễ dàng gỡ lỗi.

Flipper cảnh báo bạn về sự cố hoặc từ chối mạng quá.

Plugin bố trí bao gồm chế độ trợ năng và chế độ đích.

Bạn cũng có thể thấy yêu cầu / phản hồi của mạng thô trong Ứng dụng của mình.