Hướng dẫn debug javascript on ios - gỡ lỗi javascript trên iOS

Gỡ lỗi JavaScript là một phần không thể tránh khỏi của phát triển web, và không phải là phần đẹp nhất. Các công việc gỡ lỗi dường như luôn xuất hiện khi bạn đã bị chôn vùi dưới đống công việc, và một đồng đội đã đưa bạn về một vấn đề bị bỏ qua trong thử nghiệm và đã gây ra sự thất vọng kể từ lần phát hành cuối cùng của bạn.

Đó là lý do tại sao nó giúp chuẩn bị cho sự kiện đó và được trang bị các công cụ của nhà phát triển để giúp bạn gỡ lỗi nhanh hơn.

Nếu bạn đã tạo một trang web thân thiện với thiết bị di động và một cái gì đó đang phát ra-giả sử, nút gửi của mẫu liên hệ của bạn không hoạt động trên thiết bị di động-bạn không có sự xa xỉ chỉ là nhấn tùy chọn + ⌘ + C và Tìm kiếm lỗi trong bảng điều khiển trình duyệt. Đó là lý do tại sao bạn cần học cách gỡ lỗi di động trên máy tính để bàn!Option + ⌘ + C and looking for the error in the browser console. That’s why you need to learn how to debug mobile on desktop!

Bài viết này sẽ tập trung vào việc gỡ lỗi mã JavaScript được chạy trong Safari trên các thiết bị iOS 6+ bằng Trình kiểm tra web Safari Desktop.

.

Những gì bạn sẽ học được từ bài viết này

Biết cách gỡ lỗi mã JavaScript được chạy trên thiết bị iOS thông qua các công cụ phát triển máy tính để bàn Safari là một lợi thế rất lớn và có thể giảm đáng kể thời gian gỡ lỗi. Đã qua rồi những ngày sử dụng các cuộc gọi cảnh báo để gỡ lỗi.

Chúng tôi sẽ sử dụng Raygun để tìm dấu vết ngăn xếp và dòng mã xảy ra lỗi. Bạn có thể đăng ký dùng thử Raygun 14 ngày miễn phí tại đây.

Các bước chúng tôi sẽ làm theo là:

1. Giới thiệu dự án mẫu
2. Phân tích báo cáo lỗi Raygun
3. Thiết lập và kết nối thiết bị của bạn
4. Khám phá giải phẫu của các công cụ dev
5. Thêm điểm dừng vào mã của bạn
6. Bước qua mã của bạn
7. Xác định trạng thái ứng dụng của bạn
8. Sửa lỗi!

Vì vậy, hãy để Lặn lặn vào!

Bước 1: Giới thiệu dự án mẫu

Để chứng minh cách gỡ lỗi ứng dụng với thanh tra web Safari, chúng tôi sẽ sử dụng một hình thức thêm đơn giản. Biểu mẫu này cho phép bạn nhập tên đầu tiên, giữa và cuối cùng. Khi nhấp vào nút ‘Lưu, biểu mẫu sẽ thực hiện một chút xử lý và dữ liệu sẽ được gửi đến máy chủ (tưởng tượng) của bạn.

Mã cho biểu mẫu này có ba chức năng:

1. Một người xử lý nhấp chuột
2. Một hàm chuỗi viết hoa
3. Một chức năng lưu

var saveButton = document.getElementById('saveButton'); var firstNameField = document.getElementById('firstName'); var middleNameField = document.getElementById('middleName'); var lastNameField = document.getElementById('lastName'); function onSaveButtonClick(){ var firstName = firstNameField.value; var middleName = middleNameField.value; var lastName = lastNameField.value; // capitalise the names firstName = capitalizeString(firstName); middleName = capitalizeString(middleName); lastName = capitalizeString(lastName); doSave(firstName, middleName, lastName); } function capitalizeString(value){ return value.split('')[0].toUpperCase() + value.slice(1); } function doSave(firstName, middleName, lastName){ alert(firstName + ' ' + middleName + ' ' + lastName + ' has been saved!'); } saveButton.addEventListener('click', onSaveButtonClick);

Thật không may, sau khi vận chuyển điều này vào sản xuất vào cuối tối thứ Sáu, bạn bắt đầu thấy các báo cáo lỗi xuất hiện trong bảng điều khiển của bạn. Có một lỗi, và bạn cần sửa nó. Nhanh.

Bước 2. Phân tích Báo cáo lỗi Raygun

Các báo cáo lỗi đến Raygun có rất nhiều thông tin bạn có thể sử dụng để tìm và sửa lỗi, vì vậy hãy để Lôi xem xét những gì chúng tôi đang xử lý.

Thông tin bạn sẽ cần để gỡ lỗi lỗi được đặt trong mô -đun StackTrace.

Phần tin nhắn của StackTrace là một cái nhìn tổng quan ngắn về những gì sai. Trong trường hợp này, phương pháp toUpperCase đang được gọi trên một giá trị không xác định.

StackTrace cho bạn biết lỗi xảy ra lỗi ở đâu và chuỗi các cuộc gọi chức năng dẫn đến đó. Như bạn có thể thấy trong ảnh chụp màn hình ở trên, lỗi đã xảy ra trong hàm capitalizeString trên dòng 20 của tệp index.js.

Biết dòng nào đã kích hoạt lỗi có nghĩa là bạn có thể nhảy thẳng đến nơi xảy ra lỗi và bắt đầu đào sâu vào những gì đã gây ra vấn đề.

Ngay cả khi bạn làm xáo trộn các tệp JavaScript của mình khi triển khai bằng cách sử dụng WebPack hoặc các công cụ bó khác, Raygun cũng có thể hiểu phiên bản Minified bằng cách sử dụng Sourcemaps và giúp bạn tìm thấy thủ phạm ngay lập tức.

Bước 3: Thiết lập và kết nối thiết bị của bạn

Trước khi chúng tôi có thể bắt đầu sử dụng Thanh tra web để gỡ lỗi ứng dụng của mình, trước tiên, chúng tôi phải bật cả trình duyệt iOS và OSX để phát triển.

Bật thanh tra web trên iOS

Trên thiết bị iOS của bạn điều hướng đến ứng dụng Cài đặt và cuộn xuống và chọn mục Safari.

Bên trong màn hình Cài đặt Safari cuộn xuống dưới cùng và chọn tùy chọn nâng cao. Sau đó, trong phần nâng cao, hãy chuyển đổi tùy chọn Thanh tra web trên mạng.

Với thiết lập thiết bị của bạn, chúng tôi cần khởi chạy Safari trên macOS và bật menu phát triển. Mở hộp thoại Tùy chọn Safari Safari bằng cách nhấp vào mục menu của Safari Safari và chọn tùy chọn của Cameron.

Bên trong hộp thoại Tùy chọn, hãy chuyển đến tab nâng cao và sau đó kiểm tra tùy chọn menu phát triển của SHOW trong tùy chọn thanh menu ở phía dưới.

Bây giờ bạn có thể đóng hộp thoại Tùy chọn.

Kết nối thiết bị của bạn

Để cho phép MacOS Safari giao tiếp với thiết bị iOS của bạn, chúng tôi cần kết nối nó với máy tính của bạn thông qua cáp USB tiêu chuẩn.

Mở ứng dụng ví dụ

Cuối cùng, hãy để mở ứng dụng web ví dụ trên thiết bị iOS của bạn trong tab Safari mới. Với điều đó, chúng tôi đã sẵn sàng để đi!

Bước 4: Khám phá giải phẫu của Thanh tra web

Bây giờ các trình duyệt Safari đã sẵn sàng và thiết bị của chúng tôi được kết nối để chúng tôi có thể mở Thanh tra web.

Mở menu phát triển trên mạng và bạn sẽ thấy một mục gần đỉnh hiển thị tên của thiết bị của bạn (ví dụ: Jeff Jeff Jeff iPhone). Di chuột trên mục này để menu trượt mở. Menu mới sẽ hiển thị tất cả các tab mở trong Mobile Safari và thanh tra web có thể được kết nối. Nhấp vào mục liên quan đến ứng dụng ví dụ.

Thanh tra web bây giờ sẽ mở và chúng tôi đã sẵn sàng để gỡ lỗi. Thanh tra web mà bạn thấy bây giờ giống hệt với cái bạn sẽ thấy nếu bạn đã mở nó để gỡ lỗi từ một trang trong Desktop Safari, đó chỉ là một ví dụ độc lập chỉ vào một tab mở trên thiết bị iOS của bạn.

Trong cửa sổ Thanh tra Web, tab Console sẽ hoạt động (nếu nó không phải là, chọn nó). Tab này cho phép bạn thực thi mã JavaScript tùy ý bất cứ lúc nào hoặc để xem bất kỳ đầu ra nào từ các cuộc gọi console.log.

Hãy thử nhập alert('Hello!') và nhấn enter - bạn sẽ thấy cảnh báo xuất hiện ngay lập tức.

Tab Console là một công cụ gỡ lỗi có giá trị vì bạn có thể sử dụng nó như một cào để thử mã và đánh giá các biến khi bạn chẩn đoán vấn đề của mình.

Để gỡ lỗi mã, trước tiên bạn cần có khả năng điều hướng thông qua mã nguồn của bạn trong trình kiểm tra web. Bạn làm điều này trong tab Nguồn.

Nửa dưới của khung bên trái bên trong tab này có một danh sách tất cả các tệp nguồn được tải vào trang. Bạn có thể nhấp vào bất kỳ tên tệp nào và nội dung được hiển thị trong khung trung tâm. Bạn có thể mở rộng một khung bổ sung chứa các công cụ gỡ lỗi bằng cách nhấp vào nút ở phía trên bên phải của tab.

Nếu bạn có nhiều tệp, bạn có thể tìm kiếm chúng bằng cách sử dụng CMD-P trên macOS và sau đó bắt đầu nhập tên của tệp.

Trong ứng dụng, bạn biết vấn đề nằm trong tệp index.js, vì vậy hãy chọn nó từ danh sách bên trái để xem nội dung của nó.

Bước 5: Thêm điểm dừng vào mã của bạn

Bây giờ bạn có thể xem mã của mình, chúng tôi muốn có thể bước qua nó một dòng tại một thời điểm để xem nơi mọi thứ đi sai. Để làm điều này, chúng tôi sử dụng điểm dừng. Các điểm dừng là điểm đánh dấu tại các điểm cụ thể trong mã dừng thực thi để bạn có thể kiểm tra trạng thái của mã tại thời điểm đó và tiếp tục thực hiện từng dòng.

Có một vài cách khác nhau để thêm điểm dừng:

Điểm dừng dòng

Cách phổ biến nhất để thêm điểm dừng là tìm dòng cụ thể mà bạn muốn dừng lại và thêm nó ở đó. Điều hướng đến tệp và dòng bạn quan tâm và nhấp vào số dòng. Một điểm đánh dấu màu xanh sẽ được thêm vào dòng đó và thực thi sẽ dừng mỗi khi nó đạt được dòng mã này. Trong ảnh chụp màn hình bên dưới, nó sẽ dừng trên dòng 7 của index.js.

Bạn cũng sẽ nhận thấy rằng một danh sách các điểm dừng bạn đã thêm được duy trì ở phía trên bên trái của tab. Danh sách này rất hữu ích để điều hướng nhanh chóng đến các điểm dừng trong một tệp lớn hoặc tạm thời vô hiệu hóa chúng bằng cách nhấp vào điểm đánh dấu bên cạnh mục nhập trong bảng điều khiển bên trái.

Để xóa điểm dừng, bấm chuột phải vào điểm đánh dấu dòng và chọn Xóa điểm dừng.

Điểm dừng lập trình

Bạn cũng có thể thêm các điểm dừng theo chương trình có thể hữu ích nếu bạn không muốn tìm kiếm thông qua mã của mình trong Thanh tra web khi bạn đã có nó tiện dụng trong IDE của mình. Bạn cũng có thể sử dụng phương pháp này để giới thiệu có điều kiện các điểm dừng, ví dụ tại một số lần lặp nhất định của các vòng lặp hoặc nếu mã chạy trên tải trang và không có thời gian để thêm điểm dừng theo cách thủ công.

Để làm điều này, bạn thêm trình gỡ lỗi; Tuyên bố tại vị trí bạn muốn phá vỡ việc thực thi. Mã dưới đây sẽ có hiệu ứng tương tự như điểm dừng dòng ở trên.

Điểm dừng lỗi

Thanh tra web có một tính năng tiện dụng sẽ dừng thực thi khi nó đạt ngoại lệ trong mã của bạn, cho phép bạn kiểm tra những gì xảy ra tại thời điểm lỗi. Bạn thậm chí có thể chọn dừng lại trên các ngoại lệ đã được xử lý bằng câu lệnh thử/bắt.

Để dừng khi có bất kỳ ngoại lệ nào xảy ra, hãy nhấp vào biểu tượng mũi tên bên cạnh nhãn là tất cả các ngoại lệ. Bạn sẽ thấy nó tối khi được kích hoạt. Để chỉ dừng lại khi xảy ra ngoại lệ chưa được thực hiện, hãy nhấp vào biểu tượng mũi tên bên cạnh nhãn ngoại lệ của Uncause Uncaught.

Bước 6: Bước thông qua mã của bạn

Bây giờ chúng tôi đã biết cách đặt các điểm dừng vào mã của chúng tôi, bây giờ chúng tôi muốn bước qua từng dòng để chúng tôi có thể tìm ra những gì mà đi sai. Đầu tiên, đặt một điểm dừng trên dòng 7 - ngay bên trong nút Thêm nút Nhấp vào Trình xử lý để chúng tôi có thể bắt đầu lúc đầu.

Trong phần trước, chúng tôi đã suy ra từ báo cáo lỗi của Raygun rằng lỗi xuất phát từ phương pháp capitalizestring. Phương pháp này được gọi là ba lần, vậy, ví dụ nào là thủ phạm? Bạn có thể nhìn gần hơn một chút ở Stacktrace và thấy rằng đó là cuộc gọi đến từ dòng 13 gây ra lỗi. Bạn biết rằng dòng 13 liên quan đến giá trị tên đệm. Do đó, bạn nên tập trung nỗ lực của mình vào việc sao chép lỗi bằng cách chế tạo đầu vào của bạn một cách chính xác.

Với kiến ​​thức bổ sung này, bạn có thể điền vào các trường đầu tiên và họ nhưng để trống tên đệm để xem điều này có kích hoạt lỗi không. Nhấn nút Lưu. Từ đây, tab Nguồn sẽ mở ở nơi bạn có thể thấy rằng điểm dừng đã được kích hoạt. Bây giờ bạn có thể bắt đầu bước qua mã. Để làm điều này, bạn sử dụng các nút ở trên cùng bên trái của khung nguồn.

• Biểu tượng đầu tiên, mũi tên điểm dừng, có thể được sử dụng để vô hiệu hóa hoặc bật tất cả các điểm dừng
• Lần tạm dừng/tiếp tục thực hiện mã của bạn và tiếp tục cho đến khi điểm dừng tiếp theo
• Biểu tượng thứ ba, một mũi tên di chuyển trên một dòng, các bước trên đường dây hiện tại, chuyển chúng tôi sang dòng tiếp theo
• Mũi tên trỏ vào dòng trực tuyến vào các bước vào "gọi chức năng tiếp theo trên dòng đó
• Biểu tượng cuối cùng, mũi tên chỉ ra khỏi đường dây, bước ra khỏi cuộc gọi chức năng hiện tại, sao lưu ngăn xếp cuộc gọi một cấp

Bạn sẽ sử dụng những thứ này để bước vào chức năng Capitalizestring của mình. Vì vậy, từ dòng 7, hãy sử dụng nút Bước qua Bước trên mạng cho đến khi chúng ta đến dòng 13. Dòng hoạt động được hiển thị với nền màu xanh lá cây. Bây giờ, bạn có thể sử dụng nút Bước vào trên mạng để chuyển vào cuộc gọi đến chức năng Capitalizestring, nhảy từ dòng 13 sang dòng 20.

Để tìm hiểu thêm về sự khác biệt giữa các bước trên đường và bước vào nhóm khi gỡ lỗi JavaScript, hãy xem bài viết này.

Điều hướng ngăn xếp cuộc gọi

Khi bạn di chuyển qua mã như thế này, bạn có thể muốn quay trở lại chức năng cha mẹ để kiểm tra những gì đang xảy ra vào thời điểm đó. Để làm điều này, hãy sử dụng phần Call Stack, trong đó liệt kê tất cả các chức năng đã được truyền qua để đi đến điểm này trong mã của bạn - chính xác giống như CallStack được hiển thị trong Báo cáo lỗi Raygun.

Bạn có thể chỉ cần nhấp vào một mục trong danh sách này và bạn sẽ được chuyển trở lại chức năng đó. Hãy nhớ rằng vị trí hiện tại trong quá trình thực hiện không thay đổi, vì vậy sử dụng các nút Bước qua sẽ tiếp tục từ đầu của đoạn gọi.

Bước 7: Xác định trạng thái ứng dụng của bạn

Bây giờ bạn đã điều hướng đến nơi xảy ra lỗi của bạn, chúng tôi cần kiểm tra trạng thái của ứng dụng và tìm ra những gì mà gây ra lỗi.

Có một loạt các tùy chọn để tìm ra những giá trị nào các biến chứa và đánh giá các biểu thức trước khi mã di chuyển. Chúng tôi sẽ nhìn vào từng lần lượt.

Chuột di chuột

Cách đơn giản nhất để xác định giá trị của một biến là chỉ cần di chuột qua nó và một chú giải công cụ sẽ xuất hiện với giá trị. Bạn thậm chí có thể chọn một nhóm các biểu thức và di chuột qua lựa chọn để có được đầu ra của biểu thức.

Xem biểu cảm

Bạn có thể thêm các biểu thức vào bảng biểu thức đồng hồ hiển thị giá trị hiện tại của biểu thức khi bạn di chuyển qua mã. Bảng biểu thức đồng hồ rất tiện dụng để theo dõi cách các biểu thức phức tạp thay đổi theo thời gian như thế nào.

Bạn thêm chúng bằng cách nhấp vào nút++ở đầu bảng, nhập biểu thức để xem và nhấn ENTER.

Các biến cục bộ

Phần các biến cục bộ được nhìn thấy trong phần Biểu thức đồng hồ hiển thị danh sách các biến hiện trong phạm vi và các giá trị liên quan của chúng. Bảng điều khiển các biến cục bộ tương tự như bảng biểu thức Watch nhưng tự động được tạo bởi trình kiểm tra web. Phần này tốt để xác định các biến cục bộ và lưu bạn thêm chúng một cách rõ ràng vào danh sách các biểu thức đồng hồ.

Bảng điều khiển

Cuối cùng, tab Console là một công cụ tuyệt vời để kiểm tra các giá trị biểu thức và thử nghiệm mã. Chỉ cần chuyển trở lại tab Console, nhập một số mã và nhấn Enter. Thanh tra web sẽ thực thi mã trong bối cảnh và phạm vi của điểm dừng hiện tại.

Bước 8: Khắc phục lỗi

Chuyển sang tab Console và để Lôi bắt đầu phá vỡ dòng gây ra lỗi để bạn có thể sửa nó.

Đầu tiên, hãy kiểm tra đầu ra của cuộc gọi value.split('') (dự định lấy ký tự đầu tiên và sau đó gọi chức năng toupppercase trên đó).

Thực hiện biểu thức trong bảng điều khiển cho thấy nó trả về một mảng trống, đây là nơi lỗi đến từ! Vì nó trả về một mảng trống và chúng tôi cố gắng gọi toupppercase trên mục đầu tiên trong mảng (không được xác định, vì hoàn toàn không có mục nào trong mảng) kết quả lỗi.

Bạn có thể xác minh điều này bằng cách nhập biểu thức đầy đủ vào bảng điều khiển. Để khắc phục sự cố này, bạn cần kiểm tra xem chuỗi có trống hay không xác định trước khi phân tích cú pháp không. Nếu đúng như vậy, bạn cần trả lại một chuỗi trống trở lại mà không cần xử lý.

function capitalizeString(value){ if(!value || value.length === 0){ return ''; } return value.split('')[0].toUpperCase() + value.slice(1); }

Bản tóm tắt

Điều đó kết thúc hướng dẫn nhanh này để gỡ lỗi JavaScript trong Safari di động với Thanh tra Web. Nó thực sự đơn giản để kích hoạt gỡ lỗi từ xa này và sử dụng toàn bộ Thanh tra web Safari cho các trang mở trên thiết bị iOS. May mắn thay, các công cụ phát triển để gỡ lỗi trên thiết bị di động đã đi một chặng đường dài và điều này đã làm cho việc theo dõi các lỗi cụ thể của thiết bị di động dễ dàng hơn nhiều.

Bạn sẽ có thể đưa nó vào sử dụng khi cố gắng theo dõi lỗi Safari di động tiếp theo của bạn.Nó thực sự đáng để dành thời gian để thành thạo các công cụ này để tăng cấp kỹ năng gỡ lỗi của bạn!Có một số tính năng tuyệt vời khác trong thanh tra web, vì vậy chúng tôi khuyên bạn nên dành thời gian khám phá.

Nếu bạn muốn tìm hiểu thêm, chúng tôi đã viết toàn bộ hướng dẫn về gỡ lỗi JavaScript trong các trình duyệt lớn.Debug JavaScript bằng quy trình tương tự như trên trong:

• Microsoft Edge
• Trình duyệt Chrome
• Firefox
• Opera
• Cuộc đi săn
• Safari Mobile (iOS)
• Visual Studio

Như chúng tôi vừa thể hiện, Raygun là một công cụ tuyệt vời có thể làm cho các nhiệm vụ khó khăn dễ dàng hơn rất nhiều.Nếu bạn muốn tự mình xem, bạn có thể đăng ký dùng thử miễn phí 14 ngày bất cứ lúc nào - ngay bây giờ nếu bạn muốn.