Cảnh báo ngừng thực thi javascript

Bạn có thể truy cập menu nhà phát triển bằng cách lắc thiết bị của mình hoặc bằng cách chọn "Cử chỉ lắc" bên trong menu Phần cứng trong Trình mô phỏng iOS. Bạn cũng có thể sử dụng phím tắt

npm install -g react-devtools

9 khi ứng dụng của bạn đang chạy trong Trình mô phỏng iOS hoặc

npm install -g react-devtools

0 khi chạy trong trình giả lập Android trên macOS và

npm install -g react-devtools

1 trên Windows và Linux. Ngoài ra, đối với Android, bạn có thể chạy lệnh

npm install -g react-devtools

2 để mở menu dev (82 là mã phím Menu)

Menu Nhà phát triển bị vô hiệu hóa trong các bản phát hành (sản xuất)

Kích hoạt làm mới nhanh

Làm mới nhanh là một tính năng React Native cho phép bạn nhận phản hồi gần như tức thì về những thay đổi trong các thành phần React của bạn. Trong khi gỡ lỗi, có thể hữu ích khi bật Làm mới nhanh. Làm mới nhanh được bật theo mặc định và bạn có thể bật "Bật làm mới nhanh" trong menu nhà phát triển React Native. Khi được bật, hầu hết các chỉnh sửa của bạn sẽ hiển thị trong vòng một hoặc hai giây

Kích hoạt phím tắt​

React Native hỗ trợ một vài phím tắt trong Trình mô phỏng iOS. Chúng được mô tả dưới đây. Để bật chúng trên macOS, bên trong ứng dụng Trình mô phỏng, mở menu I/O, chọn Bàn phím và đảm bảo rằng "Kết nối bàn phím phần cứng" được chọn

hộp nhật ký​

Lỗi và cảnh báo trong các bản phát triển được hiển thị trong LogBox bên trong ứng dụng của bạn

LogBox tự động bị vô hiệu hóa trong bản phát hành (sản xuất)

Lỗi bảng điều khiển và cảnh báo​

Lỗi và cảnh báo của bảng điều khiển được hiển thị dưới dạng thông báo trên màn hình với huy hiệu màu đỏ hoặc vàng và số lượng lỗi hoặc cảnh báo trong bảng điều khiển tương ứng. Để xem lỗi hoặc cảnh báo của bảng điều khiển, hãy nhấn vào thông báo để xem thông tin toàn màn hình về nhật ký và để phân trang qua tất cả các nhật ký trong bảng điều khiển

Có thể ẩn các thông báo này bằng cách sử dụng

npm install -g react-devtools

3. Điều này rất hữu ích khi đưa ra các bản giới thiệu sản phẩm, chẳng hạn. Ngoài ra, thông báo có thể được ẩn trên cơ sở mỗi nhật ký thông qua

npm install -g react-devtools

0. Điều này hữu ích khi có cảnh báo ồn ào không thể sửa được, chẳng hạn như cảnh báo trong phần phụ thuộc của bên thứ ba

Bỏ qua nhật ký là phương sách cuối cùng và tạo tác vụ để sửa bất kỳ nhật ký nào bị bỏ qua

import {LogBox} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

Lỗi chưa được xử lý

Các lỗi JavaScript chưa được xử lý như

npm install -g react-devtools

1 sẽ tự động mở lỗi LogBox toàn màn hình với nguồn gốc của lỗi. Những lỗi này có thể loại bỏ và giảm thiểu để bạn có thể thấy trạng thái ứng dụng của mình khi những lỗi này xảy ra nhưng phải luôn được giải quyết

Lỗi cú pháp

Khi xảy ra lỗi cú pháp, lỗi LogBox toàn màn hình sẽ tự động mở với dấu vết ngăn xếp và vị trí của lỗi cú pháp. Lỗi này không thể loại bỏ được vì nó thể hiện việc thực thi JavaScript không hợp lệ và phải được khắc phục trước khi tiếp tục với ứng dụng của bạn. Để loại bỏ các lỗi này, hãy sửa lỗi cú pháp và lưu thành tự động loại bỏ (khi bật Làm mới nhanh) hoặc cmd+r để tải lại (khi tắt Làm mới nhanh)

Công cụ dành cho nhà phát triển Chrome​

Để gỡ lỗi mã JavaScript trong Chrome, hãy chọn "Gỡ lỗi JS từ xa" từ Menu nhà phát triển. Thao tác này sẽ mở một tab mới tại http. //máy chủ cục bộ. 8081/debugger-ui

Chọn

npm install -g react-devtools

2 từ Menu Chrome để mở Công cụ dành cho nhà phát triển. Bạn cũng có thể truy cập DevTools bằng phím tắt (

npm install -g react-devtools

3 trên macOS,

npm install -g react-devtools

4

npm install -g react-devtools

5

npm install -g react-devtools

6 trên Windows). Bạn cũng có thể muốn bật Pause On Caught Exceptions để có trải nghiệm gỡ lỗi tốt hơn

Ghi chú. trên Android, nếu thời gian giữa trình gỡ lỗi và thiết bị bị chênh lệch; . , có thể không hoạt động bình thường hoặc kết quả có thể không chính xác. Vui lòng sửa lỗi này bằng cách chạy

npm install -g react-devtools

7 trên máy gỡ lỗi của bạn. Cần có quyền truy cập root để sử dụng trong thiết bị thực

Ghi chú. tiện ích mở rộng Chrome của Công cụ dành cho nhà phát triển React không hoạt động với React Native, nhưng bạn có thể sử dụng phiên bản độc lập của nó để thay thế. Đọc phần này để tìm hiểu làm thế nào

Gỡ lỗi bằng trình gỡ lỗi JavaScript tùy chỉnh​

Để sử dụng trình gỡ lỗi JavaScript tùy chỉnh thay cho Công cụ dành cho nhà phát triển Chrome, hãy đặt biến môi trường

npm install -g react-devtools

8 thành lệnh sẽ khởi động trình gỡ lỗi tùy chỉnh của bạn. Sau đó, bạn có thể chọn "Gỡ lỗi JS từ xa" từ Menu Nhà phát triển để bắt đầu gỡ lỗi

Trình gỡ lỗi sẽ nhận được danh sách tất cả các gốc của dự án, được phân tách bằng dấu cách. Ví dụ: nếu bạn đặt

npm install -g react-devtools

9, thì lệnh

import {LogBox} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

10 sẽ được sử dụng để khởi động trình gỡ lỗi của bạn

Các lệnh của trình gỡ lỗi tùy chỉnh được thực thi theo cách này phải là các quy trình tồn tại trong thời gian ngắn và chúng không nên tạo ra hơn 200 kilobyte đầu ra

Công cụ dành cho nhà phát triển Safari

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"

• Trên một thiết bị vật lý đi đến.

  import {LogBox} from 'react-native';
  
  // Ignore log notification by message:
  LogBox.ignoreLogs(['Warning: ...']);
  
  // Ignore all log notifications:
  LogBox.ignoreAllLogs();
  

  11 (Bước này không cần thiết trên Trình mô phỏng)
• Trên máy Mac của bạn, hãy bật menu Phát triển trong Safari.

  import {LogBox} from 'react-native';
  
  // Ignore log notification by message:
  LogBox.ignoreLogs(['Warning: ...']);
  
  // Ignore all log notifications:
  LogBox.ignoreAllLogs();
  

  12
• Chọn JSContext của ứng dụng của bạn.

  import {LogBox} from 'react-native';
  
  // Ignore log notification by message:
  LogBox.ignoreLogs(['Warning: ...']);
  
  // Ignore all log notifications:
  LogBox.ignoreAllLogs();
  

  13
• Trình kiểm tra web của Safari sẽ mở có Bảng điều khiển và Trình gỡ lỗi

Mặc dù bản đồ nguồn có thể không được bật theo mặc định, nhưng bạn có thể làm theo hướng dẫn hoặc video này để bật chúng và đặt điểm ngắt ở đúng vị trí trong mã nguồn

Tuy nhiên, mỗi khi ứng dụng được tải lại (sử dụng tải lại trực tiếp hoặc tải lại thủ công), một JSContext mới sẽ được tạo. Chọn "Tự động hiển thị trình kiểm tra web cho JSContexts" giúp bạn không phải chọn JSContext mới nhất theo cách thủ công

Công cụ dành cho nhà phát triển React

Bạn có thể sử dụng phiên bản độc lập của Công cụ dành cho nhà phát triển React để gỡ lỗi hệ thống phân cấp thành phần React. Để sử dụng, hãy cài đặt gói

import {LogBox} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

14 trên toàn cầu

Ghi chú. Phiên bản 4 của

import {LogBox} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

14 yêu cầu phiên bản 0 của

import {LogBox} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

16. 62 trở lên để hoạt động bình thường

• npm
• sợi

npm install -g react-devtools

import {LogBox} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

1

Bây giờ hãy chạy

import {LogBox} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

14 từ thiết bị đầu cuối để khởi chạy ứng dụng DevTools độc lập

npm install -g react-devtools

1

Nó sẽ kết nối với trình mô phỏng của bạn trong vòng vài giây

thông tin

Nếu việc kết nối với trình giả lập gây rắc rối (đặc biệt là Android 12), hãy thử chạy

import {LogBox} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

18 trong một thiết bị đầu cuối mới

thông tin

Nếu bạn muốn tránh cài đặt toàn cầu, bạn có thể thêm

import {LogBox} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

14 làm phần phụ thuộc của dự án. Thêm gói

import {LogBox} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

14 vào dự án của bạn bằng cách sử dụng

npm install -g react-devtools

11, sau đó thêm

npm install -g react-devtools

12 vào phần

npm install -g react-devtools

13 trong

npm install -g react-devtools

14 của bạn, sau đó chạy

npm install -g react-devtools

15 từ thư mục dự án của bạn để mở DevTools

Tích hợp với React Native Inspector​

Mở menu nhà phát triển trong ứng dụng và chọn "Chuyển đổi Trình kiểm tra". Nó sẽ hiển thị một lớp phủ cho phép bạn nhấn vào bất kỳ phần tử giao diện người dùng nào và xem thông tin về phần tử đó

Tuy nhiên, khi

import {LogBox} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

14 đang chạy, Trình kiểm tra sẽ chuyển sang chế độ thu gọn và thay vào đó sử dụng DevTools làm giao diện người dùng chính. Trong chế độ này, nhấp vào thứ gì đó trong trình giả lập sẽ hiển thị các thành phần có liên quan trong DevTools

Bạn có thể chọn "Chuyển đổi trình kiểm tra" trong cùng menu để thoát khỏi chế độ này

Kiểm tra các phiên bản thành phần​

Khi gỡ lỗi JavaScript trong Chrome, bạn có thể kiểm tra các đạo cụ và trạng thái của các thành phần React trong bảng điều khiển trình duyệt

Trước tiên, hãy làm theo hướng dẫn gỡ lỗi trong Chrome để mở bảng điều khiển Chrome

Đảm bảo rằng danh sách thả xuống ở góc trên cùng bên trái của bảng điều khiển Chrome cho biết

npm install -g react-devtools

17. Bước này là cần thiết

Sau đó chọn một thành phần React trong React DevTools. Có một hộp tìm kiếm ở trên cùng giúp bạn tìm kiếm theo tên. Ngay sau khi bạn chọn nó, nó sẽ có sẵn dưới dạng

npm install -g react-devtools

18 trong bảng điều khiển Chrome, cho phép bạn kiểm tra các thuộc tính đối tượng, trạng thái và đối tượng của nó

Màn hình hiệu suất

Bạn có thể bật lớp phủ hiệu suất để giúp bạn gỡ lỗi các vấn đề về hiệu suất bằng cách chọn "Perf Monitor" trong Menu Nhà phát triển

---

Trạng thái ứng dụng gỡ lỗi​

Reactotron là một ứng dụng máy tính mã nguồn mở cho phép bạn kiểm tra trạng thái ứng dụng Redux hoặc MobX-State-Tree cũng như xem nhật ký tùy chỉnh, chạy các lệnh tùy chỉnh như đặt lại trạng thái, lưu trữ và khôi phục ảnh chụp nhanh trạng thái cũng như các tính năng sửa lỗi hữu ích khác cho React

Bạn có thể xem hướng dẫn cài đặt trong README. Nếu bạn đang sử dụng Expo thì đây là bài viết hướng dẫn chi tiết cách cài đặt trên Expo

Gỡ lỗi gốc

Các dự án chỉ có mã gốc

Phần sau chỉ áp dụng cho các dự án có mã gốc bị lộ. Nếu bạn đang sử dụng quy trình làm việc của Expo được quản lý, hãy xem hướng dẫn về bản dựng sẵn để sử dụng API này

Truy cập nhật ký bảng điều khiển​

Bạn có thể hiển thị nhật ký bảng điều khiển cho ứng dụng iOS hoặc Android bằng cách sử dụng các lệnh sau trong thiết bị đầu cuối khi ứng dụng đang chạy

npm install -g react-devtools

3

Bạn cũng có thể truy cập những thứ này thông qua

npm install -g react-devtools

19 trong Trình mô phỏng iOS hoặc bằng cách chạy

npm install -g react-devtools

30 trong thiết bị đầu cuối trong khi ứng dụng Android đang chạy trên thiết bị hoặc trình giả lập

Nếu bạn đang sử dụng Tạo ứng dụng gốc React hoặc Expo CLI, nhật ký bảng điều khiển đã xuất hiện trong cùng đầu ra thiết bị đầu cuối dưới dạng gói

Gỡ lỗi trên thiết bị bằng Công cụ dành cho nhà phát triển Chrome​

Nếu bạn đang sử dụng Tạo ứng dụng gốc React hoặc Expo CLI, điều này đã được định cấu hình cho bạn rồi

Trên thiết bị iOS, hãy mở tệp

npm install -g react-devtools

31 và thay đổi "localhost" thành địa chỉ IP của máy tính của bạn, sau đó chọn "Gỡ lỗi JS từ xa" từ Menu Nhà phát triển

Trên Android 5. 0+ thiết bị được kết nối qua USB, bạn có thể sử dụng công cụ dòng lệnh

npm install -g react-devtools

32 để thiết lập chuyển tiếp cổng từ thiết bị sang máy tính của mình

npm install -g react-devtools

33

Ngoài ra, chọn "Cài đặt dành cho nhà phát triển" từ Menu Nhà phát triển, sau đó cập nhật cài đặt "Máy chủ gỡ lỗi cho thiết bị" để khớp với địa chỉ IP của máy tính của bạn

Nếu bạn gặp phải bất kỳ sự cố nào, có thể một trong các tiện ích mở rộng của Chrome đang tương tác theo những cách không mong muốn với trình gỡ lỗi. Hãy thử tắt tất cả các tiện ích mở rộng của bạn và bật lại từng tiện ích một cho đến khi bạn tìm thấy tiện ích mở rộng có vấn đề

Gỡ lỗi mã gốc

Khi làm việc với mã gốc, chẳng hạn như khi viết các mô-đun gốc, bạn có thể khởi chạy ứng dụng từ Android Studio hoặc Xcode và tận dụng các tính năng gỡ lỗi gốc (thiết lập điểm dừng, v.v. ) như bạn sẽ làm trong trường hợp xây dựng một ứng dụng gốc tiêu chuẩn