Thách thức gỡ lỗi JavaScript

Bạn có thể và sẽ gặp lỗi khi viết chương trình. Lỗi không nhất thiết là xấu. Trên thực tế, hầu hết thời gian, chúng giúp chúng tôi xác định các vấn đề với mã của chúng tôi. Điều cần thiết là bạn biết cách gỡ lỗi mã của mình và sửa lỗi

Gỡ lỗi là quá trình kiểm tra chương trình, tìm lỗi và sửa lỗi

Có nhiều cách khác nhau để bạn có thể gỡ lỗi chương trình JavaScript của mình

---

1. Sử dụng bảng điều khiển. nhật ký()

Bạn có thể sử dụng phương pháp

let launchReady = false;
let fuelLevel = 17000;

if (fuelLevel >= 20000 {
   console.log('Fuel level cleared.');
   launchReady = true;
} else {
   console.log('WARNING: Insufficient fuel!');
   launchReady = false;
}

6 để gỡ lỗi mã. Bạn có thể chuyển giá trị bạn muốn kiểm tra vào phương thức

let launchReady = false;
let fuelLevel = 17000;

if (fuelLevel >= 20000 {
   console.log('Fuel level cleared.');
   launchReady = true;
} else {
   console.log('WARNING: Insufficient fuel!');
   launchReady = false;
}

6 và xác minh xem dữ liệu có chính xác không

Cú pháp là

console.log(object/message);

Bạn có thể chuyển đối tượng trong

let launchReady = false;
let fuelLevel = 17000;

if (fuelLevel >= 20000 {
   console.log('Fuel level cleared.');
   launchReady = true;
} else {
   console.log('WARNING: Insufficient fuel!');
   launchReady = false;
}

6 hoặc đơn giản là một chuỗi tin nhắn

Trong hướng dẫn trước, chúng ta đã sử dụng phương thức

let launchReady = false;
let fuelLevel = 17000;

if (fuelLevel >= 20000 {
   console.log('Fuel level cleared.');
   launchReady = true;
} else {
   console.log('WARNING: Insufficient fuel!');
   launchReady = false;
}

6 để in kết quả. Tuy nhiên, bạn cũng có thể sử dụng phương pháp này để gỡ lỗi. Ví dụ,

let a = 5;
let b = 'asdf';
let c = a + b;

// if you want to see the value of c
console.log(c);

// then do other operations
if(c) {
    // do something
}

Sử dụng phương pháp

let launchReady = false;
let fuelLevel = 17000;

if (fuelLevel >= 20000 {
   console.log('Fuel level cleared.');
   launchReady = true;
} else {
   console.log('WARNING: Insufficient fuel!');
   launchReady = false;
}

6 trong trình duyệt sẽ mở giá trị trong cửa sổ trình gỡ lỗi

làm việc của giao diện điều khiển. phương thức log() trong trình duyệt

let launchReady = false;
let fuelLevel = 17000;

if (fuelLevel >= 20000 {
   console.log('Fuel level cleared.');
   launchReady = true;
} else {
   console.log('WARNING: Insufficient fuel!');
   launchReady = false;
}

6 không dành riêng cho trình duyệt. Nó cũng có sẵn trong các công cụ JavaScript khác

---

2. Sử dụng trình gỡ lỗi

Từ khóa

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

2 dừng thực thi mã và gọi chức năng sửa lỗi

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

2 có sẵn trong hầu hết các công cụ JavaScript

Hãy xem một ví dụ,

let a = 6;
let b = 9;
let c = a * b;

// stops the execution
debugger;

console.log(c);

Hãy xem cách bạn có thể sử dụng trình gỡ lỗi trong trình duyệt Chrome

Hoạt động của trình gỡ lỗi trong trình duyệt

Chương trình trên tạm dừng việc thực hiện chương trình ở dòng chứa

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

2

Sau đó, bạn có thể tiếp tục điều khiển luồng sau khi kiểm tra chương trình

Phần còn lại của mã sẽ thực thi khi bạn tiếp tục tập lệnh bằng cách nhấn phát trong bảng điều khiển

Hoạt động của trình gỡ lỗi trong trình duyệt

---

3. Đặt điểm dừng

Bạn có thể đặt điểm dừng cho mã JavaScript trong cửa sổ trình gỡ lỗi

JavaScript sẽ ngừng thực thi tại mỗi điểm dừng và cho phép bạn kiểm tra các giá trị. Sau đó, bạn có thể tiếp tục thực thi mã

Hãy xem một ví dụ bằng cách đặt điểm ngắt trong trình duyệt Chrome

Hoạt động của các điểm ngắt trong trình duyệt

Bạn có thể đặt điểm dừng thông qua công cụ Nhà phát triển ở bất kỳ đâu trong mã

Đặt điểm dừng tương tự như đặt trình gỡ lỗi trong mã. Tại đây, bạn chỉ cần đặt điểm ngắt bằng cách nhấp vào số dòng của mã nguồn thay vì gọi hàm trình gỡ lỗi theo cách thủ công

---

Trong các phương pháp trên, chúng tôi đã sử dụng trình duyệt Chrome để hiển thị các quy trình gỡ lỗi cho đơn giản. Tuy nhiên, đó không phải là lựa chọn duy nhất của bạn

Tất cả các IDE tốt đều cung cấp cách để bạn gỡ lỗi mã. Quá trình gỡ lỗi có thể hơi khác một chút nhưng khái niệm đằng sau việc gỡ lỗi là giống nhau

Hãy tưởng tượng chúng ta đang điều hành một trạm vũ trụ. Công việc của bạn là đánh giá mã của trạm và sửa bất kỳ lỗi nào. Mạng sống của thủy thủ đoàn nằm ngay trên vai bạn

Chỉ đạo của bạn từ cấp trên

1. Chỉ phóng tàu con thoi nếu nhiên liệu, phi hành đoàn và máy tính đều ổn

2. Nếu kiểm tra không thành công, hãy in thông tin đó ra bàn điều khiển và xóa khởi chạy

3. Nếu tất cả các kiểm tra đều thành công, hãy in bộ đếm ngược để khởi chạy trong bảng điều khiển

6. 8. 1. Thực hành sửa lỗi

1. Sửa lỗi cú pháp trước. Chạy mã sau đây nguyên trạng và đọc thông báo lỗi. Sửa lỗi rồi chạy lại code để kiểm tra

    1
    2
    3
    4
    5
    6
    7
    8
    9
   10

   let launchReady = false;
   let fuelLevel = 17000;
   
   if (fuelLevel >= 20000 {
      console.log('Fuel level cleared.');
      launchReady = true;
   } else {
      console.log('WARNING: Insufficient fuel!');
      launchReady = false;
   }
   

   Sửa nó khi thay thế. nó

   Kiểm tra giải pháp của bạn

2. Khối mã tiếp theo ẩn hai lỗi cú pháp. Chạy mã nguyên trạng để tìm lỗi

    1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20

   let launchReady = false;
   let crewStatus = true;
   let computerStatus = 'green';
   
   if (crewStatus &&& computerStatus === 'green') {
      console.log('Crew & computer cleared.');
      launchReady = true;
   } else {
      console.log('WARNING: Crew or computer not ready!');
      launchReady = false;
   }
   
   if (launchReady) {
      console.log(("10, 9, 8, 7, 6, 5, 4, 3, 2, 1...");
      console.log("Fed parrot...");
      console.log("Ignition...");
      console.log("Liftoff!");
   } else {
      console.log("Launch scrubbed.");
   }
   

   Mẹo

   Chỉ có một lỗi sẽ được gắn cờ tại một thời điểm. Khắc phục MỘT vấn đề đó, sau đó chạy lại mã để kiểm tra công việc của bạn. Tránh cố gắng khắc phục nhiều vấn đề cùng một lúc

   Sửa nó khi thay thế. nó

3. Sửa lỗi thời gian chạy tiếp theo. Hãy nhớ kiểm tra thông báo lỗi để tìm manh mối về những gì đang xảy ra. Hãy chú ý đến bất kỳ số dòng nào được đề cập trong thông báo - những số này sẽ giúp bạn xác định vị trí và sửa lỗi trong mã

    1
    2
    3
    4
    5
    6
    7
    8
    9
   10

   ________số 8

   Sửa nó khi thay thế. nó

   Kiểm tra giải pháp của bạn

4. Arrr. Chúng tôi đã đề cập phi hành đoàn của bạn là cướp biển không gian?

    1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21

   let a = 5;
   let b = 'asdf';
   let c = a + b;
   
   // if you want to see the value of c
   console.log(c);
   
   // then do other operations
   if(c) {
       // do something
   }

   0

   Sửa nó khi thay thế. nó

5. Giải quyết các lỗi logic cuối cùng. Lỗi logic không tạo thông báo cảnh báo hoặc ngăn mã chạy nhưng chương trình vẫn không hoạt động như ý muốn. (Tham khảo phần sửa lỗi logic nếu cần xem lại)

   1. Đầu tiên, hãy chạy nguyên trạng mã mẫu này và kiểm tra đầu ra

      let a = 5;
      let b = 'asdf';
      let c = a + b;
      
      // if you want to see the value of c
      console.log(c);
      
      // then do other operations
      if(c) {
          // do something
      }

      1

      let a = 5;
      let b = 'asdf';
      let c = a + b;
      
      // if you want to see the value of c
      console.log(c);
      
      // then do other operations
      if(c) {
          // do something
      }

      2

      Chạy nó tại thay thế. nó

      Tàu con thoi có nên phóng không?

      Kiểm tra câu trả lời của bạn

   2. Hãy chia mã thành các phần nhỏ hơn. Xem xét khối

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      6 đầu tiên bên dưới. Chúng tôi đã nhận xét một số biến mà chúng tôi hiện không kiểm tra. Thêm

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      7 sau khối này, sau đó chạy chương trình

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      0

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      1

      Chạy nó tại thay thế. nó

      Với giá trị

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      8, sau khi kiểm tra,

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      9 nên là

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

      0 hay

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

      1?

   3. Bây giờ hãy xem xét khối

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      6 thứ hai. Ở đây một lần nữa, chúng tôi nhận xét các biến và khối mà chúng tôi không kiểm tra. Thêm một

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      7 khác sau khối này và chạy chương trình

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      3

      Chạy nó tại thay thế. nó

      Cho trước

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

      4 và

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

      5, sau lần kiểm tra này,

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      9 sẽ là

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

      0 hay

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

      1?

      Kiểm tra câu trả lời của bạn

   4. Bây giờ hãy xem xét cả hai khối

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      6 cùng nhau (giữ các dòng

      let launchReady = false;
      let crewStatus = true;
      let computerStatus = 'green';
      
      if (crewStatus &&& computerStatus === 'green') {
         console.log('Crew & computer cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Crew or computer not ready!');
         launchReady = false;
      }
      
      if (launchReady) {
         console.log(("10, 9, 8, 7, 6, 5, 4, 3, 2, 1...");
         console.log("Fed parrot...");
         console.log("Ignition...");
         console.log("Liftoff!");
      } else {
         console.log("Launch scrubbed.");
      }
      

      0 đã thêm). Chạy mã và kiểm tra đầu ra

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      4

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      5

      Chạy nó tại thay thế. nó

      Đưa ra các giá trị cho

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      8,

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

      4 và

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

      5,

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      9 nên là

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

      0 hay

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20

      1?

   5. Ahoy, Houston. Chúng tôi theo dõi một vấn đề. Giá trị của

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      9 được chỉ định trong khối

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      6 đầu tiên đã thay đổi trong khối

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      6 thứ hai. Vùng nước nguy hiểm, Matey

      Vấn đề là với giá trị

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      9 được chỉ định và chỉ định lại dựa trên các lần kiểm tra khác nhau. Một cách để sửa lỗi logic là sử dụng hai biến khác nhau để lưu kết quả kiểm tra mức độ sẵn sàng của nhiên liệu (dòng 6-13) và kiểm tra mức độ sẵn sàng của phi hành đoàn và máy tính (dòng 15-22)

      Cập nhật mã của bạn để làm điều này. Xác minh rằng thay đổi của bạn hoạt động bằng cách cập nhật các câu lệnh

      let launchReady = false;
      let crewStatus = true;
      let computerStatus = 'green';
      
      if (crewStatus &&& computerStatus === 'green') {
         console.log('Crew & computer cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Crew or computer not ready!');
         launchReady = false;
      }
      
      if (launchReady) {
         console.log(("10, 9, 8, 7, 6, 5, 4, 3, 2, 1...");
         console.log("Fed parrot...");
         console.log("Ignition...");
         console.log("Liftoff!");
      } else {
         console.log("Launch scrubbed.");
      }
      

      0

      Sửa nó khi thay thế. nó

      Kiểm tra giải pháp của bạn

   6. Gần xong rồi, lau mồ hôi trên trán đi. Thêm một khối

      let launchReady = false;
      let fuelLevel = 17000;
      
      if (fuelLevel >= 20000 {
         console.log('Fuel level cleared.');
         launchReady = true;
      } else {
         console.log('WARNING: Insufficient fuel!');
         launchReady = false;
      }
      

      6 cuối cùng để in đếm ngược và "Liftoff. " nếu tất cả các kiểm tra vượt qua hoặc in "Khởi chạy đã xóa" nếu bất kỳ kiểm tra nào không thành công

      Tại sao JavaScript rất khó gỡ lỗi?

      JavaScript nổi tiếng là khó gỡ lỗi, không chỉ vì bản chất không đồng bộ của nó mà còn vì nó cần được hỗ trợ trên nhiều nền tảng và môi trường thời gian chạy khác nhau. The inconsistencies between different hardware and runtime environments make it impossible to reproduce any issue in the same way.

      Làm cách nào để cải thiện kỹ năng sửa lỗi trong JavaScript?

      9 mẹo điều khiển JavaScript sẽ cải thiện kỹ năng gỡ lỗi của bạn. Có nhiều hơn để sử dụng bảng điều khiển. .

      Dừng làm điều này với bảng điều khiển. nhật ký().

      Một cách tốt hơn để đăng nhập nhiều mục. .

      Tại sao phải sử dụng các dòng khi bạn có thể sử dụng các bảng?.

      Nhật ký được nhóm nhóm. .

      cảnh báo tốt hơn. .

      Ghi nhật ký lỗi tốt hơn. .

      Kiểu dáng bảng điều khiển tùy chỉnh

      Cách tốt nhất để gỡ lỗi JavaScript là gì?

      Các công cụ gỡ lỗi JavaScript tốt nhất cho năm 2021 trở đi .

      Công cụ dành cho nhà phát triển trong các trình duyệt web hiện đại. Mọi trình duyệt hiện đại đều có sẵn các công cụ để gỡ lỗi mã. .

      Công cụ gỡ lỗi có thể hack — debugger. .

      Nút. .

      Người đưa thư để gỡ lỗi các yêu cầu và phản hồi. .

      ESLint. .

      Thùng rác. .

      Trình định dạng và Trình xác thực JSON. .

      gói web

      Tại sao việc gỡ lỗi lại khó khăn?

      Thách thức gỡ lỗi . Các phần phụ thuộc không rõ ràng, do đó, việc sửa lỗi mã hóa trong một phần của chương trình vô tình gây ra các lỗi mới trong các phần khác của chương trình. The negative effect of the coding error is difficult to reproduce -- for example when web content contains drop down menus. Dependencies are not clear, so fixing a coding error in one part of the program accidentally introduces new errors in other parts of the program.