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
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 202 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 202 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
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 202
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
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
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
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
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
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
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
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ó
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
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
0let 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ửa nó khi thay thế. nó
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]
Đầu tiên, hãy chạy nguyên trạng mã mẫu này và kiểm tra đầu ra
1let 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 }
2let 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 }
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
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êmlet 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ìnhlet launchReady = false; let fuelLevel = 17000; if [fuelLevel >= 20000 { console.log['Fuel level cleared.']; launchReady = true; } else { console.log['WARNING: Insufficient fuel!']; launchReady = false; }
0let launchReady = false; let fuelLevel = 17000; if [fuelLevel >= 20000 { console.log['Fuel level cleared.']; launchReady = true; } else { console.log['WARNING: Insufficient fuel!']; launchReady = false; }
1Chạ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 hay1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
1?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ộtlet 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ình1 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; }
3Chạ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 hay1 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
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ònglet 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 ralet launchReady = false; let fuelLevel = 17000; if [fuelLevel >= 20000 { console.log['Fuel level cleared.']; launchReady = true; } else { console.log['WARNING: Insufficient fuel!']; launchReady = false; }
4let launchReady = false; let fuelLevel = 17000; if [fuelLevel >= 20000 { console.log['Fuel level cleared.']; launchReady = true; } else { console.log['WARNING: Insufficient fuel!']; launchReady = false; }
5Chạ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 hay1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
1?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ốilet 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ốilet 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, MateyVấ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."]; }
0Sửa nó khi thay thế. nó
Kiểm tra giải pháp của bạn
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ôngTạ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ỉnhCá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 webTạ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.