Làm thế nào để đăng nhập vào React Native?

Làm cách nào tôi có thể đăng nhập một biến trong React Native, như sử dụng console.logkhi phát triển cho web?

console.log làm.

Theo mặc định trên iOS, nó đăng nhập vào khung gỡ lỗi bên trong Xcode.

Từ trình giả lập IOS, nhấn ( ⌘+ D) và nhấn Remote JS Debugging . Điều này sẽ mở một tài nguyên, http: // localhost: 8081 / debugger-ui trên localhost. Từ đó, sử dụng bảng điều khiển javascript của công cụ Chrome Developer để xemconsole.log

Sử dụng console.log, console.warnvv

Kể từ React Native 0.29, bạn chỉ cần chạy phần sau để xem nhật ký trong bảng điều khiển:

$ react-native log-ios
$ react-native log-android

Pre React Native 0.29, chạy cái này trong bảng điều khiển:

adb logcat *:S ReactNative:V ReactNativeJS:V

Bài viết Phản ứng gốc 0,29, chạy:

react-native log-ios

hoặc là

react-native log-android

Như Martin đã nói trong một câu trả lời khác.

Điều này cho thấy tất cả console.log (), lỗi, ghi chú, v.v. và khiến zero bị chậm lại.

Sử dụng console.debug("text");

Bạn sẽ thấy các bản ghi bên trong thiết bị đầu cuối.

Các bước:

• Chạy ứng dụng:

react-native run-ios        # For iOS
react-native run-android    # For Android

• Chạy bộ ghi chép:

react-native log-ios        # For iOS
react-native log-android    # For Android

Visual Studio Code có một bảng điều khiển gỡ lỗi khá có thể hiển thị console.log của bạn.

Mã VS thường xuyên hơn không, React Native thân thiện.

Đây là nơi Công cụ dành cho nhà phát triển Chrome là bạn của bạn.

Các bước sau sẽ đưa bạn đến Công cụ dành cho nhà phát triển Chrome, nơi bạn sẽ có thể xem các console.logtuyên bố của mình .

Các bước

1. Cài đặt Google Chrome , nếu bạn chưa có
2. Chạy ứng dụng bằng cách sử dụng react-native run-androidhoặcreact-native run-ios
3. Mở menu nhà phát triển
   • Mac: ⌘+D cho iOS hoặc ⌘Mcho Android iOS
   • Windows / Linux: Lắc điện thoại Android
4. Lựa chọn Debug JS Remotely
5. Điều này sẽ khởi chạy trình gỡ lỗi trong Chrome
6. Trong Chrome: Tools -> More Tools -> Developer Optionsvà đảm bảo bạn đang ở trên consoletab

Bây giờ, bất cứ khi nào một console.logcâu lệnh được thực thi, nó sẽ xuất hiện trong Chrome Dev Tools. Các tài liệu chính thức là ở đây .

Có 3 phương pháp tôi sử dụng để gỡ lỗi khi phát triển ứng dụng React Native:

1. console.log(): hiển thị trong bảng điều khiển
2. console.warn(): hiển thị ở dưới cùng của hộp màu vàng của ứng dụng
3. alert(): hiển thị như một lời nhắc giống như trong web

Tôi muốn giới thiệu các bạn sử dụng React Native Debugger. Bạn có thể tải xuống và cài đặt nó bằng cách sử dụng lệnh này.

brew update && brew cask install react-native-debugger

hoặc là

Chỉ cần kiểm tra liên kết dưới đây.

https://github.com/jhen0409/react-native-debugger

Chúc mừng hack!

Tôi gặp vấn đề tương tự: các thông báo trên bảng điều khiển không xuất hiện trong khu vực gỡ lỗi của XCode. Trong ứng dụng của mình, tôi đã thực hiện cmd-d để hiển thị menu gỡ lỗi và nhớ rằng tôi đã bật "Gỡ lỗi trong Safari".

Tôi tắt nó đi, và một số tin nhắn được in ra tin nhắn đầu ra, nhưng không phải tin nhắn trên bàn điều khiển của tôi. Tuy nhiên, một trong những thông điệp tường trình cho biết:

__DEV__ === false, development-level warning are OFF, performance optimizations are ON"

Điều này là do trước đây tôi đã gói dự án của mình để thử nghiệm trên một thiết bị thực với lệnh:

react-native bundle --minify

Gói này không có "chế độ dev" trên. Để cho phép tin nhắn dev, bao gồm cờ --dev:

react-native bundle --dev

Và tin nhắn console.log đã trở lại! Nếu bạn không gói cho một thiết bị thực, đừng quên trỏ lại jsCodeLocationvào AppDelegate.mlocalhost (tôi đã làm!).

Nhấn [lệnh + control + Z] trong Trình mô phỏng Xcode, chọn Gỡ lỗi JS từ xa, sau đó nhấn [lệnh + tùy chọn + J] để mở các công cụ dành cho nhà phát triển Chrome.

Trình mô phỏng Xcode Img

giới thiệu gỡ lỗi Ứng dụng gốc React React

Thật đơn giản để có được các bản ghi trong React-Native

Sử dụng console.log và console.warn

console.log('character', parameter)

console.warn('character', parameter)

Nhật ký này bạn có thể xem trong bảng điều khiển trình duyệt. Nếu bạn muốn kiểm tra nhật ký thiết bị hoặc nói nhật ký APK sản xuất, bạn có thể sử dụng

adb logcat

adb -d logcat

mô-đun Reac -igen -xlog có thể giúp bạn, là Xlog của WeChat dành cho Reac -igen . Điều đó có thể xuất ra trong bảng điều khiển Xcode và tệp nhật ký, tệp nhật ký sản phẩm có thể giúp bạn gỡ lỗi.

Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');

Ghi nhật ký thời gian phát triển

Để ghi nhật ký thời gian phát triển, bạn có thể sử dụng console.log () . Một điều quan trọng, nếu bạn muốn tắt đăng nhập trong chế độ sản xuất, thì trong tệp ứng dụng Root Js, chỉ cần gán chức năng trống như thế này - console.log = {} Nó sẽ vô hiệu hóa toàn bộ xuất bản nhật ký trong toàn bộ ứng dụng, thực sự cần thiết trong sản xuất chế độ như console.log tiêu tốn thời gian.

Chạy nhật ký thời gian

Trong chế độ sản xuất, cũng cần phải xem nhật ký khi người dùng thực đang sử dụng ứng dụng của bạn trong thời gian thực. Điều này giúp hiểu được lỗi, sử dụng và các trường hợp không mong muốn. Có rất nhiều công cụ trả tiền của bên thứ 3 có sẵn trên thị trường cho việc này. Một trong số chúng tôi đã sử dụng là của Logentries

Điều tốt là Logentries cũng đã có React Native Module . Vì vậy, sẽ mất rất ít thời gian để bạn kích hoạt tính năng ghi nhật ký thời gian với ứng dụng di động của bạn.

Một thứ mới xuất hiện khoảng một tháng trước là "Tạo ứng dụng gốc phản ứng", một bản tóm tắt tuyệt vời cho phép bạn (với nỗ lực tối thiểu) để hiển thị ứng dụng của bạn trông như thế nào trên thiết bị di động của bạn (BẤT K with máy ảnh nào) bằng ứng dụng Expo . Nó không chỉ có các bản cập nhật trực tiếp mà còn cho phép bạn xem nhật ký giao diện điều khiển trong thiết bị đầu cuối của bạn giống như khi phát triển cho web , thay vì phải sử dụng trình duyệt như chúng tôi đã làm với React Native trước đây.

Tất nhiên, bạn sẽ phải thực hiện một dự án mới với bản tóm tắt đó ... nhưng nếu bạn cần di chuyển các tệp của mình qua thì đó không phải là vấn đề. Cho nó một shot.

Chỉnh sửa: Trên thực tế, nó thậm chí không cần máy ảnh. Tôi đã nói rằng để quét mã QR, nhưng bạn cũng có thể gõ một cái gì đó để đồng bộ hóa nó với máy chủ của bạn, không chỉ là mã QR.

Có hai tùy chọn để gỡ lỗi hoặc nhận đầu ra của ứng dụng gốc phản ứng của bạn khi sử dụng

Trình giả lập hoặc thiết bị thực

Để sử dụng Trình giả lập đầu tiên: sử dụng

log-android log-android hoặc Reac -igen log-ios

để có được đầu ra nhật ký

trên thiết bị thực. Làm cho thiết bị của bạn

vì vậy menu sẽ đến từ nơi bạn chọn gỡ lỗi từ xa và nó sẽ mở màn hình này trong trình duyệt của bạn. để bạn có thể thấy đầu ra nhật ký của mình trong tab console.

Sử dụng phản ứng gỡ lỗi bản địa để đăng nhập và lưu trữ redux https://github.com/jhen0409/react-native-debugg

Chỉ cần tải xuống và chạy dưới dạng phần mềm, sau đó kích hoạt chế độ Gỡ lỗi từ trình giả lập.

Nó hỗ trợ tính năng sửa lỗi khác giống như phần tử trong các công cụ dành cho nhà phát triển chrome, giúp xem kiểu dáng được cung cấp cho bất kỳ thành phần nào.

Hỗ trợ đầy đủ cuối cùng cho các công cụ dev redux

1. Nhập console.log("My log text")mã của bạn
2. đi đến công cụ dòng lệnh của bạn
3. định vị chính mình trong thư mục phát triển của nó

Trong Android:

• viết lệnh này: React -igen log-android

Trong iOS:

• viết lệnh này: Reac--log log-ios

Bạn có thể sử dụng tùy chọn gỡ lỗi js từ xa từ thiết bị của mình hoặc đơn giản là bạn có thể sử dụng log-android và log-ios phản ứng gốc cho ios.

console.log () là cách dễ dàng để gỡ lỗi mã của bạn nhưng nó cần được sử dụng với chức năng mũi tên hoặc bind () trong khi hiển thị bất kỳ trạng thái nào. Bạn có thể tìm thấy các liên kết hữu ích.

Bạn có thể làm điều này theo 2 phương pháp

1> bằng cách sử dụng cảnh báo

console.warn("somthing " +this.state.Some_Sates_of_variables);

2> Bằng cách sử dụng Thông báo Điều này không tốt mỗi lần nếu nó đạt đến cảnh báo thì mỗi lần bật pop sẽ được mở vì vậy nếu thực hiện lặp có nghĩa là không thích sử dụng điều này

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);

Người dùng có Windows và Android Studio:

Bạn sẽ tìm thấy nó dưới Logcat trong Android Studio. Có rất nhiều thông điệp đăng nhập hiển thị ở đây, vì vậy bạn có thể dễ dàng tạo bộ lọc cho "ReactNativeJS" sẽ chỉ hiển thị các tin nhắn console.log được tạo bên trong ứng dụng gốc phản ứng của bạn.

Mọi nhà phát triển phải đối mặt với vấn đề gỡ lỗi với phản ứng gốc này, thậm chí tôi cũng phải đối mặt và tôi giới thiệu giải pháp này là đủ cho tôi ở cấp độ ban đầu, nó bao gồm một số cách giúp chúng tôi thử và sử dụng những gì thoải mái với chúng tôi

1. Gỡ lỗi với console.log
2. Mã gỡ lỗi (logic) với Nuclide
3. Mã gỡ lỗi (logic) với Chrome
4. Sử dụng Xcode để gỡ lỗi GUI

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

Bạn cũng có thể sử dụng Reactotron, nó sẽ cung cấp cho bạn nhiều chức năng hơn là chỉ đăng nhập. https://github.com/infinitered/reactotron

Có một số cách để đạt được điều này, tôi liệt kê chúng và bao gồm cả khuyết điểm trong việc sử dụng chúng. Bạn có thể dùng:

1. console.logvà xem các báo cáo ghi nhật ký, mà không chọn tùy chọn gỡ lỗi từ xa từ các công cụ dev, Android Studio và Xcode. hoặc bạn có thể từ chối tùy chọn gỡ lỗi từ xa và xem đăng nhập trên các công cụ chrome dev hoặc vscode hoặc bất kỳ trình chỉnh sửa nào khác hỗ trợ gỡ lỗi, bạn phải thận trọng vì điều này sẽ làm chậm toàn bộ quá trình.
2. Bạn có thể sử dụng console.warnnhưng sau đó màn hình điện thoại di động của bạn sẽ tràn ngập những hộp màu vàng kỳ lạ đó có thể hoặc không thể khả thi theo tình huống của bạn.
3. Phương pháp hiệu quả nhất mà tôi đã gặp là sử dụng công cụ của bên thứ ba, Reactotron . Một công cụ đơn giản và dễ cấu hình cho phép bạn xem từng câu lệnh ghi nhật ký ở các cấp độ khác nhau (lỗi, gỡ lỗi, cảnh báo, v.v.). Nó cung cấp cho bạn công cụ GUI hiển thị tất cả việc ghi nhật ký ứng dụng của bạn mà không làm chậm hiệu suất.

Bạn sử dụng điều tương tự được sử dụng cho web thông thường. Các consolelệnh cũng làm việc trong trường hợp này. Ví dụ, bạn có thể sử dụng console.log(), console.warn(), console.clear(), vv

Bạn có thể sử dụng Chrome Developer để sử dụng consolelệnh khi bạn đăng nhập trong khi bạn đang chạy ứng dụng React Native của mình.

console.log() là cách tốt nhất và đơn giản để xem nhật ký của bạn trên bảng điều khiển khi bạn sử dụng trình gỡ lỗi js từ xa từ menu nhà phát triển của bạn

Chrome Devtool là cách tốt nhất và dễ nhất để ghi nhật ký và gỡ lỗi.

Nếu bạn đang sử dụng osx và sử dụng trình giả lập, bạn có thể xem console.logtrực tiếp s của mình trong trình kiểm tra web safari.

Safari => Phát triển => Trình mô phỏng - [phiên bản giả lập của bạn tại đây] => JSContext

Thông thường có hai kịch bản mà chúng ta cần gỡ lỗi.

1. Khi chúng tôi gặp phải các vấn đề liên quan đến dữ liệu và chúng tôi muốn kiểm tra dữ liệu của mình và gỡ lỗi liên quan đến dữ liệu trong trường hợp đó console.log('data::',data)

   và gỡ lỗi js từ xa là lựa chọn tốt nhất.

2. Trường hợp khác là các vấn đề liên quan đến giao diện người dùng và kiểu dáng trong đó chúng ta cần kiểm tra kiểu dáng của thành phần trong trường hợp đó công cụ phản ứng-dev là công cụ tốt nhất.

   cả hai phương pháp đều đề cập ở đây.

console.log có thể được sử dụng cho bất kỳ dự án JS nào. Nếu bạn chạy ứng dụng trong localhost thì rõ ràng nó giống với bất kỳ dự án javascript nào. Nhưng trong khi sử dụng trình giả lập hoặc bất kỳ thiết bị nào, hãy kết nối trình giả lập đó với localhost của chúng tôi và chúng ta có thể thấy trong bảng điều khiển.