Có một giải pháp thực sự để gỡ lỗi các ứng dụng cordova [đã đóng]

Tôi đã dành hai ngày qua để cố gắng tìm ra cách gỡ lỗi một ứng dụng HTML5 mà tôi đã tạo bằng Cordova 3.2 và triển khai lên thiết bị Android 2.3. Tất cả các bài viết / bài đăng tôi đã xem đều cung cấp các bản hack thay vì các giải pháp thực tế :( và hầu hết thời gian, không có bài nào trong số đó hoạt động cho trường hợp của tôi, gỡ lỗi các kiểu css và mã Angularjs trong ứng dụng của tôi ..

Cho đến nay tôi đã thử nghiệm;

gỡ lỗi.phoneg.com

Tôi đã chèn tập lệnh vào index.htmltệp sau đó truy cập URL được tạo trong debug.phoneg.com nhưng không có gì xảy ra; chỉ một trang trống.

Weinre

Hầu hết các bài viết tôi tìm thấy đều chỉ ra kho lưu trữ Github lỗi thời có chứa tệp Jar .. nhưng nó không được tìm thấy :(

Kiểm tra cạnh

Nó hoạt động và hiển thị trang web tôi đang duyệt trên PC bên trong điện thoại di động .. Nhưng vấn đề là nó sử dụng một số trình duyệt tích hợp (hoặc trình giả lập) khác so với trang chạy ứng dụng phonegap; nên kết quả không chính xác.

Trình giả lập Chrome

Tương tự như Edge kiểm tra; nó không cho phép xem bộ web thực sự v530 được bán kèm với Android 2.3.

Giải pháp trong mơ

Giải pháp hoàn hảo sẽ là một tiện ích mở rộng cho Google Chrome (máy tính để bàn) cho phép bạn chuyển đổi trình duyệt máy tính để bàn sang trình duyệt tương tự được tìm thấy trong các nền tảng Android 2.3; không giả lập không hack, chỉ cần trình duyệt với web-kit v 530.

Thật không may, giải pháp như vậy không tồn tại :( hoặc tôi sai?

Bất kỳ đề xuất?

CHO ANDROID:

Bạn chỉ cần bật trình gỡ lỗi từ xa USB USB trong thiết bị Android của bạn và cắm cáp USB. Sau đó mở ứng dụng của bạn trong thiết bị. Chrome sẽ phát hiện trình duyệt từ xa và bạn có thể thấy bảng điều khiển theo cách tương tự như bạn thấy khi sử dụng Chrome cục bộ.

Sử dụng liên kết này: chrome://inspect/#devicestrong trình duyệt Chrome (bạn sẽ phải dán nó vào thanh điều hướng).

Nếu ứng dụng của bạn gặp sự cố trong thiết bị, bạn chỉ cần xem nhật ký của bảng điều khiển trong trình duyệt của mình và xem điều gì sẽ xảy ra. Bạn cũng có thể thêm chức năng, thay đổi biến và ghi đè các chức năng theo cách tương tự như chúng tôi thực hiện với trình duyệt cục bộ của mình.

Đọc bài viết này để biết thêm thông tin về các bước để thực hiện.

Điều này sẽ chỉ hoạt động với các thiết bị chạy Android 4.4 trở lên.

CHO iOS:

Sử dụng Safari cho iOS, làm theo các bước sau:

1.Trong thiết bị iOS của bạn, hãy đi tới Cài đặt> Safari> Nâng cao> Trình theo dõi web để bật Trình theo dõi web

2.Mở Safari trên thiết bị iOS của bạn.

3. Kết nối nó với máy tính của bạn thông qua USB.

4.Mở Safari trên máy tính của bạn.

5. Trong menu của Safari, đi đến Phát triển và, tìm tên thiết bị của bạn.

6.Chọn tab bạn muốn gỡ lỗi.

ĐỂ Ý

Câu trả lời này đã cũ (tháng 1 năm 2014), nhiều giải pháp sửa lỗi mới có sẵn kể từ đó.

Tôi cuối cùng cũng hiểu cách nó vận hành! sử dụng weinre và cordova (không xây dựng Phonegap) và để tiết kiệm rắc rối cho các nhà phát triển trong tương lai, những người có thể gặp phải vấn đề tương tự, tôi đã thực hiện một hướng dẫn trên YouTube ;)

Nếu bạn có thể sử dụng thiết bị Android 4.4 trở lên, thì bạn có thể sử dụng Chrome Remote Debugging ngay cả trên WebView nội bộ của ứng dụng. Đây là một trình gỡ lỗi tốt hơn nhiều so với Weinre, nhưng điều quan trọng là sử dụng phiên bản Android gần đây.

Các bản dựng Cordova gần đây tự động kích hoạt loại gỡ lỗi này miễn là bản dựng gỡ lỗi (nó đã bị tắt trong các bản dựng - phát hành).

Điều tốt nhất cho tôi là đính kèm trình gỡ lỗi Chrome.

Để làm điều đó, hãy chạy ứng dụng của bạn trong trình giả lập hoặc thiết bị (sử dụng giả lập $ cordova)

sau đó, mở Google Chrome và đi đến chrome://inspect/

Bạn sẽ thấy một danh sách với các ứng dụng đang chạy. Ứng dụng của bạn nên ở đó. Nhấp vào "kiểm tra".

Một cửa sổ mới sẽ mở ra với các công cụ dành cho nhà phát triển. Ở đó bạn có thể nhấp vào "bàn điều khiển" để kiểm tra lỗi

Nếu ứng dụng của bạn đang chạy Cordova 3.3+ và thiết bị của bạn đang chạy Android 4.4 trở lên thì bạn có thể sử dụng Chrome Remote Webview Debugging để gỡ lỗi cho ứng dụng Cordova của bạn.

Để có thể làm điều đó, trước tiên bạn phải bật gỡ lỗi USB trên điện thoại của mình.

Sau đó mở tab "kiểm tra thiết bị". Trong Chrome, đi tới Cài đặt > Công cụ khác > Kiểm tra thiết bị .

Nếu bạn khởi chạy ứng dụng của mình trên thiết bị trong khi ứng dụng được kết nối với máy tính, Webview sẽ xuất hiện trong danh sách thiết bị. Nhấp vào liên kết "Kiểm tra" của Webview của bạn và Công cụ gỡ lỗi cho Webview của bạn sẽ xuất hiện.

Dưới đây là một bài viết giải thích đầy đủ về cách thực hiện: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

Bạn đã thử 'GapDebug' chưa? Nó miễn phí.

Nó dường như tích hợp các phiên bản của Safari Webkit Inspector và Chrome Dev Tools để cung cấp trải nghiệm gỡ lỗi tích hợp trên OS X và Windows.

Một tùy chọn khác là Visual Studio, có hỗ trợ phát hành trước để gỡ lỗi các ứng dụng Cordova :

Kinh nghiệm sửa lỗi thống nhất . Phát triển đa nền tảng thường yêu cầu một công cụ khác nhau để gỡ lỗi từng thiết bị, trình giả lập hoặc giả lập. Các công cụ khác nhau có nghĩa là quy trình công việc khác nhau và mất năng suất mỗi khi bạn chuyển đổi thiết bị. Với Visual Studio, bạn có thể sử dụng cùng các công cụ gỡ lỗi đẳng cấp thế giới cho tất cả các mục tiêu triển khai, bao gồm Windows, trình giả lập Android, các thiết bị Android đính kèm, thiết bị iOS và trình giả lập và trình giả lập Apache Ripple.

Giờ đây, Microsoft đã phát hành phiên bản Visual Studio Community miễn phí , bạn có thể dùng thử miễn phí. Bạn sẽ cần tải xuống cả Visual Studio và Visual Studio Tools cho Apache Cordova .

Theo tôi biết, công cụ hiệu quả duy nhất để gỡ lỗi thực sự trong các ứng dụng Cordova cho nền tảng Android từ 2.2 đến 4.3 là jshybugger . Weinre là một thanh tra, không phải là một trình sửa lỗi. JsHybugger cung cấp mã cho phép bạn gỡ lỗi bên trong WebView của Android.

Chỉ muốn thêm rằng bạn có thể gỡ lỗi các ứng dụng Android bằng Genymotion . Đó là cách nhanh hơn sau đó là trình giả lập chứng khoán Android.

Bạn có thể sử dụng Intel XDK IDE để phát triển và gỡ lỗi trên trình giả lập hoặc trên thiết bị thực

Tôi cũng thấy các công cụ RC của Visual Studio 2015 cho cordova rất tốt, với trình giả lập Ripple

Nếu bạn sử dụng bản dựng phonegap, có một tùy chọn để bật gỡ lỗi.

Đối với các bản dựng cục bộ, bạn có thể cài đặt weinre với npm: https://npmjs.org/package/weinre

Và liên kết đến các tài liệu hữu ích: http://people.apache.org/~pmuellr/weinre/docs/latest/

Và có một thứ gọi là gỡ lỗi từ xa chrome nhưng tôi không biết nhiều về nó, bạn có thể xem bài viết của Raymond Camden: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache- Cordova-33-và-Gỡ lỗi từ xa cho Android

Tài liệu cho gỡ lỗi từ xa chrome: https://developers.google.com/chrome-developer-tools/docs/remote-debugging (nếu tôi hiểu chính xác, bạn cần một thiết bị Android có chrome làm trình duyệt mặc định) Có thể là gần nhất với giấc mơ của bạn giải pháp?

Trên Android 4.4+ w / SDK được cài đặt:

adb logcat chromium:D SystemWebViewClient:D \*:S

Nếu bạn đang sử dụng Cordova 3.3 trở lên và thiết bị của bạn đang chạy Android 4.4 trở lên, bạn có thể sử dụng 'Gỡ lỗi từ xa trên Android với Chrome'. Hướng dẫn đầy đủ có tại đây:

https://developer.chrome.com/devtools/docs/remote-debugging

Tóm tắt:

• Cắm thiết bị vào máy tính để bàn của bạn bằng cáp USB
• Bật gỡ lỗi USB trên thiết bị của bạn (trên thiết bị của tôi, đây là trong Cài đặt> Khác> Tùy chọn nhà phát triển> Gỡ lỗi USB)

Hoặc , nếu bạn đang sử dụng Cordova 3.3+ và không có thiết bị vật lý với 4.4, bạn có thể sử dụng trình giả lập sử dụng Android 4.4+ để chạy ứng dụng thông qua trình giả lập trên máy tính để bàn của bạn.

• Chạy ứng dụng Cordova của bạn trên thiết bị hoặc trình giả lập
• Trong Chrome trên máy tính để bàn của bạn, hãy nhập chrome: // tests / # thiết bị vào thanh địa chỉ
• Thiết bị / trình giả lập của bạn sẽ được hiển thị cùng với mọi thiết bị được nhận dạng khác được kết nối với máy tính của bạn và trong thiết bị của bạn sẽ có thông tin chi tiết về Cordova 'WebView' (về cơ bản là ứng dụng Cordova của bạn), đang chạy trên thiết bị / trình giả lập ( cách thức hoạt động của Cordova là về cơ bản nó tạo ra một cửa sổ 'trình duyệt' trên thiết bị / trình giả lập của bạn, trong đó có một 'WebView' là ứng dụng HTML / JavaScript đang chạy của bạn)
• Nhấp vào liên kết 'Kiểm tra' trong phần 'WebView' nơi bạn thấy thiết bị / trình giả lập được liệt kê. Điều này mang đến các công cụ dành cho nhà phát triển Chrome hiện cho phép bạn gỡ lỗi ứng dụng của mình.
• Chọn tab 'nguồn' của các công cụ dành cho nhà phát triển Chrome để xem JavaScript mà ứng dụng Cordova của bạn trên thiết bị / trình giả lập hiện đang chạy. Bạn có thể thêm các điểm dừng trong JavaScript cho phép bạn gỡ lỗi mã của mình.
• Ngoài ra, bạn có thể sử dụng tab 'bảng điều khiển' để xem bất kỳ lỗi nào (sẽ được hiển thị màu đỏ) hoặc ở dưới cùng của bảng điều khiển, bạn sẽ thấy dấu nhắc '>'. Tại đây, bạn có thể nhập bất kỳ biến hoặc đối tượng nào (ví dụ: các đối tượng DOM) mà bạn muốn kiểm tra giá trị hiện tại và giá trị sẽ được hiển thị.

Đây là giải pháp sử dụng Phonegap Build. Thêm phần sau vào tệp config.xml của bạn để có thể kiểm tra với Chrome Remote Webview Debugging.

Trước tiên, hãy đảm bảo thẻ widget của bạn chứa xmlns: android = "http://schemas.android.com/apk/res/android"

<widget 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:gap="http://phonegap.com/ns/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="me.app.id" 
    version="1.0.0">

Sau đó thêm vào như sau

<gap:config-file platform="android" parent="/manifest">
     <application android:debuggable="true" />
</gap:config-file>

Nó hoạt động với tôi trên Nexus 5, Phonegap 3.7.0.

<preference name="phonegap-version" value="3.7.0" />

Xây dựng ứng dụng trong Phonegap Build, cài đặt APK, kết nối điện thoại với USB, bật gỡ lỗi USB trên điện thoại của bạn sau đó truy cập chrome: // tests.

Nguồn: https://www.genuitec.com/products/gapdebug/learning-center/configuration/

Sử dụng màn hình thiết bị Android

Trình giám sát thiết bị Android đi kèm các gói với sdk android mà bạn đã cài đặt trước đó. Trong màn hình thiết bị, bạn có thể thấy toàn bộ nhật ký thiết bị, ngoại lệ, thông báo mọi thứ. Điều này rất hữu ích để gỡ lỗi sự cố ứng dụng hoặc bất kỳ vấn đề nào khác. Để chạy cái này, hãy vào công cụ / thư mục bên trong android sdk của bạn / var / android-sdk-linux / tools. Sau đó chạy như sau

chmod +x monitor
./monitor

Nếu bạn đang ở trên windows, hãy mở trực tiếp tệp Monitor.exe. Có một tab bên dưới Nhật ký LogCat, nơi bạn sẽ thấy tất cả các thông báo liên quan đến thiết bị. Bạn sẽ thấy tất cả các thông báo ở đây, bao gồm các trường hợp ngoại lệ của thiết bị Android không hiển thị trên thiết bị kiểm tra chrome. Hãy chắc chắn tạo các bộ lọc bằng cách sử dụng tab Đăng nhập + Đăng nhập trong tab logcat để bạn chỉ nhìn thấy các thông báo cho ứng dụng của mình.

Nguồn: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/

Bạn cũng có thể gỡ lỗi với chrome ứng dụng html5 của mình

Tôi tạo một .bat để mở chrome trong chế độ gỡ lỗi

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security

Bạn có thể gỡ lỗi Ứng dụng Cordova Android được cài đặt trên điện thoại từ máy tính của bạn từ xa qua cáp USB (bạn cũng có thể nhấp vào ứng dụng web từ xa như thể bạn đang xem ứng dụng web từ máy tính của mình) với "Gỡ lỗi từ xa Chrome". Bạn cũng có thể gỡ lỗi ứng dụng web được xem trong trình duyệt Stock Android hoặc Chrome trên Android theo cách này.

1. Bật chế độ nhà phát triển trên thiết bị Android của bạn (đi tới cài đặt -> về điện thoại -> nhấn 7x vào số bản dựng).

2. Kết nối máy tính của bạn với điện thoại của bạn thông qua cáp USB.

3. Ăn trưa Chrome trên máy tính của bạn và điều hướng đến chrome: // kiểm tra và nhấp vào nút "Kiểm tra" bên cạnh thiết bị từ xa mà bạn muốn gỡ lỗi (trong tab "Thiết bị"). HOẶC nhấp chuột phải vào Chrome trên máy tính của bạn -> Kiểm tra -> Chi phí và kiểm soát DevTools (3 chấm dọc - góc trên cùng bên phải của công cụ dành cho nhà phát triển) -> Công cụ khác -> Thiết bị từ xa -> bên dưới Thiết bị ở bên trái, nhấp vào thiết bị mà bạn được kết nối qua USB -> nhấp vào nút Kiểm tra cho ứng dụng bạn muốn.

4. Sau đó nhấp vào "Bảng điều khiển" và bạn có thể gỡ lỗi JavaScript theo cách tương tự như trên ứng dụng web thông thường với các công cụ dành cho nhà phát triển Chrome.

Tôi đã yêu Weinre! Làm thế nào để sử dụng nó:

Đầu tiên, đặt trên của bạn index.html(đảm bảo app.settings.debugUrlđược đặt trước này):

  <!-- Weinre debugging -->
  <script type="text/javascript">
    if (app.settings.debugUrl) {
      document.addEventListener("DOMContentLoaded", function(event) { 
        var s = document.createElement("script")
        s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
        document.getElementsByTagName("body")[0].appendChild(s)
      }); 
    }   
  </script>

Sau đó:

• Tải về: sudo npm install -g weinre
• chạy: weinre --boundHost -all-
• mở trên trình duyệt: http: // localhost: 8080 / client / # nặc danh
• xem mục tiêu xuất hiện khi bạn mở ứng dụng

Dựa trên http://www.broken-links.com/2013/06/11/remote-debugging-with-weinre/

Các thiết bị có android <= 4.0.4 cần thêm plugin https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt