Làm cách nào để sửa lỗi JavaScript?

Nói chung, khi bạn làm sai điều gì đó trong mã, có hai loại lỗi chính mà bạn sẽ gặp phải

• Lỗi cú pháp. Đây là những lỗi chính tả trong mã của bạn thực sự khiến chương trình hoàn toàn không chạy hoặc dừng hoạt động giữa chừng — bạn cũng sẽ thường nhận được một số thông báo lỗi. Những lỗi này thường có thể sửa được, miễn là bạn quen thuộc với các công cụ phù hợp và biết ý nghĩa của các thông báo lỗi
• lỗi logic. Đây là những lỗi mà cú pháp thực sự đúng nhưng mã không như bạn dự định, nghĩa là chương trình chạy thành công nhưng cho kết quả không chính xác. Những lỗi này thường khó sửa hơn lỗi cú pháp, vì thường không có thông báo lỗi hướng bạn đến nguồn gốc của lỗi

Được rồi, vì vậy nó không hoàn toàn đơn giản - có một số điểm khác biệt khác khi bạn tìm hiểu sâu hơn. Nhưng những phân loại trên sẽ phù hợp ở giai đoạn đầu này trong sự nghiệp của bạn. Chúng ta sẽ xem xét cả hai loại này trong tương lai

Để bắt đầu, hãy quay lại trò chơi đoán số của chúng ta — ngoại trừ lần này chúng ta sẽ khám phá một phiên bản có một số lỗi cố ý được giới thiệu. Truy cập GitHub và tạo cho mình một bản sao cục bộ của lỗi trò chơi số. html [xem nó đang chạy trực tiếp tại đây]

1. Để bắt đầu, hãy mở bản sao cục bộ bên trong trình soạn thảo văn bản yêu thích của bạn và trình duyệt của bạn
2. Hãy thử chơi trò chơi — bạn sẽ nhận thấy rằng khi nhấn nút "Gửi dự đoán", trò chơi không hoạt động

Ghi chú. Bạn có thể có phiên bản ví dụ trò chơi của riêng mình không hoạt động, bạn có thể muốn sửa lỗi này. Chúng tôi vẫn muốn bạn hoàn thành bài viết với phiên bản của chúng tôi để bạn có thể học các kỹ thuật mà chúng tôi đang dạy ở đây. Sau đó, bạn có thể quay lại và thử sửa ví dụ của mình

Lúc này các bạn tham khảo developer console xem nó có báo lỗi cú pháp nào không rồi khắc phục nhé. Bạn sẽ tìm hiểu làm thế nào dưới đây

Trước đó trong khóa học, chúng tôi đã hướng dẫn bạn nhập một số lệnh JavaScript đơn giản vào bảng điều khiển JavaScript của công cụ dành cho nhà phát triển [nếu bạn không thể nhớ cách mở lệnh này trong trình duyệt của mình, hãy theo liên kết trước để tìm hiểu cách thực hiện]. Điều hữu ích hơn nữa là bảng điều khiển cung cấp cho bạn thông báo lỗi bất cứ khi nào có lỗi cú pháp bên trong JavaScript được đưa vào công cụ JavaScript của trình duyệt. Bây giờ chúng ta hãy đi săn

1. Chuyển đến tab mà bạn đã mở

   lowOrHi.textContent = "Last guess was too high!";
   

   8 và mở bảng điều khiển JavaScript của bạn. Bạn sẽ thấy một thông báo lỗi dọc theo các dòng sau.
2. Đây là một lỗi khá dễ theo dõi và trình duyệt cung cấp cho bạn một số thông tin hữu ích để giúp bạn [ảnh chụp màn hình ở trên là từ Firefox, nhưng các trình duyệt khác cung cấp thông tin tương tự]. Từ trái sang phải, chúng ta có
   • Dấu "x" màu đỏ để cho biết đây là lỗi
   • Một thông báo lỗi cho biết có gì sai. "Lỗi loại. đoánGửi. addeventListener không phải là một chức năng"
   • Liên kết "Tìm hiểu thêm" liên kết đến trang MDN giải thích ý nghĩa của lỗi này một cách chi tiết hơn
   • Tên của tệp JavaScript, liên kết đến tab Trình gỡ lỗi của các công cụ dành cho nhà phát triển. Nếu bạn theo liên kết này, bạn sẽ thấy chính xác dòng có lỗi được tô sáng
   • Số dòng có lỗi và số ký tự trong dòng có lỗi lần đầu tiên. Trong trường hợp này, chúng ta có dòng 86, ký tự số 3
3. Nếu chúng ta xem dòng 86 trong trình chỉnh sửa mã của mình, chúng ta sẽ tìm thấy dòng này

   Cảnh báo. Thông báo lỗi có thể không có trên dòng 86

   Nếu bạn đang sử dụng bất kỳ trình chỉnh sửa mã nào có tiện ích mở rộng khởi chạy máy chủ trực tiếp trên máy cục bộ của mình, điều này sẽ khiến mã bổ sung được đưa vào. Do đó, các công cụ dành cho nhà phát triển sẽ liệt kê lỗi xảy ra trên một dòng không phải là 86

   guessSubmit.addeventListener["click", checkGuess];
   

4. Thông báo lỗi cho biết "guessSubmit. addeventListener không phải là một chức năng", điều đó có nghĩa là chức năng chúng tôi đang gọi không được trình thông dịch JavaScript nhận ra. Thông thường, thông báo lỗi này thực sự có nghĩa là chúng tôi đã viết sai chính tả. Nếu bạn không chắc chắn về cách viết đúng của một đoạn cú pháp, bạn nên tra cứu tính năng này trên MDN. Cách tốt nhất để thực hiện việc này hiện tại là tìm kiếm "mdn name-of-feature" bằng công cụ tìm kiếm yêu thích của bạn. Đây là một lối tắt để giúp bạn tiết kiệm thời gian trong trường hợp này.

   lowOrHi.textContent = "Last guess was too high!";
   

   9
5. Vì vậy, nhìn vào trang này, lỗi xuất hiện là do chúng tôi đã đánh vần sai tên hàm. Hãy nhớ rằng JavaScript phân biệt chữ hoa chữ thường, do đó, bất kỳ sự khác biệt nhỏ nào về chính tả hoặc cách viết hoa đều sẽ gây ra lỗi. Thay đổi

   const lowOrHi = document.querySelector["lowOrHi"];
   

   0 thành

   const lowOrHi = document.querySelector["lowOrHi"];
   

   1 sẽ khắc phục điều này. Làm ngay bây giờ

Ghi chú. Xem TypeError của chúng tôi. "x" không phải là trang tham chiếu chức năng để biết thêm chi tiết về lỗi này

1. Lưu trang của bạn và làm mới, và bạn sẽ thấy lỗi đã biến mất
2. Bây giờ nếu bạn thử nhập một dự đoán và nhấn nút Gửi dự đoán, bạn sẽ thấy một lỗi khác.
3. Lần này, lỗi được báo cáo là "TypeError. lowOrHi là null", trên dòng 78

   Ghi chú.

   const lowOrHi = document.querySelector["lowOrHi"];
   

   2 là một giá trị đặc biệt có nghĩa là "không có gì" hoặc "không có giá trị". Vì vậy,

   const lowOrHi = document.querySelector["lowOrHi"];
   

   3 đã được khai báo và khởi tạo, nhưng không có bất kỳ giá trị có ý nghĩa nào — nó không có loại hoặc giá trị

   Ghi chú. Lỗi này không xuất hiện ngay khi trang được tải vì lỗi này xảy ra bên trong một hàm [bên trong khối

   const lowOrHi = document.querySelector["lowOrHi"];
   

   4]. Như bạn sẽ tìm hiểu chi tiết hơn trong bài viết về hàm sau này của chúng tôi, mã bên trong hàm chạy trong một phạm vi riêng biệt so với mã bên ngoài hàm. Trong trường hợp này, mã không được chạy và lỗi không được đưa ra cho đến khi hàm

   const lowOrHi = document.querySelector["lowOrHi"];
   

   5 được chạy ở dòng 86

4. Hãy xem dòng 78 và bạn sẽ thấy đoạn mã sau

   lowOrHi.textContent = "Last guess was too high!";
   

5. Dòng này đang cố đặt thuộc tính

   const lowOrHi = document.querySelector["lowOrHi"];
   

   6 của hằng số

   const lowOrHi = document.querySelector["lowOrHi"];
   

   3 thành chuỗi văn bản, nhưng nó không hoạt động vì

   const lowOrHi = document.querySelector["lowOrHi"];
   

   3 không chứa những gì nó phải chứa. Hãy xem tại sao lại như vậy — hãy thử tìm kiếm các trường hợp khác của

   const lowOrHi = document.querySelector["lowOrHi"];
   

   3 trong mã. Ví dụ sớm nhất bạn sẽ tìm thấy trong JavaScript là ở dòng 49

   const lowOrHi = document.querySelector["lowOrHi"];
   

6. Tại thời điểm này, chúng tôi đang cố gắng tạo biến chứa tham chiếu đến một phần tử trong HTML của tài liệu. Hãy kiểm tra xem giá trị có phải là

   guessSubmit.addeventListener["click", checkGuess];
   

   50 sau khi chạy dòng này không. Thêm mã sau vào dòng 50

   guessSubmit.addeventListener["click", checkGuess];
   

   5

   Ghi chú.

   guessSubmit.addeventListener["click", checkGuess];
   

   51 là một chức năng sửa lỗi thực sự hữu ích, in một giá trị ra bảng điều khiển. Vì vậy, nó sẽ in giá trị của

   const lowOrHi = document.querySelector["lowOrHi"];
   

   3 ra bàn điều khiển ngay khi chúng tôi cố gắng đặt nó ở dòng 49

7. Lưu và làm mới, bây giờ bạn sẽ thấy kết quả

   guessSubmit.addeventListener["click", checkGuess];
   

   51 trong bảng điều khiển của mình.
   Chắc chắn rồi, giá trị của

   const lowOrHi = document.querySelector["lowOrHi"];
   

   3 là

   guessSubmit.addeventListener["click", checkGuess];
   

   50 vào thời điểm này, vì vậy chắc chắn có vấn đề với dòng 49.
8. Hãy nghĩ xem vấn đề có thể là gì. Dòng 49 đang sử dụng phương pháp

   guessSubmit.addeventListener["click", checkGuess];
   

   56 để lấy tham chiếu đến một phần tử bằng cách chọn phần tử đó bằng bộ chọn CSS. Nhìn sâu hơn vào tệp của chúng tôi, chúng tôi có thể tìm thấy đoạn văn được đề cập

   lowOrHi.textContent = "Last guess was too high!";
   

   3

9. Vì vậy, chúng tôi cần một bộ chọn lớp ở đây, bắt đầu bằng dấu chấm [

   guessSubmit.addeventListener["click", checkGuess];
   

   57], nhưng bộ chọn được chuyển vào phương thức

   guessSubmit.addeventListener["click", checkGuess];
   

   58 trong dòng 49 không có dấu chấm. Nó có thể là vấn đề. Hãy thử thay đổi

   const lowOrHi = document.querySelector["lowOrHi"];
   

   3 thành

   lowOrHi.textContent = "Last guess was too high!";
   

   30 ở dòng 49
10. Hãy thử lưu và làm mới lại, và câu lệnh

    guessSubmit.addeventListener["click", checkGuess];
    

    51 của bạn sẽ trả về phần tử

    lowOrHi.textContent = "Last guess was too high!";
    

    32 mà chúng ta muốn. Phù. Một lỗi khác đã được sửa. Bạn có thể xóa dòng

    guessSubmit.addeventListener["click", checkGuess];
    

    51 của mình ngay bây giờ hoặc giữ nó để tham khảo sau này — tùy bạn

Ghi chú. Xem TypeError của chúng tôi. Trang tham khảo "x" là [không phải] "y" để biết thêm chi tiết về lỗi này

1. Bây giờ, nếu bạn thử chơi lại trò chơi, bạn sẽ đạt được nhiều thành công hơn — trò chơi sẽ diễn ra hoàn toàn bình thường, cho đến khi bạn kết thúc trò chơi, bằng cách đoán đúng số hoặc bằng cách hết số lần đoán
2. Tại thời điểm đó, trò chơi lại bị lỗi và lỗi tương tự xuất hiện mà chúng tôi gặp phải lúc đầu - "TypeError. nút reset. addeventListener không phải là một chức năng". Tuy nhiên, lần này nó được liệt kê là đến từ dòng 94
3. Nhìn vào dòng số 94, dễ dàng thấy rằng chúng ta đã mắc lỗi tương tự ở đây. Một lần nữa chúng ta chỉ cần thay đổi

   const lowOrHi = document.querySelector["lowOrHi"];
   

   0 thành

   const lowOrHi = document.querySelector["lowOrHi"];
   

   1. Làm ngay bây giờ

Tại thời điểm này, trò chơi sẽ diễn ra suôn sẻ, tuy nhiên sau khi chơi qua một vài lần, chắc chắn bạn sẽ nhận thấy rằng số "ngẫu nhiên" mà bạn phải đoán luôn là 1. Chắc chắn không hoàn toàn như cách chúng tôi muốn trò chơi diễn ra

Chắc chắn có vấn đề ở đâu đó trong logic trò chơi — trò chơi không trả về lỗi;

1. Tìm kiếm biến

   lowOrHi.textContent = "Last guess was too high!";
   

   36 và các dòng nơi đặt số ngẫu nhiên đầu tiên. Trường hợp lưu trữ số ngẫu nhiên mà chúng tôi muốn đoán khi bắt đầu trò chơi phải ở khoảng dòng số 45

   const lowOrHi = document.querySelector["lowOrHi"];
   

   4

2. Và trò chơi tạo số ngẫu nhiên trước mỗi trò chơi tiếp theo nằm ở dòng 113

   const lowOrHi = document.querySelector["lowOrHi"];
   

   5

3. Để kiểm tra xem những dòng này có thực sự là vấn đề hay không, hãy quay lại với người bạn

   guessSubmit.addeventListener["click", checkGuess];
   

   51 của chúng ta — chèn dòng sau ngay bên dưới mỗi dòng trong số hai dòng trên

   const lowOrHi = document.querySelector["lowOrHi"];
   

   7

4. Lưu và làm mới, sau đó chơi một vài trò chơi — bạn sẽ thấy rằng

   lowOrHi.textContent = "Last guess was too high!";
   

   36 bằng 1 tại mỗi điểm mà nó được ghi vào bảng điều khiển

Để khắc phục điều này, hãy xem xét cách thức hoạt động của dòng này. Đầu tiên, chúng tôi gọi

lowOrHi.textContent = "Last guess was too high!";

const lowOrHi = document.querySelector["lowOrHi"];

Tiếp theo, chúng tôi chuyển kết quả của việc gọi

lowOrHi.textContent = "Last guess was too high!";

const lowOrHi = document.querySelector["lowOrHi"];

const lowOrHi = document.querySelector["lowOrHi"];

Làm tròn một số thập phân ngẫu nhiên trong khoảng từ 0 đến 1 xuống sẽ luôn trả về 0, do đó, thêm 1 vào số đó sẽ luôn trả về 1. Chúng ta cần nhân số ngẫu nhiên với 100 trước khi làm tròn số đó. Sau đây sẽ cho chúng ta một số ngẫu nhiên trong khoảng từ 0 đến 99

lowOrHi.textContent = "Last guess was too high!";

Do đó, chúng tôi muốn thêm 1, để cung cấp cho chúng tôi một số ngẫu nhiên trong khoảng từ 1 đến 100

lowOrHi.textContent = "Last guess was too high!";

Hãy thử cập nhật cả hai dòng như thế này, sau đó lưu và làm mới - trò chơi bây giờ sẽ chơi như chúng ta dự định

Có những lỗi phổ biến khác mà bạn sẽ gặp phải trong mã của mình. Phần này làm nổi bật hầu hết trong số họ

Lỗi này thường có nghĩa là bạn đã bỏ sót dấu chấm phẩy ở cuối một trong các dòng mã của mình, nhưng đôi khi nó có thể khó hiểu hơn. Ví dụ: nếu chúng ta thay đổi dòng này bên trong hàm

const lowOrHi = document.querySelector["lowOrHi"];

lowOrHi.textContent = "Last guess was too high!";

đến

lowOrHi.textContent = "Last guess was too high!";

Nó đưa ra lỗi này vì nó nghĩ rằng bạn đang cố gắng làm điều gì đó khác biệt. Bạn nên đảm bảo rằng bạn không trộn lẫn toán tử gán [

const lowOrHi = document.querySelector["lowOrHi"];

const lowOrHi = document.querySelector["lowOrHi"];

Ghi chú. Xem SyntaxError của chúng tôi. còn thiếu ;

Đây có thể là một triệu chứng khác của việc trộn lẫn các toán tử gán và đẳng thức nghiêm ngặt. Ví dụ: nếu chúng tôi thay đổi dòng này bên trong

const lowOrHi = document.querySelector["lowOrHi"];

lowOrHi.textContent = "Last guess was too high!";

đến

lowOrHi.textContent = "Last guess was too high!";

bài kiểm tra sẽ luôn trả về

const lowOrHi = document.querySelector["lowOrHi"];

Điều này khá đơn giản - nó thường có nghĩa là bạn đã bỏ lỡ dấu ngoặc đơn đóng ở cuối lệnh gọi hàm/phương thức

Ghi chú. Xem SyntaxError của chúng tôi. thiếu ] sau trang tham khảo danh sách đối số để biết thêm chi tiết về lỗi này

Lỗi này thường liên quan đến một đối tượng JavaScript được định dạng không chính xác, nhưng trong trường hợp này, chúng tôi đã khắc phục được lỗi này bằng cách thay đổi

lowOrHi.textContent = "Last guess was too high!";

đến

lowOrHi.textContent = "Last guess was too high!";

Điều này khiến trình duyệt nghĩ rằng chúng ta đang cố chuyển nội dung của hàm vào hàm dưới dạng đối số. Hãy cẩn thận với những dấu ngoặc đơn

Điều này thật dễ dàng — nó thường có nghĩa là bạn đã bỏ lỡ một trong các dấu ngoặc nhọn của mình từ một hàm hoặc cấu trúc điều kiện. Chúng tôi gặp lỗi này do xóa một trong các dấu ngoặc nhọn đóng gần cuối hàm

const lowOrHi = document.querySelector["lowOrHi"];

Những lỗi này thường có nghĩa là bạn đã bỏ qua dấu ngoặc kép mở hoặc đóng của một giá trị chuỗi. Trong lỗi đầu tiên ở trên, chuỗi sẽ được thay thế bằng [các] ký tự không mong muốn mà trình duyệt tìm thấy thay vì dấu ngoặc kép ở đầu chuỗi. Lỗi thứ hai có nghĩa là chuỗi chưa được kết thúc bằng dấu ngoặc kép

Đối với tất cả các lỗi này, hãy nghĩ về cách chúng tôi giải quyết các ví dụ mà chúng tôi đã xem xét trong phần hướng dẫn. Khi phát sinh lỗi, hãy nhìn vào số dòng bạn được cung cấp, đi đến dòng đó và xem liệu bạn có thể phát hiện ra lỗi không. Hãy nhớ rằng lỗi không nhất thiết phải xảy ra trên dòng đó và lỗi cũng có thể không phải do chính vấn đề mà chúng tôi đã trích dẫn ở trên gây ra

Ghi chú. Xem SyntaxError của chúng tôi. Mã thông báo không mong muốn và SyntaxError. các trang tham khảo chuỗi ký tự chưa kết thúc để biết thêm chi tiết về các lỗi này

Vậy là chúng ta đã có những điều cơ bản để tìm ra lỗi trong các chương trình JavaScript đơn giản. Không phải lúc nào cũng đơn giản để tìm ra lỗi trong mã của bạn, nhưng ít nhất điều này sẽ giúp bạn tiết kiệm được vài giờ ngủ và cho phép bạn tiến bộ nhanh hơn một chút khi mọi thứ không như ý muốn, đặc biệt là trong giai đoạn đầu.

Làm cách nào để sửa lỗi loại trong JavaScript?

Lỗi JavaScript nghĩa là gì?

Làm cách nào để kiểm tra lỗi JavaScript trong trình duyệt?