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 mọi vấn đề về 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.

Tái hiện lỗi

Việc tìm một loạt hành động 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 cho biết 5 + 1 = 51. Kết quả phải 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ụ cho nhà phát triển cung cấp nhiều công cụ cho nhiều tác vụ, chẳng hạn như thay đổi CSS, phân tích trang tải hiệu suất 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 rồi chuyển đến bảng điều khiển Nguồn.

   

Bảng điều khiển Sources (Nguồn) có 3 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 Trình soạn thảo mã. Sau khi chọn một tệp trong tab Trang, nội dung của tệp đó được hiển thị tại đâ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 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ã có điểm ngắt

Một phương pháp phổ biến để gỡ lỗi 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. Đáp đ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 điểm ngắt đó từng 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 phải mở mã nguồn, tìm mã có liên quan theo cách thủ công, chèn các câu lệnh console.log(), sau đó tải lại trang để xem các 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 đoạn mã có liên quan mà không cần biết mã đó như thế nào có cấu trúc.
• Trong các câu lệnh console.log(), bạn cần chỉ định rõ từng giá trị mà mình muốn kiểm tra. Với các đ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ả 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 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 chút và suy nghĩ về cách hoạt động của ứng dụng, bạn có thể đưa ra một phỏng đoán có cơ sở rằng tổng không chính xác (5 + 1 = 51) được tính 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 có thể muốn tạm dừng mã trong khoảng thời gian mà trình nghe click thực thi. Điểm ngắt trình xử lý sự kiện cho phép bạn thực hiện chính xác việc đó:

1. Trong mục Debugger (Trình gỡ lỗi), hãy nhấp vào Event Listener Breakpoints (Điểm ngắt trình xử lý sự kiện) để mở rộng . Công cụ cho nhà phát triển cho thấy 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 arrow_right Mở rộng. Công cụ cho nhà phát triển cho thấy danh sách các sự kiện chuột, chẳng hạn như nhấp chuột và nhấp chuột. 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. 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ỳ click nào trình nghe sự kiện sẽ 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à đánh dấu một dòng mã trong bảng điều khiển Sources (Nguồn). Bạn nên tạm dừng Công cụ cho nhà phát triển trên dòng này mã:

   function onClick() {
   

   Nếu bạn đang 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.

   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 click của tiện ích trình nghe. Nếu bạn sử dụng Chế độ ẩn danh để duyệt web ở chế độ riêng tư, chế độ này sẽ tắt tất cả tiện ích, bạn có thể thấy mình luôn tạm dừng trên dòng mã chính xác.

Điểm ngắt 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ây giờ đáng để khám phá tất cả các loại khác nhau, bởi vì mỗi loại cuối cùng đều giúp bạn gỡ lỗi các loại nhanh nhất có thể. 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 hãy 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à do một tập lệnh thực thi không đúng thứ tự. Duyệt qua mã của bạn cho phép bạn xem qua quá trình thực thi mã, từng dòng một và tìm ra chính xác vị trí nó đang 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 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 thi từng dòng onClick(). 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 can thiệp vào. Lưu ý cách Công cụ cho nhà phát triển bỏ qua một vài dòng của . Điều này là do inputsAreEmpty() được đánh giá là false, vì vậy, khối của câu lệnh if là không thực thi mã.

Đó 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 rằng lỗi có thể nằm ở đâu đó trong hàm updateLabel(). Thay vì bước qua mỗi 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ới khả năng vị trí của lỗi.

Đặ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 cụ thể mã 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 của mã, bạn có thể thấy số dòng của dòng mã cụ thể này, tức 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. Điều này có nghĩa là đ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 dòng mã này thực thi.

3. Nhấp vào Tiếp tục Tiếp tục thực thi tập lệnh. Chiến lược phát hành đĩa đơn 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 nội dung khai báo của chúng.

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

Kiểm tra các giá trị của biến

Các giá trị của addend1, addend2 và sum có vẻ đáng ngờ. Chúng được đặt trong dấu ngoặc kép, có nghĩa là chúng là 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. Bây 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 biến giá trị.

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

Khi bạn tạm dừng 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 này trong thực thi cùng với giá trị của mỗi biến. Công cụ này cũng cho biết các biến về trạng thái đóng, khi có thể áp dụng. 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ổ Công cụ cho nhà phát triển, thẻ Phạm vi có thể xuất hiện dưới dạng một mục 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ẻ Xem cho phép bạn theo dõi giá trị của các biến theo thời gian. Xem không chỉ giới hạn ở các biến. Bạn có thể lưu trữ mọi JavaScript hợp lệ 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ổ Công cụ cho nhà phát triển, thẻ Xem có thể xuất hiện dưới dạng một mục có thể thu gọn cùng với Điểm ngắt và Ngăn xếp lệnh gọi.

Hãy thử ngay:

1. Nhấp vào thẻ Xem.
2. Nhấp vào add Thêm biểu thức theo dõi.
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ẻ Xem (ở dưới cùng bên phải) sau khi tạo đồng hồ typeof sum biểu thức.

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ố. Bạn đã xác nhận xong đâ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âu lệnh JavaScript. Về mặt gỡ lỗi, bạn có thể sử dụng Console để thử nghiệm các bản sửa lỗi tiềm năng để phát hiện lỗi. Hãy thử ngay:

1. Nếu bạn không mở ngăn Console, hãy nhấn phím Escape để mở ngăn đó. Cửa sổ này sẽ mở ở cuối cửa sổ Công cụ cho nhà phát triển.
2. Trong Bảng điều khiển, 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ã 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à xuất ra 6. Đây là kết quả mà bạn mong đợi bản minh hoạ để sản xuất.

Ả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 vấn đề 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 ngay 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 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 của nút chuyển sang màu xanh dương để cho biết rằng nút này đang hoạt động. Khi đặt tuỳ chọn 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 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. Không sửa mã cho tất cả người dùng truy cập trang của bạn. Để làm điều đó, bạn cần sửa mã trên máy chủ. 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 các tệp đó vào nguồn bằng Không gian làm việc.

Lưu ý: 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. Chiến lược phát hành đĩa đơn các công cụ và phương pháp 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 bạn cung cấp là true.
• Điểm ngắt trong các trường hợp ngoại lệ phát hiện được hoặc chưa nắm bắt đượ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ố biện pháp kiểm soát bước mã không được giải thích trong hướng dẫn này. Xem phần Bước qua dòng mã để tìm hiểu thêm.