Gỡ lỗi JavaScript

Kayce Basques

Sofia Emelianova

Hướng dẫn này sẽ hướng dẫn bạn quy trình làm việc cơ bản để gỡ lỗi mọi vấn đề về JavaScript trong DevTools. Hãy đọc tiếp hoặc xem phiên bản video của hướng dẫn này.

Tái hiện lỗi

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

1. Mở bản minh hoạ này trong một 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 có nội dung 5 + 1 = 51. Kết quả sẽ là 6. Đây là lỗi bạn sẽ khắc phục.

Trong ví dụ này, kết quả của 5 + 1 là 51. 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ụ dành cho nhà phát triển cung cấp nhiều công cụ khác nhau cho nhiều tác 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 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ẻ Trang có cây tệp. Mọi tệp mà trang yêu cầu đều được liệt kê tại đây.
2. Phần Code Editor (Trình soạn thảo mã). Sau khi chọn một tệp trong thẻ Page, nội dung của tệp đó sẽ hiển thị ở đây.

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

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

Một phương pháp phổ biến để gỡ lỗi vấn đề như thế này là chèn nhiều câu lệnh console.log() vào 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ã trong quá trình thực thi và kiểm tra tất cả cá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ác câu lệnh console.log(), sau đó tải lại trang để xem thông báo trong Console. 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â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 các điểm ngắt, DevTools sẽ cho bạn biết giá trị của tất cả các biến tại thời điểm đó. Đôi khi, có những biến ảnh hưởng đến mã của bạn mà bạn thậm chí không hề 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 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ể đoán chắc chắ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 Add Number 1 and Number 2 (Thêm số 1 và số 2). Do đó, bạn có thể muốn tạm dừng mã vào khoảng thời gian trình nghe click thực thi. Các điểm ngắt của trình nghe sự kiện cho phép bạn thực hiện chính xác việc đó:

1. Trong phần Trình gỡ lỗi, hãy nhấp vào Điểm ngắt trình nghe sự kiện để mở rộng phần này. Công cụ cho nhà phát triển sẽ hiển thị 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 arrow_right Mở rộng. Công cụ cho nhà phát triển sẽ hiển thị danh sách các sự kiện chuột, chẳng hạn như click và mousedown. Mỗi sự kiện đều có một hộp đánh dấu bên cạnh.

3. Đánh dấu vào hộp nhấp. DevTools 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 sẽ 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 Sources (Nguồn). Bạn nên tạm dừng DevTools ở dòng mã này:

   function onClick() {
   

   Nếu bạn bị tạm dừng ở 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 bị tạm dừng ở đú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 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ư (chế độ này sẽ tắt tất cả các tiện ích), bạn có thể thấy rằng mình luôn tạm dừng ở đúng dòng mã.

Các đ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 DevTools. Bạn nên khám phá tất cả các loại, vì mỗi loại đều 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.

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. Tính năng duyệt qua mã cho phép bạn xem quá trình thực thi mã, từng dòng một, và tìm ra chính xác vị trí mã thực thi theo thứ tự khác với dự kiến. Hãy thử ngay:

1. Trên bảng điều khiển Sources (Nguồn) của DevTools, hãy nhấp vào step_into Step into next function call (Bước vào lệnh gọi hàm tiếp theo) để thực thi từng dòng một của hàm onClick(). Công cụ cho nhà phát triển sẽ 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 can thiệp vào. Hãy lưu ý cách DevTools bỏ qua một vài dòng mã. Điều này là do inputsAreEmpty() được đánh giá là sai, vì vậy, khối mã của câu lệnh if không thực thi.

Đó là ý tưởng cơ bản khi thực hiện các bước trong 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ã đến 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 số 32. Điều này có nghĩa là có một điểm ngắt dòng mã trên dòng này. Giờ đây, DevTools luôn tạm dừng trước khi dòng mã này được thực thi.

3. Nhấp vào tiếp tục Tiếp tục thực thi tập lệnh. Tập lệnh tiếp tục thực thi cho đến khi đến dòng 32. Trên các dòng 29, 30 và 31, Công cụ cho nhà phát triển hiển thị 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, DevTools tạm dừng tại điểm ngắt dòng mã trên dòng 32.

Kiểm tra giá trị biến

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

Phương thức 1: Kiểm tra phạm vi

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

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

Lưu ý: Tuỳ thuộc vào lựa chọn ưu tiên về bố cục và chiều rộng của cửa sổ DevTools, thẻ Phạm vi có thể xuất hiện dưới dạng một phần có thể thu gọn cùng với Điểm ngắt và Ngăn xếp lệnh gọi.

Phương pháp 2: Biểu thức theo dõi

Thẻ Watch (Đồng hồ) cho phép bạn theo dõi các giá trị của biến theo thời gian. Watch 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ẻ Watch (Xem).

Lưu ý: Tuỳ thuộc vào lựa chọn ưu tiên về bố cục và chiều rộng của cửa sổ DevTools, thẻ Watch (Theo dõi) có thể xuất hiện dưới dạng một phần có thể thu gọn cùng với Breakpoints (Điểm ngắt) và Call stack (Ngăn xếp lệnh gọi).

Hãy thử ngay:

1. Nhấp vào thẻ Xem.
2. Nhấp vào thêm Thêm biểu thức canh gá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.

Ả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ư đã nghi ngờ, sum sẽ được đánh giá dưới dạng một chuỗi khi lẽ ra phải là một số. Giờ bạn đã xác nhận rằng đây là nguyên nhân gây ra lỗi.

Phương thức 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 Bảng điều khiển để đá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 chưa mở ngăn Console, hãy nhấn phím Escape để mở ngăn này. Cửa sổ này sẽ mở ra ở cuối cửa sổ DevTools.
2. Trong Bảng điều khiển, nhập parseInt(addend1) + parseInt(addend2). Câu lệnh này có tác dụng vì bạn bị tạm dừng trên một dòng mã trong đó addend1 và addend2 thuộc phạm vi.
3. Nhấn Enter. Công cụ cho nhà phát triển đá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 này cho thấy ngăn Console (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 cách khắc phục lỗi. Tất cả những gì còn lại là thử nghiệm bản sửa lỗi 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 DevTools để á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ủa DevTools. 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 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 (máy 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. Màu sắc của huy hiệu chuyển sang màu xanh dương để cho biết Trợ lý đang hoạt động. Khi bạn đặt giá trị này, DevTools 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ây giờ, bản minh hoạ sẽ tính toán chính xác.

Thận trọng: Quy trình này chỉ áp dụng bản 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 được việc đó, bạn cần sửa mã trên máy chủ của mình. Tuy nhiên, bạn có thể chỉnh sửa tệp trong DevTools và lưu tệp vào nguồn bằng Workspaces.

Mẹo: Kể từ Chrome phiên bản 105, bạn có thể Chỉnh sửa trực tiếp một hàm bị tạm dừng.

Các bước tiếp theo

Thành công: 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 bạn đã tìm hiểu trong hướng dẫn này có thể giúp bạn tiết kiệm vô số giờ.

Hướng dẫn này chỉ cho bạn biết 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 mà bạn cung cấp là đúng.
• Điểm ngắt trên các ngoại lệ đã phát hiện hoặc chưa 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.

Hãy xem bài viết Tạm dừng mã bằng đ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 phần Bước qua dòng mã để tìm hiểu thêm.