Gỡ lỗi từ xa iOS

Với việc phát hành Chrome cho iOS gần đây, tôi đã tự hỏi làm thế nào để bạn bật gỡ lỗi từ xa cho Chrome iOS?

Cập nhật: Với việc phát hành iOS 6, giờ đây việc gỡ lỗi từ xa có thể được thực hiện với Safari .

Cập nhật:

Đây không phải là câu trả lời tốt nhất nữa, xin vui lòng làm theo lời khuyên của gregers .

Câu trả lời mới:

Sử dụng Weinre .

Câu trả lời cũ:

Bây giờ bạn có thể sử dụng Safari để gỡ lỗi từ xa. Nhưng nó yêu cầu iOS 6.

Dưới đây là bản dịch nhanh của http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector

1. Kết nối iDevice của bạn qua USB với máy Mac của bạn
2. Mở Safari trên máy Mac của bạn và kích hoạt các công cụ dev
3. Trên iDevice của bạn: đi tới cài đặt> safari> nâng cao và kích hoạt trình kiểm tra web
4. Truy cập bất kỳ trang web nào với iDevice của bạn
5. Trên máy Mac của bạn: Mở menu nhà phát triển và chọn trang web từ iDevice của bạn (ở trên Menu Safari hàng đầu)

Như Simons đã chỉ ra, người ta cần tắt trình duyệt riêng tư để làm cho việc gỡ lỗi từ xa hoạt động.

Cài đặt> Safari> Duyệt web riêng tư> TẮT

Câu trả lời được chọn chỉ dành cho Safari. Hiện tại, không thể thực hiện gỡ lỗi từ xa thực sự trong Chrome trên iOS, nhưng như với hầu hết các trình duyệt di động, bạn có thể sử dụng WeInRe cho một số gỡ lỗi đơn giản. Thiết lập một chút công việc, nhưng cho phép bạn kiểm tra DOM, xem kiểu dáng, thay đổi DOM và chơi với bảng điều khiển.

Để thiết lập:

• Cài đặt nodejs
• npm install -g weinre
• weinre --boundHost -all-
• Mở http: // {wifi-ip-address}: 8080 / và sao chép mã tập lệnh đích
• Dán thẻ script vào trang của bạn (hoặc sử dụng bookmarklet)
• Nhấp vào liên kết đến giao diện người dùng gỡ lỗi máy khách (http: // {wifi-ip-address}: 8080 / client / # nặc danh)
• Khi bạn nhận được một dòng màu xanh lá cây trong Khách hàng , trình duyệt được kết nối

Các bookmarklet là một chút rắc rối để cài đặt. Thật dễ dàng nếu bạn đã bật đồng bộ hóa dấu trang cho cả Chrome dành cho máy tính để bàn và thiết bị di động. Sao chép url bookmarklet từ máy chủ weinre cục bộ (giống như trên). Thật không may, nó không hoạt động vì nó không được mã hóa url đúng cách. Vì vậy, hãy mở bảng điều khiển JavaScript và nhập:

copy(encodeURI('')); // paste bookmarklet inside quotes

Bây giờ bạn sẽ có bookmarklet được mã hóa url trong clipboard của bạn. Dán nó vào một dấu trang mới dưới Dấu trang di động . Gọi nó là weinre hoặc một cái gì đó đơn giản để gõ. Nó nên được đồng bộ hóa với điện thoại di động của bạn khá nhanh, vì vậy hãy tải trang bạn muốn kiểm tra. Sau đó nhập tên dấu trang vào thanh url và bạn sẽ thấy bookmarklet dưới dạng gợi ý tự động hoàn thành. Nhấn vào đây để chạy mã bookmarklet :)

Hiện tại, bạn không thể trực tiếp gỡ lỗi Chrome trên iOS. Nó sử dụng một uiWebView có thể hoạt động khác biệt so với Mobile Safari.

Bạn có một vài lựa chọn.

Tùy chọn 1: Gỡ lỗi từ xa Mobile Safari bằng trình kiểm tra của Safari. Nếu vấn đề của bạn tái tạo trong Mobile Safari, đây chắc chắn là cách tốt nhất để giải quyết. Trong thực tế, đi qua trình giả lập iOS thậm chí còn dễ dàng hơn.

Tùy chọn 2: Sử dụng Weinre cho trải nghiệm gỡ lỗi được làm mỏng . Weinre không có nhiều tính năng nhưng đôi khi nó đủ tốt.

Tùy chọn 3: Gỡ lỗi từ xa một uiWebView thích hợp có chức năng giống nhau.

Đây là cách tốt nhất để làm điều này. Bạn sẽ cần cài đặt XCode .

1. Truy cập github.com/paulirish/iOS-WebView-App và "Tải xuống Zip" hoặc sao chép.
2. Mở XCode, mở dự án hiện có và chọn dự án bạn vừa tải xuống.
3. Mở WebViewAppDelegate.m và thay đổi urlStringthành URL bạn muốn kiểm tra.
4. Chạy ứng dụng trong Trình mô phỏng iOS.
5. Mở Safari, Mở Menu Phát triển , Chọn Trình mô phỏng iOS và chọn chế độ xem web của bạn.
6. Safari Inspector sẽ kiểm tra uiWebView của bạn.

Theo hiểu biết của tôi, Google Chrome sử dụng UIWebView của iOS thay vì triển khai toàn bộ Chrome như đối tác Android.

Nhiều bàn điều khiển từ xa hoạt động tốt. http://farjs.com là dự án của tôi và tôi đã có thể gỡ lỗi thành công các sự cố cụ thể cho Crome iOS và không xảy ra trong safari khi sử dụng nó. (và có lẽ tất cả các trình duyệt di động khác)

Vấn đề là việc tiêm mã gỡ lỗi hơi khó vì Chrome không cho phép bạn cài đặt bookmarklets.

Thay vào đó, bạn có thể mở một tab trên trang mà bạn sẽ gỡ lỗi và một tab khác trên farjs.com và sau đó nhấp vào "bookmarklet"

Sao chép mã JS của bookmarklet, quay lại tab đầu tiên, với trang cần được gỡ lỗi và dán mã bookmarklet vào thanh vị trí.

Bước cuối cùng là cuộn đến đầu thanh vị trí và thêm "javascript:", vì Chrome sẽ xóa nó.

Tôi đề nghị Vorlon , hoạt động như weinre. Tôi thích giao diện người dùng của Vorlon và nó hỗ trợ SSL , ứng dụng của tôi nằm trong HTTPS, tôi đã thử sử dụng ngrok, ghostlab và vorlon, chỉ có vorlon hoạt động tốt.

Tôi chưa thử, nhưng proxy gỡ lỗi WebKit iOS (ios_webkit_debug_proxy / iwdp) được cho là cho phép bạn gỡ lỗi UIWebView từ xa. Từ README.md

Ios_webkit_debug_proxy (còn gọi là iwdp) cho phép các nhà phát triển kiểm tra MobileSafari và UIWebViews trên các thiết bị iOS thực và giả lập thông qua Giao diện gỡ lỗi Chrome DevTools và Giao thức gỡ lỗi từ xa Chrome. Các yêu cầu DevTools được dịch sang các cuộc gọi dịch vụ Thanh tra web từ xa của Apple.

Vorlon.JS có thể được sử dụng để gỡ lỗi từ xa iOS hoặc bất kỳ ứng dụng khách nào khác.

1. Chỉ cần cài đặt nó trên toàn cầu bằng cách sử dụng npm i -g vorlon
2. Bắt đầu máy chủ bằng cách sử dụng vorlon
3. Với máy chủ đang chạy, hãy mở http: // localhost: 1337 trong trình duyệt của bạn để xem bảng điều khiển Vorlon.JS
4. Bước cuối cùng là kích hoạt Vorlon.JS bằng cách thêm thẻ script này vào ứng dụng của bạn:
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. Tất cả các máy khách được kết nối, ví dụ iPhone, Android sẽ có sẵn trong danh sách khách hàng trên bảng điều khiển Vorlon.JS

Lưu ý rằng phương pháp này cũng có thể được sử dụng để gỡ lỗi các ứng dụng không chạy trên localhost bằng ngrok . Xem https://stackoverflow.com/a/45443203/2073920 để biết chi tiết.

Khước từ

Tôi chỉ là người dùng và tôi không liên kết với Vorlon.JS và ngrok

Bạn cũng cần phải tắt 'Duyệt web riêng tư'.

Cài đặt> Safari> Duyệt web riêng tư> TẮT

Ngay cả tôi đang tìm kiếm tính năng tương tự, và cho đến ngày hôm nay, nó vẫn chưa được thực hiện. Tôi có thể nghĩ ra hai lựa chọn, tuy nhiên,

1. Tôi nhận thấy rằng hành vi của Chrome và Safari khá giống nhau; Chrome thậm chí còn hỗ trợ Con quay hồi chuyển và các sự kiện liên quan khác được Safari hỗ trợ. Tôi hiện đang gỡ lỗi Ứng dụng web của mình bằng cách bật bảng điều khiển gỡ lỗi trên Safari (Thông qua cài đặt-> Safari)

2. Đồng thời thử Adobe Shadow, cho phép gỡ lỗi / kiểm tra và Đồng bộ hóa từ xa.

HTH.

Adobe Edge Inspect ( https://creative.adobe.com/products/inspect ) là một cách khác để gỡ lỗi tất cả các thiết bị di động của bạn IOS và Android (mặc dù không có Windows Phone). Nó sử dụng weinre để kiểm tra / thay đổi DOM từ xa. Đây không phải là phương pháp nhanh nhất, nhưng nó hoạt động trên Windows.

Có một lỗi mở trên Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

Thật không may, họ phụ thuộc vào Apple để mở API trong WKView để điều này xảy ra, sau đó có thể gỡ lỗi sẽ có sẵn từ Safari.

Tôi đang sử dụng remotebug-ios-webkit-adapter, hoạt động tốt với tôi với iOS và trình gỡ lỗi mở trong Chrome trên Windows 10.

Sẽ vui mừng nếu nó giúp một số Liên kết

Lưu ý: Tôi không có liên kết với những người sáng tạo Ghostlab Vanamco.

Điều quan trọng đối với tôi là có thể gỡ lỗi các sự cố cụ thể của Chrome, vì vậy tôi đã bắt đầu tìm ra thứ gì đó có thể giúp tôi với điều đó. Cuối cùng tôi đã vui vẻ ném tiền của mình vào Ghostlab 3 . Tôi có thể kiểm tra trình duyệt di động Chrome và Safari như thể tôi đang xem chúng trên máy tính để bàn của mình. Nó chỉ cho tôi một địa chỉ LAN để sử dụng cho mọi thiết bị tôi muốn gỡ lỗi. Mỗi ứng dụng sử dụng địa chỉ đó sẽ xuất hiện trong danh sách trong Ghostlab.

Rất khuyến khích.

Mở Safari máy tính để bàn iOS

Phát triển -> Chế độ thiết kế đáp ứng

Nhấp vào "Khác" trong thiết bị

Dán cái này: Mozilla / 5.0 (iPad; CPU OS 10_2_1 như Mac OS X) AppleWebKit / 602.1.50 (KHTML, như Gecko) CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

Sử dụng các công cụ kiểm tra Safari.

Tuyên bố miễn trừ trách nhiệm: Tôi làm việc tại BrowserStack. ^{[Xác nhận] rằng liệu có được phép đăng bài này không ( Tôi có thể đề xuất một sản phẩm của công ty đang làm việc không? )}

Gỡ lỗi Safari trên iOS (hiện tại không dành cho Chrome, hãy đọc trước để biết thêm chi tiết.)

Làm thế nào điều này hoạt động?

• Bạn cần bắt đầu phiên trên bất kỳ thiết bị thực nào (có trình giả lập nhưng bạn cần bắt đầu phiên trên thiết bị thực) trên BrowserStack, giả sử iPhone 6S - Safari / Chrome (chưa có devtools cho Chrome, nhưng đó là trên Lộ trình của chúng tôi)
• Nhập URL
• Bạn có thể kích hoạt DevTools để kiểm tra trang web được mở trên thiết bị từ xa BrowserStacks. Tôi đã chia sẻ màn hình cho cùng bên dưới.

Sử dụng DevTools với điện thoại thực

Di chuột qua các yếu tố, chỉnh sửa HTML, CSS giống như các trình duyệt devtools của trình duyệt máy tính để bàn.

Thực thi JavaScript trong điện thoại thực bằng DevTools

Chuyển sang Consoletab, thực thi mã JavaScript, kiểm tra console.log()đầu ra, v.v.

Tab mạng, kiểm tra các tiêu đề yêu cầu, phản hồi, v.v.

Hỗ trợ cho DevTools trên BrowserStack?

• DevTools có sẵn trên:

  • Thiết bị thực - iOS - Safari (DevTools cho iOS Chrome nằm trong Lộ trình của chúng tôi)
  • Thiết bị thực - Android - Chrome (Hiện tại chỉ có Chrome trên thiết bị Android)

• Trình duyệt máy khách cần phải là Chrome hoặc Firefox. Điều đó có nghĩa là bạn cần sử dụng trình duyệt Chrome hoặc Firefox trên MacOSX hoặc Windows để sử dụng DevTools của DeviceStack Real Device.

Lưu ý: Bạn cần mua gói để thử nghiệm trên tất cả các thiết bị thực, với tư cách là người dùng miễn phí, bạn sẽ nhận được một vài thiết bị Real Android (bao gồm máy tính bảng) và vài thiết bị Real iOS (bao gồm cả máy tính bảng). Ngoài ra, nhấn mạnh vào từ Real Devices vì chúng cũng cung cấp trình giả lập.

Chi tiết hơn về điều này, vui lòng tham khảo phần DevTools trên trang Tính năng di động .