Gỡ lỗi JavaScript

Tiếng Basques Kayce

Twitter GitHub Lỗi

Sofia Emelianova

GitHub

Hướng dẫn này chỉ cho bạn quy trình làm việc cơ bản để gỡ lỗi mọi sự cố JavaScript trong Công cụ cho nhà phát triển. Đọc hoặc xem phiên bản video của hướng dẫn này ở bên dưới.

Bước 1: Tái hiện lỗi

Việc tìm một loạt thao tác tái hiện lỗi một cách nhất quán luôn là bước đầu tiên trong quá trình gỡ lỗi.

1. Mở bản minh hoạ này trong thẻ mới.
2. Nhập 5 vào hộp văn bản Số 1.
3. Nhập 1 vào hộp văn bản Số 2.
4. Nhấp vào Thêm số 1 và số 2. Nhãn bên dưới nút cho biết 5 + 1 = 51. Kết quả sẽ là 6. Đây là lỗi mà bạn sẽ khắc phục.

Trong ví dụ này, kết quả của 5 + 1 là 51. Nó phải là 6.

Bước 2: Làm quen với giao diện người dùng của bảng điều khiển Nguồn

Công cụ cho nhà phát triển cung cấp nhiều công cụ cho các nhiệm vụ khác nhau, chẳng hạn như thay đổi CSS, phân tích hiệu suất tải trang và giám sát các yêu cầu mạng. Bảng điều khiển Sources (Nguồn) là nơi bạn gỡ lỗi JavaScript.

1. Mở Công cụ cho nhà phát triển bằng cách nhấn Command+Option+J (Mac) hoặc Control+Shift+J (Windows, Linux). Lối tắt này sẽ mở bảng điều khiển Console (Bảng điều khiển).

   

2. Nhấp vào thẻ Nguồn.

   

Giao diện người dùng của bảng điều khiển Nguồn có 3 phần:

1. Ngăn File Navigator (Trình điều hướng tệp). Mọi tệp mà trang yêu cầu đều được liệt kê ở đây.
2. Ngăn Code Editor (Trình soạn thảo mã). Sau khi chọn một tệp trong ngăn File Navigator (Trình điều hướng tệp), nội dung của tệp đó sẽ hiển thị ở đây.
3. Ngăn Gỡ lỗi JavaScript. Nhiều công cụ để kiểm tra JavaScript của trang. Nếu cửa sổ DevTools của bạn rộng, thì ngăn này sẽ hiển thị ở bên phải ngăn Code Editor (Trình soạn thảo mã).

Bước 3: Tạm dừng mã với một điểm ngắt

Một phương thức phổ biến để gỡ lỗi những vấn đề như vậy là chèn nhiều câu lệnh console.log() vào mã nhằm kiểm tra các giá trị khi tập lệnh thực thi. Ví dụ:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

Phương thức console.log() có thể hoàn thành công việc nhưng điểm ngắt có thể hoàn thành công việc nhanh hơn. Điểm ngắt cho phép bạn tạm dừng mã ngay giữa quá trình thực thi và kiểm tra kịp thời tất cả giá trị tại thời điểm đó. So với phương thức console.log(), điểm ngắt có một số ưu điểm:

• Với console.log(), bạn cần mở mã nguồn theo cách thủ công, tìm mã liên quan, chèn câu lệnh console.log(), sau đó tải lại trang để xem thông báo trong Bảng điều khiển. Với các điểm ngắt, bạn có thể tạm dừng trên mã có liên quan mà không cần biết cấu trúc của mã đó.
• Trong các câu lệnh console.log(), bạn cần chỉ định rõ ràng từng giá trị mà bạn muốn kiểm tra. Với điểm ngắt, Công cụ cho nhà phát triển hiển thị cho bạn giá trị của tất cả các biến tại thời điểm đó. Đôi khi có các biến ảnh hưởng đến mã của bạn mà bạn thậm chí không biết.

Tóm lại, điểm ngắt có thể giúp bạn tìm và sửa lỗi nhanh hơn so với phương thức console.log().

Nếu lùi lại một bước và suy nghĩ về cách hoạt động của ứng dụng, bạn có thể đưa ra dự đoán cơ bản rằng tổng không chính xác (5 + 1 = 51) được tính toán trong trình nghe sự kiện click liên kết với nút Thêm số 1 và Số 2. Do đó, bạn nên tạm dừng mã trong khoảng thời gian trình nghe click thực thi. Điểm ngắt của trình xử lý sự kiện cho phép bạn thực hiện chính xác điều đó:

1. Trong ngăn JavaScript Debugging (Gỡ lỗi JavaScript), hãy nhấp vào Event Listener Breakpoints (Điểm ngắt của trình nghe sự kiện) để mở rộng phần này. Công cụ cho nhà phát triển cho thấy một danh sách các danh mục sự kiện có thể mở rộng, chẳng hạn như Ảnh động và Bảng nhớ tạm.
2. Bên cạnh danh mục sự kiện Chuột, hãy nhấp vào biểu tượng Mở rộng . Công cụ cho nhà phát triển hiển thị danh sách các sự kiện chuột, chẳng hạn như nhấp và chuột xuống. Mỗi sự kiện đều có một hộp đánh dấu bên cạnh.

3. Chọn hộp đánh dấu nhấp. Công cụ cho nhà phát triển hiện đã được thiết lập để tự động tạm dừng khi bất kỳ trình nghe sự kiện click nào thực thi.

   

4. Quay lại bản minh hoạ, nhấp lại vào Thêm số 1 và số 2. Công cụ cho nhà phát triển tạm dừng bản minh hoạ và làm nổi bật một dòng mã trong bảng điều khiển Nguồn. Công cụ cho nhà phát triển phải được tạm dừng trên dòng mã sau:

   function onClick() {
   

   Nếu bạn đã tạm dừng trên một dòng mã khác, hãy nhấn Tiếp tục thực thi tập lệnh cho đến khi bạn tạm dừng trên đúng dòng.

   Lưu ý: Nếu đã tạm dừng trên một dòng khác, bạn sẽ có một tiện ích của trình duyệt đăng ký trình nghe sự kiện click trên mỗi trang mà bạn truy cập. Bạn đã bị tạm dừng trong trình nghe click của tiện ích. Nếu sử dụng Chế độ ẩn danh để duyệt web ở chế độ riêng tư và chế độ này sẽ tắt tất cả tiện ích, thì bạn có thể thấy mình tạm dừng trên đúng dòng mã mỗi lần sử dụng.

Điểm ngắt của trình nghe sự kiện chỉ là một trong nhiều loại điểm ngắt có trong Công cụ cho nhà phát triển. Bạn nên ghi nhớ tất cả các loại khác nhau, vì mỗi loại cuối cùng sẽ giúp bạn gỡ lỗi các tình huống khác nhau nhanh nhất có thể. Hãy xem bài viết Tạm dừng mã có điểm ngắt để tìm hiểu thời điểm và cách sử dụng từng loại.

Bước 4: Duyệt qua mã

Một nguyên nhân phổ biến gây ra lỗi là khi tập lệnh thực thi theo thứ tự không chính xác. Khi duyệt qua mã của mình, bạn có thể xem từng dòng trong quá trình thực thi mã và xác định chính xác vị trí mã đang thực thi theo thứ tự khác với dự kiến. Hãy thử ngay:

1. Trên bảng Nguồn của Công cụ cho nhà phát triển, hãy nhấp vào biểu tượng Bước vào lệnh gọi hàm tiếp theo để từng bước thực thi hàm onClick(), từng dòng một. Công cụ cho nhà phát triển làm nổi bật dòng mã sau:

   if (inputsAreEmpty()) {
   

2. Nhấp vào biểu tượng Bước qua lệnh gọi hàm tiếp theo . Công cụ cho nhà phát triển thực thi inputsAreEmpty() mà không cần can thiệp vào nó. Lưu ý cách Công cụ cho nhà phát triển bỏ qua một vài dòng mã. Điều này là do inputsAreEmpty() được đánh giá thành false (sai), vì vậy, khối mã của câu lệnh if không được thực thi.

Đó là ý tưởng cơ bản khi duyệt qua mã. Nếu xem mã trong get-started.js, bạn có thể thấy lỗi có thể nằm ở đâu đó trong hàm updateLabel(). Thay vì duyệt qua từng dòng mã, bạn có thể sử dụng một loại điểm ngắt khác để tạm dừng mã ở gần vị trí có thể xảy ra lỗi hơn.

Bước 5: Đặt điểm ngắt dòng mã

Điểm ngắt dòng mã là loại điểm ngắt phổ biến nhất. Khi bạn đã có một dòng mã cụ thể mà bạn muốn tạm dừng, hãy sử dụng điểm ngắt dòng mã:

1. Xem dòng mã cuối cùng trong updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. Ở bên trái mã, bạn có thể thấy số dòng của dòng mã cụ thể này, đó là 32. Nhấp vào 32. Công cụ cho nhà phát triển đặt một biểu tượng màu xanh dương lên trên 32. Tức là có một điểm ngắt dòng mã trên dòng này. Công cụ cho nhà phát triển hiện luôn tạm dừng trước khi thực thi dòng mã này.

3. Nhấp vào biểu tượng 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 khi đạt đến dòng 32. Trên các dòng 29, 30 và 31, Công cụ cho nhà phát triển cho thấy các giá trị của addend1, addend2 và sum cùng dòng bên cạnh các nội dung khai báo của chúng.

Trong ví dụ này, Công cụ cho nhà phát triển tạm dừng trên điểm ngắt dòng mã trên dòng 32.

Bước 6: Kiểm tra các giá trị biến

Các giá trị của addend1, addend2 và sum có vẻ đáng ngờ. Các giá trị này được đặt trong dấu ngoặc kép, có nghĩa là chúng là các chuỗi. Đây là một giả thuyết phù hợp để giải thích nguyên nhân của lỗi. Giờ đã đến lúc thu thập thêm thông tin. Công cụ cho nhà phát triển cung cấp nhiều công cụ để kiểm tra các giá trị biến đổi.

Phương pháp 1: Ngăn Phạm vi

Khi bạn đang tạm dừng trên một dòng mã, ngăn Scope (Phạm vi) cho bạn thấy những biến cục bộ và biến toàn cục hiện đang được xác định, cùng với giá trị của từng biến. Báo cáo này cũng cho thấy các biến đóng (nếu có). Nhấp đúp vào một giá trị biến để chỉnh sửa giá trị đó. Khi bạn không bị tạm dừng trên một dòng mã, ngăn Scope (Phạm vi) sẽ trống.

Phương pháp 2: Biểu thức xem

Thẻ Biểu thức theo dõi cho phép bạn theo dõi giá trị của các biến theo thời gian. Giống như tên gọi, Biểu thức xem không chỉ giới hạn ở các biến. Bạn có thể lưu trữ mọi biểu thức JavaScript hợp lệ trong Biểu thức xem. Hãy thử ngay:

1. Nhấp vào thẻ Xem.
2. Nhấp vào biểu tượng Thêm biểu thức .
3. Nhập typeof sum.
4. Nhấn Enter. Công cụ cho nhà phát triển hiển thị typeof sum: "string". Giá trị ở bên phải dấu hai chấm là kết quả của Biểu thức xem.

Ảnh chụp màn hình ở trên cho thấy ngăn WatchBiểu thức (ở dưới cùng bên phải) sau khi tạo biểu thức đồng hồ typeof sum. Nếu cửa sổ Công cụ cho nhà phát triển của bạn lớn, ngăn Biểu thức đồng hồ nằm ở bên phải, phía trên ngăn Điểm ngắt của trình nghe sự kiện.

Như bị nghi ngờ, sum đang được đánh giá dưới dạng chuỗi, khi phải là một số. Bây giờ, bạn đã xác nhận rằng đây là nguyên nhân gây ra lỗi.

Phương pháp 3: Bảng điều khiển

Ngoài việc xem thông báo console.log(), bạn cũng có thể sử dụng Console để đánh giá các câu lệnh JavaScript tuỳ ý. Về mặt gỡ lỗi, bạn có thể sử dụng Console để kiểm thử các bản sửa lỗi tiềm năng. Hãy thử ngay:

1. Nếu bạn không mở ngăn Bảng điều khiển, hãy nhấn phím Escape để mở ngăn này. Tệp này sẽ mở ra ở cuối cửa sổ Công cụ cho nhà phát triển của bạn.
2. Trong Bảng điều khiển, nhập parseInt(addend1) + parseInt(addend2). Câu lệnh này hoạt động vì bạn đang bị tạm dừng trên một dòng mã có chứa addend1 và addend2.
3. Nhấn Enter. Công cụ cho nhà phát triển sẽ đánh giá câu lệnh và in 6. Đây là kết quả mà bạn mong đợi bản minh hoạ tạo ra.

Ảnh chụp màn hình ở trên cho thấy ngăn Bảng điều khiển sau khi đánh giá parseInt(addend1) + parseInt(addend2).

Bước 7: Áp dụng bản sửa lỗi

Bạn đã tìm thấy bản sửa lỗi cho lỗi này. Tất cả việc còn lại là thử khắc phục bằng cách chỉnh sửa mã và chạy lại bản minh hoạ. Bạn không cần phải rời khỏi Công cụ cho nhà phát triển để áp dụng bản sửa lỗi. Bạn có thể chỉnh sửa mã JavaScript trực tiếp trong giao diện người dùng Công cụ cho nhà phát triển. Hãy thử ngay:

1. Nhấp vào biểu tượng Tiếp tục thực thi tập lệnh .
2. Trong Code Editor (Trình soạn thảo mã), hãy thay thế dòng 31, var sum = addend1 + addend2 bằng var sum = parseInt(addend1) + parseInt(addend2).
3. Nhấn Command + S (Mac) hoặc Control + S (Windows, Linux) để lưu thay đổi của bạn.
4. Nhấp vào biểu tượng Huỷ kích hoạt điểm ngắt . Hộp cát về quyền riêng tư đổi sang màu xanh dương để cho biết trang web đang hoạt động. Trong khi thiết lập này, Công cụ cho nhà phát triển sẽ bỏ qua mọi điểm ngắt bạn đã đặt.
5. Hãy thử bản minh hoạ với các giá trị khác nhau. Bản minh hoạ hiện sẽ tính toán chính xác.

Thận trọng: Quy trình làm việc này chỉ áp dụng sửa lỗi cho mã đang chạy trong trình duyệt của bạn. Thao tác này sẽ không sửa mã cho tất cả người dùng truy cập vào trang của bạn. Để làm điều đó, bạn cần sửa mã nằm trên máy chủ của mình. Tuy nhiên, bạn có thể chỉnh sửa tệp trong Công cụ cho nhà phát triển và lưu tệp vào nguồn của mình bằng Không gian làm việc.

Lưu ý quan trọng: Kể từ Chrome phiên bản 105, bạn có thể Chỉnh sửa hàm bị tạm dừng trực tiếp.

Các bước tiếp theo

Xin chúc mừng! Giờ đây, bạn đã biết cách khai thác tối đa Công cụ của Chrome cho nhà phát triển khi gỡ lỗi JavaScript. Các công cụ và phương thức mà bạn đã tìm hiểu trong hướng dẫn này có thể giúp bạn tiết kiệm được rất nhiều giờ.

Hướng dẫn này chỉ cho bạn hai cách đặt điểm ngắt. Công cụ cho nhà phát triển cung cấp nhiều cách khác, bao gồm:

• Điểm ngắt có điều kiện chỉ được kích hoạt khi điều kiện bạn cung cấp là đúng.
• Điểm ngắt trên các ngoại lệ bị phát hiện hoặc chưa nắm bắt.
• Các điểm ngắt XHR được kích hoạt khi URL được yêu cầu khớp với chuỗi con mà bạn cung cấp.

Hãy xem bài viết Tạm dừng mã có điểm ngắt để tìm hiểu thời điểm và cách sử dụng từng loại.

Có một số chế độ điều khiển bước mã chưa được giải thích trong hướng dẫn này. Hãy xem bài viết Bước qua dòng mã để tìm hiểu thêm.