Helpex - Trao đổi & giúp đỡ Đăng nhập

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Bài viết này sẽ tập trung vào gỡ lỗi mã JavaScript trong Công cụ dành cho nhà phát triển của Internet Explorer 11 . Bất chấp những lời chỉ trích mà Internet Explorer thường xuyên nhận được, các công cụ dành cho nhà phát triển được tích hợp trong IE11 khiến việc phát triển và gỡ lỗi mã trong trình duyệt trở thành một nhiệm vụ không hề sợ hãi theo cách tương tự như trong nhiều năm qua. Các công cụ của trình duyệt tự hào với nhiều tính năng của các trình duyệt khác, tập trung nhiều nhà phát triển hơn như Chrome và Firefox.

Trong bài viết này, chúng tôi sẽ làm việc thông qua việc gỡ lỗi một ví dụ trong Internet Explorer.

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 một báo cáo lỗi Raygun.
  3. Khám phá cấu tạo của các công cụ dành cho nhà phát triển.
  4. Thêm Điểm dừng vào Mã của bạn.
  5. Bước qua Mã của bạn.
  6. Xác định trạng thái của ứng dụng của bạn.
  7. Sửa lỗi!

Vì vậy, hãy lặn xuống!

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

Để giải thích cách gỡ lỗi một ứng dụng với Công cụ dành cho nhà phát triển của Internet Explorer, tôi sẽ sử dụng biểu mẫu Thêm người đơn giản. Biểu mẫu này cho phép bạn nhập tên, tên đệm và họ. 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.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Mã cho hình thức này có ba chức năng:

  • Một xử lý nhấp chuột.
  • Hàm chuỗi viết hoa.
  • 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 sản phẩm này đến sản xuất muộn vào 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 mình. 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 xuất hiện trong Raygun có nhiều thông tin bạn có thể sử dụng để tìm và sửa lỗi, vì vậy hãy xem chúng tôi đang xử lý vấn đề gì.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Thông tin bạn sẽ cần để gỡ lỗi lỗi nằm trong mô-đun theo dõi Stack.

Phần Thông báo của theo dõi Stack là một tổng quan ngắn về những gì sai. Trong trường hợp này, toUpperCasephương thức đang được gọi trên một giá trị không xác định.

Dấu vết ngăn xếp cho bạn biết lỗi xảy ra ở đâu và chuỗi các lệnh gọi hàm 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 capitalizeStringchức năng trên dòng 20 của index.jstệp.

Biết dòng nào gây ra 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 sự cố.

Bước 3: Khám phá cấu tạo của các công cụ dành cho nhà phát triển

Bước đầu tiên là khởi chạy ứng dụng trong Internet Explorer và mở Công cụ dành cho nhà phát triển. Bạn có thể thực hiện việc này bằng bàn phím bằng phím F12 hoặc bằng cách chọn Công cụ dành cho nhà phát triển F12 của FIP trong menu Công cụ trực tuyến.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Công cụ dành cho nhà phát triển giờ đây sẽ được mở bên trong tab trình duyệt và tab DOM Explorer sẽ hoạt động. Thay đổi sang tab Console bằng cách nhấp vào tên của nó. Tab Console 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ừ console.logcác cuộc gọi.

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.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Tab Console là một công cụ gỡ lỗi có giá trị, vì vậy bạn có thể sử dụng nó như một miếng đệm để 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 qua mã nguồn của mình trong Công cụ dành cho nhà phát triển. Bạn làm điều này trong tab Debugger.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Bạn có thể truy cập chế độ xem dạng cây của tất cả các tệp nguồn được tải vào trang bằng cách nhấp vào nút ở trên cùng bên trái của tab. Bạn có thể điều hướng các tệp ở đây như trong IDE, vì nội dung được hiển thị trong khung trung tâm.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Cửa sổ bên phải cung cấp cho bạn tất cả các tùy chọn gỡ lỗi của bạn, mà tôi sẽ nói về sau.

Nếu bạn có nhiều tệp, bạn có thể tìm kiếm chúng bằng cách nhập tên của tệp vào hộp văn bản ở đầu trình duyệt tệp.

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

Bước 4: 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ể đi qua từng dòng một để xem mọi thứ sai ở đâu. Để làm điều này, chúng tôi sử dụng điểm dừng. Điểm dừng là các đ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 một.

Có một vài cách khác nhau để thêm điểm dừng mà tôi sẽ đi qua đây.

Điểm dừng sự kiện

Bạn có thể buộc thực thi bị phá vỡ khi một sự kiện cụ thể (hoặc tập hợp các sự kiện) xảy ra trên trang. Sử dụng phần Breakpoint trong khung gỡ lỗi, bạn có thể nhấp vào nút Điểm dừng sự kiện của Thêm sự kiện và chọn sự kiện bạn muốn đột nhập từ danh sách. Bạn có thể tùy ý thêm một biểu thức điều kiện để ngăn chặn việc thực thi bị dừng mỗi lần.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Điểm dừng dòng

Có lẽ cách phổ biến nhất để thêm một điểm dừng là tìm dòng cụ thể mà bạn muốn dừng lại và thêm nó vào đó. Đ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 đỏ sẽ được thêm vào dòng đó và việc thực thi sẽ dừng lại mỗi khi nó chạm vào 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.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Điểm dừng chương 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 Công cụ dành cho nhà phát triển khi bạn có nó 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 các vòng lặp nhất định 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 debugger;câu lệnh vào vị trí bạn muốn phá vỡ sự thực thi. Mã dưới đây sẽ có tác dụng tương tự như Line Breakpoint ở trên.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Điểm dừng lỗi

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

Để bật tính năng này, nhấp vào biểu tượng dấu dừng với biểu tượng tạm dừng trong đó và chọn tùy chọn bạn muốn từ danh sách. Nó sẽ có màu xanh khi được kích hoạt.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Bước 5: Bước qua mã của bạn

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

Trong phần trước, chúng tôi đã suy ra từ báo cáo lỗi Raygun rằng lỗi xuất phát từ capitalizeStringphương thức. Phương pháp này được gọi là ba lần, vì vậy, trường hợp nào là thủ phạm? Bạn có thể nhìn kỹ hơn một chút vào dấu vết Stack và thấy rằng đó là cuộc gọi đến từ Line 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 vào việc tái tạo lỗi bằng cách tạo ra đầu vào 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 Tên và Họ nhưng để trống Tên đệm để xem điều này có gây ra lỗi không.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Nhấn nút Lưu. Từ đây, tab Nguồn sẽ mở ra nơi bạn có thể thấy đ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 bốn nút trong khung gỡ lỗi.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Tiếp tục thực thi mã của bạn và tiếp tục cho đến điểm dừng tiếp theo.

Bước qua dòng hiện tại, chuyển chúng tôi sang dòng tiếp theo.

Bước vào cuộc gọi chức năng tiếp theo đó là trên dòng đó.

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 để chuyển tất cả các capitalizeStringchức năng của bạn . Vì vậy, từ Dòng 7, hãy sử dụng nút Bước trên trên Bước 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 vàng và mũi tên màu cam chỉ vào nó.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Bây giờ bạn có thể sử dụng nút Bước Bước vào Nút để di chuyển vào cuộc gọi đến capitalizeStringchức năng.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Khi bạn di chuyển qua mã như thế này, bạn có thể muốn quay lại hàm cha để kiểm tra xem điều gì đã xảy ra tại thời điểm đó. Để thực hiện việc này, hãy sử dụng phần Ngăn xếp cuộc gọi, liệt kê tất cả các chức năng đã được chuyển qua để đến điểm này trong mã của bạn giống hệt như ngăn xếp Cuộc gọi được hiển thị trong báo cáo lỗi Raygun.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Bạn 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 thực thi không thay đổi, vì vậy sử dụng các nút Bước qua sẽ tiếp tục từ đầu ngăn xếp cuộc gọi.

Bước 6: Xác định trạng thái của Ứ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 hiểu nguyên nhân gây ra lỗi.

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

Chuột di chuột

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

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Người theo dõi

Bạn có thể thêm biểu thức vào bảng Đồ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ã. Điều này rất hữu ích để theo dõi cách các biểu thức phức tạp thay đổi theo thời gian.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Bạn thêm các mục này bằng cách nhấp vào nút ở trên cùng của bảng điều khiển, nhấp vào văn bản của Thêm Thêm Xem ở phía dưới hoặc bằng cách chọn một biểu thức, nhấp chuột phải và chọn Xem Thêm Đồng hồ.

Phạm vi

Bảng điều khiển Đồng hồ cũng hiển thị danh sách các biến hiện tại trong phạm vi và các giá trị liên quan của chúng. Điều này tương tự với đồng hồ được thêm thủ công nhưng chúng được tạo tự động bởi Công cụ dành cho nhà phát triển. Phần này tốt cho việc xác định các biến cục bộ và giúp bạn tiết kiệm rõ ràng khi thêm chúng vào danh sách Xem.

Sự kiện Tracepoint

Một tính năng duy nhất cho Công cụ dành cho nhà phát triển của IE 11 là Tracepoint cho phép bạn xác định một biểu thức để đánh giá và xuất ra bàn điều khiển bất cứ khi nào sự kiện được chọn xảy ra. Ví dụ: bạn có thể xuất thời gian hiện tại khi xảy ra sự kiện chuột.

Để thêm Tracepoint Sự kiện, nhấp vào nút từ phần Breakpoint. Từ cửa sổ mở ra, chọn sự kiện bạn muốn theo dõi và sau đó nhập biểu thức để xuất.

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

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. Công cụ dành cho nhà phát triển sẽ thực thi mã trong ngữ cảnh và phạm vi của điểm dừng hiện tại.

Bước 7: Sửa lỗi

Chuyển sang tab Bảng điều khiển và bắt đầu ngắt dòng gây ra lỗi để bạn có thể sửa lỗi bằng tab Bảng điều khiển.

Đầu tiên, hãy kiểm tra đầu ra của value.split(‘’)cuộc gọi để bạn có thể nhận được ký tự đầu tiên sau đó gọi toUpperCasehàm trên 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à lỗi xuất phát! Vì nó trả về một mảng trống và chúng tôi cố gắng gọi toUpperCasevào mục đầu tiên (không xác định, vì không có mục nào) cung cấp cho bạn 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:

Gỡ lỗi JavaScript trong Internet Explorer 11 trong 7 bước đơn giản

Vì vậy, để khắc phục sự cố, bạn cần kiểm tra xem chuỗi có trống hay không xác định. Nếu có, bạn cần trả về một chuỗi rỗng mà không cần thực hiện bất kỳ xử lý nào.

function capitalizeString(value){
    if(!value || value.length === 0){
        return '';
    }

    return value.split('')[0].toUpperCase() + value.slice(1);
}

Tóm lược

Nó kết thúc phần giới thiệu nhanh này để gỡ lỗi JavaScript trong Công cụ dành cho nhà phát triển của Internet Explorer 11. Các công cụ dành cho nhà phát triển này là một bước nhảy vọt đáng hoan nghênh trong trải nghiệm của nhà phát triển trên Internet Explorer, thứ luôn luôn là thứ đáng sợ.

Các công cụ cực kỳ hoàn chỉnh khi so sánh với các dịch vụ của trình duyệt khác và thậm chí bao gồm một vài tính năng độc đáo của riêng chúng.

Bài  viết này  lần đầu tiên xuất hiện trên  Blog Raygun .

4 hữu ích 0 bình luận 10k xem chia sẻ

Có thể bạn quan tâm

loading