Gỡ lỗi JavaScript

Kayce Basques

Sofia Emelianova

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

Tái tạo lỗi

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

1. Mở bản minh hoạ này trong thẻ mới.
2. Nhập 5 vào hộp Số 1.
3. Nhập 1 vào hộp 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ẽ sửa.

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

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 nhiều nhiệm vụ, chẳng hạn như thay đổi CSS, phân tích hiệu suất tải trang và theo dõi các yêu cầu về 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 rồi chuyển đến bảng điều khiển Nguồn.

   

Bảng điều khiển Nguồn có ba phần:

1. Thẻ Page (Trang) có cây tệp. Mọi tệp mà trang yêu cầu đều được liệt kê ở đây.
2. Phần Code Editor (Trình soạn thảo mã). Sau khi chọn một tệp trong thẻ Trang, nội dung của tệp đó sẽ hiện ở đây.

3. Mục Debugger (Trình gỡ lỗi). Nhiều công cụ để kiểm tra JavaScript của trang.

   Nếu cửa sổ Công cụ cho nhà phát triển của bạn rộng thì theo mặc định, Trình gỡ lỗi sẽ nằm ở bên phải của Trình soạn thảo mã. Trong trường hợp này, thẻ Phạm vi và thẻ Xem sẽ kết hợp với Điểm ngắt, Ngăn xếp cuộc gọi và các thẻ khác dưới dạng các phần có thể thu gọn.

Tạm dừng mã bằng một điểm ngắt

Một phương pháp phổ biến để gỡ lỗi những sự cố như thế nà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ã giữa quá trình thực thi và kiểm tra tất cả giá trị tại thời điểm đó. Điểm ngắt có một số ưu điểm so với phương thức console.log():

• 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() rồi 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ã 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ã mà bạn thậm chí không biết.

Tóm lại, các điểm ngắt có thể giúp bạn tìm và sửa lỗi nhanh hơn 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 phán đoán hợp lý 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 làm chính xác điều đó:

1. Trong mục Debugger (Trình gỡ lỗi), hãy nhấp vào Event Listener Breakpoints (Điểm ngắt của trình xử lý sự kiện) để mở rộng phần này. Công cụ cho nhà phát triển hiển thị 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 mạch.
2. Bên cạnh danh mục sự kiện Chuột, hãy nhấp vào arrow_right 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à nhấp chuột. Mỗi sự kiện đều có một hộp đánh dấu bên cạnh.

3. Chọn hộp kiểm nhấp chuột. 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 bị tạm dừng trên một dòng mã khác, hãy nhấn vào Tiếp tục 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.

Điểm ngắt của trình xử lý 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 tìm hiểu tất cả các loại khác nhau vì sau cùng mỗi loại sẽ giúp bạn gỡ lỗi 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.

Duyệt qua mã

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

1. Trên bảng điều khiển Nguồn của Công cụ cho nhà phát triển, hãy nhấp vào step_into Bước vào lệnh gọi hàm tiếp theo để thực hiện một onClick() một dòng mỗi lần. 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 step_over 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 sử dụng. 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á là false, vì vậy, khối mã của câu lệnh if không thực thi.

Đó là ý tưởng cơ bản về việc thực hiện các bước thông qua mã. Nếu xem mã trong get-started.js, bạn có thể thấy rằng 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.

Đặ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. Hãy 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 Tiếp tục Tiếp tục thực thi tập lệnh. Tập lệnh này 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 nội dung khai báo.

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.

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 tham số này được đặt trong dấu ngoặc kép, nghĩa là chúng là các chuỗi. Đây là một giả thuyết tốt để giải thích nguyên nhân của lỗi. Giờ là lúc thu thập thêm thông tin. Công cụ cho nhà phát triển cung cấp rất nhiều công cụ để kiểm tra các giá trị biến.

Phương pháp 1: Kiểm tra phạm vi

Khi bạn bị tạm dừng ở một dòng mã, thẻ Scope (Phạm vi) sẽ cho bạn biết biến cục bộ và biến toàn cục nào được xác định tại thời điểm này trong quá trình thực thi, cùng với giá trị của mỗi biến. Báo cáo này cũng cho thấy các biến về trạng thái kết thúc (nếu có). Khi bạn không tạm dừng ở một dòng mã, thẻ Phạm vi sẽ trống.

Nhấp đúp vào một giá trị biến để chỉnh sửa giá trị đó.

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

Thẻ Xem cho phép bạn theo dõi giá trị của các biến theo thời gian. Trang Xem không chỉ giới hạn ở các biến. Bạn có thể lưu trữ bất kỳ biểu thức JavaScript hợp lệ nào trong thẻ Xem.

Hãy thử ngay:

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

Ảnh chụp màn hình này cho thấy thẻ Watch (Xem) (ở dưới cùng bên phải) sau khi tạo biểu thức xem typeof sum.

Như bị nghi ngờ, sum đang được đánh giá dưới dạng một chuỗi, trong khi đó phải là một số. Bạn hiệ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 Console, nhấn Escape để mở ngăn. Tệp này 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, hãy nhập parseInt(addend1) + parseInt(addend2). Câu lệnh này có hiệu quả vì bạn bị tạm dừng trên một dòng mã nơi addend1 và addend2 thuộc phạm vi.
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ạ sẽ tạo ra.

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

Áp dụng cách khắc phục

Bạn đã tìm thấy bản sửa lỗi cho lỗi này. Bạn chỉ cần 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 cho Công cụ cho nhà phát triển. Hãy thử ngay:

1. Nhấp vào Tiếp tục 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 label_off Huỷ kích hoạt điểm ngắt. Tính năng này sẽ chuyển sang màu xanh dương để cho biết tính năng đang hoạt động. Trong khi đặt giá trị này, Công cụ cho nhà phát triển sẽ bỏ qua mọi điểm ngắt mà 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 được tính toán chính xác.

Các bước tiếp theo

Hướng dẫn này chỉ hướng dẫn bạn 2 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 trường hợp ngoại lệ đã phát hiện hoặc chưa được phát hiện.
• Đ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.

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. Xem nội dung Bước qua dòng mã để tìm hiểu thêm.