Không thể kết nối với trình gỡ lỗi từ xa

Tôi đang sử dụng React.JS và khi tôi làm react-native run-android(với thiết bị của mình được cắm) tôi thấy một trang trống. Khi tôi lắc thiết bị và chọn Debug JS Remotelytừ danh sách tùy chọn, tôi thấy màn hình sau.

Tài chính

OS: Ubuntu 16.04
Node version is: v4.6.2
java version "1.8.0_111"
react": "15.4.1
react-native": "0.38.0

Trong trường hợp của tôi, vấn đề là trình giả lập đã đưa ra yêu cầu:

http://10.0.2.2:8081/debugger-ui

thay vì:

http://localhost:8081/debugger-ui và yêu cầu đã thất bại.

Để giải quyết vấn đề: Trước khi bật gỡ lỗi từ xa trên trình giả lập của bạn , hãy mở http://localhost:8081/debugger-uibằng chrome. Sau đó kích hoạt gỡ lỗi từ xa và quay lại trang chrome nơi bạn sẽ thấy nhật ký bảng điều khiển của mình.

Giải quyết vấn đề sau:

• nhấn Cmd + M vào màn hình giả lập
• Đi đến Dev settings > Debug server host & port for device
• Bộ localhost:8081
• Chạy lại ứng dụng Android: react-native run-android

Trình gỡ lỗi được kết nối ngay bây giờ!

Tôi giải quyết nó làm adb reverse tcp:8081 tcp:8081và sau đó reloadtrên điện thoại của tôi.

Trong trường hợp của tôi, chọn Debug JS khởi chạy Chrome từ xa , nhưng không kết nối với thiết bị Android. Thông thường, tab / cửa sổ Chrome mới sẽ có URL gỡ lỗi được điền trước trong thanh địa chỉ, nhưng trong trường hợp này, thanh địa chỉ trống. Sau khoảng thời gian chờ, thông báo lỗi "Không thể kết nối với trình gỡ lỗi từ xa" đã được hiển thị. Tôi đã sửa lỗi này bằng quy trình sau:

• Chạy adb reverse tcp:8081 tcp:8081
• Dán http://localhost:8081/debugger-uivào trường địa chỉ của trình duyệt Chrome của tôi. Bạn sẽ thấy màn hình gỡ lỗi bình thường nhưng ứng dụng của bạn vẫn sẽ không được kết nối.

Điều đó sẽ khắc phục vấn đề. Nếu không, bạn có thể cần thực hiện các bước bổ sung sau:

• Đóng và gỡ cài đặt ứng dụng khỏi thiết bị Android của bạn
• Cài đặt lại ứng dụng với react-native run-android
• Cho phép gỡ lỗi từ xa trên ứng dụng của bạn.
• Ứng dụng của bạn bây giờ sẽ được kết nối với trình gỡ lỗi.

Tôi đã có một vấn đề tương tự dẫn tôi đến câu hỏi này. Trong trình gỡ lỗi trình duyệt của tôi, tôi đã nhận được thông báo lỗi này:

Truy cập để tìm nạp tại ' http: // localhost: 8081 / index.delta? Platform = android & dev = true & minify = false ' từ nguồn gốc ' http://127.0.0.1:8081 ' đã bị chặn bởi chính sách CORS: Không 'Kiểm soát truy cập Tiêu đề-ALLow-Origin 'hiện diện trên tài nguyên được yêu cầu. Nếu phản hồi mờ phục vụ nhu cầu của bạn, hãy đặt chế độ của yêu cầu thành 'no-cors' để tìm nạp tài nguyên với CORS bị vô hiệu hóa.

Phải mất một lúc tôi mới nhận ra mình đang sử dụng 127.0.0.1:8081thay vì localhost:8081cho trình gỡ lỗi của mình.

Để khắc phục, tôi chỉ cần thay đổi Chrome từ:

http://127.0.0.1:8081/debugger-ui/

đến

http://localhost:8081/debugger-ui/

Đảm bảo rằng máy chủ nút để cung cấp gói đang chạy trong nền. Để chạy bắt đầu máy chủ sử dụng npm starthoặc react-native startvà giữ tab mở trong quá trình phát triển

Trường hợp của tôi là khi tôi nhấn kích hoạt gỡ lỗi JS từ xa, nó sẽ khởi chạy chrome, nhưng không thể kết nối với nó.

Tôi đã cố chạy:

adb reverse tcp:8081 tcp:8081 

, đã làm nhưng không hoạt động.

Tôi đã gỡ cài đặt chrome hoàn toàn và cài đặt một cái mới. Và nó hoạt động.

1. Reac -igen start --reset-cache trong một tab và Reac -igen run-android trong một tab khác
2. adb Reverse tcp: 8081 tcp: 8081 (vì vậy bạn có thể thêm nó vào tập lệnh của mình và chỉ chạy sợi chạy adb-Reverse )
3. Nếu bạn đang sử dụng Android, Thay vì lắc điện thoại, một mẹo hay là chạy các lệnh adb.

Vì vậy, bạn có thể chạy:

• adb shell keyevent 82 ( tùy chọn menu )
• key key shell adb 46 46 ( tải lại )

Các câu trả lời khác ở đây đã thiếu một bước quan trọng đối với tôi. Trong AndroidManifest.xml tôi cần thêm usedCleartextTraffic:

    <application
      ...
      android:usesCleartextTraffic="true">

Bạn có thể không muốn giữ điều này trong bản phát hành sản xuất ứng dụng của mình, trừ khi bạn muốn hỗ trợ các yêu cầu http không an toàn.

Sau khi tôi thêm phần này vào AndroidManifest.xml, sau đó tôi đã làm theo câu trả lời của Tom Aranda và trình giả lập cuối cùng đã có thể kết nối với trình gỡ lỗi.

Tôi đã trả lời @sajib và sử dụng tập lệnh này để chuyển hướng các cổng:

#!/usr/bin/env bash

# packager
adb reverse tcp:8081 tcp:8081
adb -d reverse tcp:8081 tcp:8081
adb -e reverse tcp:8081 tcp:8081

echo "🚧 React Native Packager Redirected 🚧"

gỡ cài đặt ứng dụng của bạn, sau đó chạy Reac -igen run-android. sau đó nhấp vào gỡ lỗi kết thúc trong chrome thay thế http: // localhost: 8081 / debugger-ui / , end run Reac -igen run-android. nếu bạn vẫn chưa thành công hãy thử lại

Bao gồm tất cả các câu trả lời ấn tượng các nhà phát triển chuyên gia đặc biệt Ribamar Santos cung cấp , nếu bạn không làm cho nó hoạt động, bạn phải kiểm tra một cái gì đó khó khăn hơn!

Một cái gì đó giống như Airplane modeđiện thoại (giả lập) của bạn! Hoặc của bạn network status of Emulator(Data status and Voice status on Cellular tab of Emulator configuration ) có thể bị thao túng để không thể hiện mạng! cho một số nhu cầu thi đua!

Tôi đã khắc phục vấn đề này bằng thủ thuật này! Đó là một chút gỡ lỗi ngoạn mục để tìm lỗ hổng này!

trong trường hợp của tôi, nó cũng cần cài đặt gói npm

vì thế

npm install react-native-debugger -g

Hãy thử thêm cái này

pack.json

devDependencies: {
//...    
    "@react-native-community/cli-debugger-ui": "4.7.0"
}

Chấm dứt mọi thứ.

• npm install
• npx react-native start
• npx react-native run-android

Tham khảo: https://github.com/react-native-community/cli/issues/1081#issuecomment-614223917