Gỡ lỗi và kiểm tra JavaScript trong các ứng dụng HTML5. Hướng dẫn chi tiết gỡ lỗi mã JavaScript trong Chrome Devtools. trình gỡ lỗi từ khóa

Chúng tôi cho bạn biết cách sử dụng bảng điều khiển Nhà phát triển Chrome công cụ thuận tiện cho việc gỡ lỗi.

Việc tìm và sửa lỗi có thể khó khăn đối với người mới bắt đầu. Nếu bạn đang nghĩ đến việc sử dụng console.log() để gỡ lỗi mã của mình Quyết định tốt nhất, thì bạn đã sai rồi.

Trong bài viết này chúng ta sẽ nói về công cụ tuyệt vời Google Chrome Devtools để gỡ lỗi Quá trình này là một cách hiệu quả hơn nhiều để giải quyết vấn đề này.

Đây chỉ là một ví dụ đơn giản về cách sử dụng tính năng gỡ lỗi nhưng nó có thể được áp dụng cho bất kỳ vấn đề nào.

Bước 1: Tái tạo lỗi

Tái tạo lỗi luôn là bước đầu tiên để gỡ lỗi. Điều này có nghĩa là tìm chuỗi hành động dẫn đến lỗi. Quá trình này có thể kéo dài, vì vậy hãy cố gắng tối ưu hóa nó.

Để tự mình làm theo các bước trong hướng dẫn này, hãy làm như sau:

Đây là trang web chúng ta sẽ làm việc trong hướng dẫn này. Đừng quên mở nó trong tab mới;
Nhập số 5 vào trường “Số 1”;
Nhập số 1 vào trường “Số 2”;
Nhấp vào nút “Thêm”;
Hãy nhìn xem, họ nói với bạn rằng 5+1=51;

Rất tiếc, điều đó rõ ràng là sai. Kết quả phải là số 6 và lỗi này cần được sửa.

Bước 2: Tạm dừng thực thi bằng điểm dừng

DevTools cho phép bạn dừng quá trình thực thi mã và xem giá trị của tất cả các biến tại thời điểm đó. Công cụ tạm dừng mã được gọi là điểm dừng. Thử:

Quay lại trang thử nghiệm của chúng tôi và bật DevTools bằng cách nhấn Cmd + Option + I (Mac) hoặc Ctrl + Shift + I (Windows, Linux);
Chuyển đến tab "Nguồn";
Mở rộng "Trình nghe sự kiện". DevTools sẽ mở rộng danh sách các danh mục sự kiện như hoạt ảnh và khay nhớ tạm;
Đánh dấu vào ô “nhấp chuột”;

Quay lại trang, thêm lại “Số 1” và “Số 2”. DevTools sẽ tạm dừng bản demo và đánh dấu dòng mã trong bảng Nguồn. DevTools sẽ đánh dấu dòng mã này:
hàm onClick() (

hàm onClick() (

Tại sao chuyện này đang xảy ra?
Khi bạn chọn "nhấp chuột", bạn đặt điểm dừng phụ thuộc vào sự kiện nhấp chuột trên mỗi thành phần có trình xử lý cho nó.

Bước 3: Thực hiện gỡ lỗi từng bước

Một lý do phổ biến khiến xảy ra lỗi là tập lệnh không được thực thi theo thứ tự bạn nghĩ. Bạn có thể tránh vấn đề này bằng cách quan sát việc thực thi từng dòng mã. Hãy thử:
- Trong bảng "Nguồn", nhấp vào "Bước vào nút gọi chức năng tiếp theo"
Nút này sẽ cho phép bạn theo dõi tuần tự việc thực hiện chức năng onClick. Dừng quá trình khi DevTools nổi bật hàng tiếp theo mã số:

if (inputsAreEmpty()) (

if (inputsAreEmpty()) (
- Bây giờ hãy nhấp vào nút “Bước qua nút gọi chức năng tiếp theo”;
DevTools hiện đã biết thực thi inputAreEmpty() mà không cần gỡ lỗi nội dung của nó. Xin lưu ý rằng DevTools bỏ qua một số dòng mã. Điều này là do inputAreEmpty() trả về sai, do đó khối if không được thực thi.

Đây là bản chất của việc gỡ lỗi mã từng bước. Nếu nhìn vào mã trong get-started.js, bạn sẽ thấy rằng lỗi có thể nằm ở đâu đó trong hàm updateLabel(). Thay vì xem qua từng dòng mã, bạn có thể sử dụng một loại điểm ngắt khác để dừng quá trình ở gần nơi xảy ra lỗi hơn.

Bước 4: Chọn điểm dừng khác

Loại dòng mã là điểm dừng phổ biến nhất. Nếu bạn biết lỗi có thể ở đâu, hãy sử dụng loại này:
- Nhìn vào dòng cuối cùng mã trong updateLabel() trông như thế này:
  label.textContent = addend1 + " + " + addend2 + " = " + sum;
  
  nhãn. textContent = addend1 + " + " + addend2 + " = " + sum ;
- Ở bên trái của mã này, bạn sẽ thấy số dòng: 32. Nhấp vào 32. Bây giờ DevTools sẽ luôn tạm dừng cho đến khi dòng mã này được thực thi;
- Nhấp vào nút "Tiếp tục thực thi tập lệnh". Tập lệnh sẽ tiếp tục thực thi cho đến dòng mã tiếp theo có điểm dừng;
- Hãy xem các dòng mã trong updateLabel() đã được thực thi. DevTools xuất ra các giá trị của addend1, addend2 và sum.