Làm thế nào để xem các lỗi javascript của ứng dụng PhoneGap trong Xcode?

Tôi muốn gỡ lỗi ứng dụng PhoneGap của mình trong Xcode, nhưng Bảng điều khiển của nó không thể hiển thị lỗi javascript.

Cách tốt nhất để xem và gỡ lỗi JavaScript trong Ứng dụng Cordova / PhoneGap của bạn là gắn Trình kiểm tra web từ trình duyệt Safari vào Chế độ xem web trong Ứng dụng iOS của bạn (nhưng, như Tom Clarkson đã đề cập, bạn sẽ cần ít nhất iOS 6 ).

• Trên iPad hoặc iPhone của bạn, hãy sử dụng ứng dụng Cài đặt để bật Trình kiểm tra web trong Cài đặt nâng cao cho Safari
• Kết nối thiết bị của bạn với máy Mac qua USB (sau đó nó sẽ xuất hiện trong menu Develop của Safari)
• Khởi động ứng dụng của bạn
• Điều hướng đến Chế độ xem web bạn muốn gỡ lỗi
• Trên Mac, từ menu Safari Develop, hãy chọn tên thiết bị của bạn và Ứng dụng (trang HTML của nó) từ menu phụ
• Cửa sổ Trình kiểm tra Web sẽ mở ra, cho phép bạn duyệt qua DOM, đặt các điểm ngắt, v.v.

Tài liệu của Táo về cách thiết lập điều này

Hướng dẫn kỹ lưỡng của bên thứ ba

Ngoài ra, bạn có thể kết nối Trình kiểm tra web của Chrome với thiết bị iOS sau khi cài đặt Proxy gỡ lỗi WebKit của iOS . Điều này cũng mở ra khả năng kiểm tra từ Linux hoặc Windows.

Quyền truy cập từ xa vào HTML, CSS và JavaScript của iOS của bạn ngày nay đã trở nên linh hoạt hơn vì bạn có thể cài đặt RemoteDebug iOS WebKit Adapter trên đầu trang của Proxy gỡ lỗi nói trên. Vì bộ điều hợp này chuyển Giao thức gỡ lỗi từ xa WebKit sang Giao thức gỡ lỗi của Chrome , những giao thức này (trên tất cả các nền tảng được hỗ trợ của chúng) trở nên khả dụng như các công cụ kiểm tra và gỡ lỗi thay thế:

• Mã Visual Studio
• Chrome DevTools
• Trình gỡ lỗi Mozilla

BTW, gỡ lỗi từ xa với Trình kiểm tra Web Safari hoạt động ngay cả khi kết hợp với Trình mô phỏng iOS.

Phiên bản tối thiểu của Desktop Safari trên mỗi phiên bản iOS

Đối với mỗi phiên bản iOS, bạn sẽ cần một phiên bản Desktop Safari tối thiểu cụ thể để sử dụng tính năng kiểm tra web từ xa, hãy xem danh sách bên dưới.

hệ điều hanh 6

Safari 6+

IOS 7

Safari 6.1+

iOS 8

Safari 7.1+

iOS 9

Safari 8+

iOS 10

Safari 9 + / 10 +? Hãy bình luận; luôn thử Xem trước công nghệ Safari

iOS 11

Safari 11+

iOS 12

Safari 12+

Dán đoạn mã sau vào đâu đó gần đầu tài liệu của bạn để nó được thực thi trước bất kỳ JavaScript nào khác của bạn.

<script type="text/javascript">
    window.onerror = function(message, url, lineNumber) {
        console.log("Error: "+message+" in "+url+" at line "+lineNumber);
    }
</script>

Và tận hưởng việc xem chi tiết các lỗi Javascript của bạn trong cửa sổ bảng điều khiển Xcode.

CẬP NHẬT: Kỹ thuật trên sẽ ghi lại các lỗi như các biến không xác định. Nhưng các lỗi cú pháp như thiếu dấu phẩy vẫn sẽ khiến toàn bộ tập lệnh bị hỏng mà không cần ghi lại bất kỳ thứ gì.

Do đó, bạn nên thêm phần sau vào đầu hàm onDeviceReady của mình :

console.log('Javascript OK');

Nếu bạn không thấy "JavaScript OK" xuất hiện trong cửa sổ nhật ký của mình khi ứng dụng khởi chạy, thì có nghĩa là bạn đã gặp lỗi cú pháp ở đâu đó.

Để tiết kiệm việc tìm kiếm các dấu phẩy bị thiếu, điều dễ dàng nhất là dán mã của bạn vào trình xác thực Javascript, chẳng hạn như trình này:

http://www.javascriptlint.com/online_lint.php

và để nó tìm ra lỗi cho bạn.

Hy vọng rằng điều đó sẽ giảm bớt một số khó khăn khi gỡ lỗi.

Lưu ý rằng với 0.9.2 (phát hành hôm nay), console.log đã được chuẩn hóa trên các nền tảng để ghi nhật ký (với debug.log không được dùng nữa).

Có một chức năng có sẵn trên WebView dành cho máy tính để bàn không được hiển thị trong UIWebView của iOS sẽ bắt được tất cả các lỗi (Tôi đang cố gắng hack chức năng đó vào một plugin, sử dụng các API riêng tư, nhưng plugin sẽ chỉ dành cho phát triển ), nhưng bây giờ hãy làm những gì Kris đã đề xuất ở trên và thử bắt khối vào mã và sử dụng console.log

Để nhanh chóng nắm bắt các lỗi cú pháp có thể xảy ra, khi phát triển, tôi đã tải trang trong Safari trên máy tính để bàn và nhanh chóng làm mới nó với bảng điều khiển lỗi webkit có thể xem được.

debug.log sẽ gửi tin nhắn đến bảng điều khiển XCode trong Phonegap (cho phép bạn ghi lại kết quả của một ngoại lệ hoặc thực hiện một số gỡ lỗi), tuy nhiên, bạn đúng là bạn phải gỡ lỗi các lỗi javascript khác trong Safari (trên máy tính để bàn hoặc trên iPhone đã bật Bảng điều khiển gỡ lỗi). Tôi vẫn chưa tìm thấy lỗi Javascript, nguyên nhân là do chạy trên iPhone và không xuất hiện khi gỡ lỗi bằng bảng điều khiển được bật trong Safari (mặc dù tôi biết có một vài điểm khác biệt giữa WebView và Safari trên iPhone).

Tôi vừa tình cờ gặp Weinre

Đó là một trình gỡ lỗi javascript từ xa cho phonegap. Bạn có thể thiết lập máy chủ Weinre của riêng mình hoặc sử dụng máy chủ tại http://debug.phonegap.com/

Nó dường như hoạt động tốt - rất ấn tượng cho đến nay.

Nếu bạn sử dụng iOS 6, bạn có thể chỉ cần đính kèm trình kiểm tra web safari (trên menu phát triển của safari trên máy tính để bàn) vào ứng dụng của mình và nhận gỡ lỗi javascript đầy đủ.

Có một số lĩnh vực mà nó bị hạn chế một chút - lỗi khởi động và lệnh gọi plugin - nhưng nó hoạt động tốt cho hầu hết mọi thứ khác.

Để làm cho công việc gỡ lỗi javascript trong Xcode, tôi sẽ xem xét những điều sau.

http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-application-using-xcode-console/

Theo như cách khắc phục sự cố bổ sung ...
Để bắt đầu, bạn có thể chạy ứng dụng trong safari trên máy tính của bạn và sử dụng trình gỡ lỗi của safari (hoặc chrome vì cả hai đều đang chạy các công cụ kết xuất tương tự). Điều này sẽ không ảnh hưởng đến các lỗi logic nâng cao và nhiều vấn đề api của bạn nhưng ít nhất nó sẽ giúp khắc phục nhiều sự cố (javascript cơ bản, HTML5, v.v.).

Để xem tất cả các lỗi trong bảng điều khiển javascript, tôi đồng ý sử dụng trình xử lý sự kiện này

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln );};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

Tuy nhiên, trừ khi bạn đã cài đặt plugin cordova, nó sẽ không hiển thị trên "bảng điều khiển" XCodes. Đi tới thư mục dự án của bạn và nhập vào:

? cordova plugin add cordova-plugin-console

Điều này sẽ cho phép lệnh javascript 'console.log (' một số chuỗi ') hiển thị trên XCode.

Lưu ý rằng bạn sẽ cần git, vv ... nhưng nếu bạn đang chỉnh sửa dự án phonegap của mình bằng xcode, hầu hết bạn sẽ có nó!

PS Đảm bảo rằng bạn đã cài đặt trình cắm tập lệnh cordova.js trước khi sử dụng console.log

<script type="text/javascript" src="/cordova.js"></script>

Đặt cái này vào đầu index.html của bạn

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln);};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

Đây là một cách đơn giản phù hợp với tôi:

• cd vào thư mục chứa tệp index.html của bạn trong terminal

• Khởi động máy chủ http bằng python bằng cách gọi (tôi đã sử dụng python 2.7):

  python -m SimpleHTTPServer

• Xem trang trong safari bằng cách nhập địa chỉ của HTTPServer vào trình duyệt, đối với tôi URL là:

  http://0.0.0.0:8000/
  

• Mở công cụ dành cho nhà phát triển:

  Trong chrome, đây là alt + command + i. Xem tab bảng điều khiển, có thể cần phải làm mới trang.

  Trong Safari: Safari -> Preferences -> Advanced -> chọn "Show Develop Menu". Menu phát triển -> Hiển thị bảng điều khiển lỗi (hoặc alt + lệnh + c). Làm mới trang. Nhấn CTRL + 5 sẽ mở tab sự cố.