Là một nhà phát triển, công việc tìm kiếm và sửa lỗi có thể có đôi chút khó khăn. Bạn chỉ có thể chú ý đến việc sử dụng console.log[]
hoặc đặt debugger
tại bất kỳ vị trí nào để chỉnh sửa vấn đề bạn đang gặp phải để mã chạy chính xác. không còn nữa
Trong bài viết này là tất cả về cách tìm lỗi một cách chính xác. Bạn sẽ tìm hiểu cách sử dụng Công cụ dành cho nhà phát triển Chrome để thiết lập các điểm dừng tại đây và tìm chúng trong mã của bạn. Quy trình công việc này thường là một cách hiệu quả hơn nhiều để tìm kiếm và sửa lỗi trong mã của bạn
Hướng dẫn này chỉ cho bạn cách sửa lỗi một vấn đề cụ thể, nhưng quy trình công việc chung là để sửa lỗi tất cả các loại lỗi JavaScript. Sau đây sẽ là các bước cụ thể để sửa lỗi bằng Chrome Developer Tools
Bước 1. Tái tạo lỗi
Đầu tiên chương trình có bug thì chúng ta cố tình tạo ra bug với mục đích để chương trình chạy sẽ xuất hiện lỗi liên tục. Ở đây, chúng ta có một bản demo nho nhỏ như sau, hãy thực hiện các bước sau để xác định lỗi
- Mở trang web chứa chương trình cộng hai số bị lỗi ở một tab mới, MỞ DEMO
- In ô input first, input 1 number of option, at here input number
1
for Number 1 - Tại ô nhập thứ hai cũng vậy, ở đây sẽ nhập số
1
cho Số 2 - Bấm vào nút
Add Number 1 and Number 2
- Kết quả xem xét sẽ thấy dòng sau
1 + 1 = 11
Như vậy đây là một kết quả sai, đáng nhẽ ra kết quả ta nhận được phải là 1 + 1 = 2
mới là kết quả đúng. Và đây là một lỗi của chương trình mà chúng ta phải sửa
Bước 2. Tạm dừng mã với một điểm dừng
DevTools cho phép bạn tạm dừng mã của mình ở giữa quá trình thực thi và kiểm tra giá trị của tất cả các biến tại thời điểm đó. Hay nói cách khác được gọi là
if [inputsAreEmpty[]] {
0 [điểm dừng]. Please same try set any point stopQuay lại tab chương trình Demo và mở
1 bằng cách nhấn vàoif [inputsAreEmpty[]] {
2 [Mac] hoặcif [inputsAreEmpty[]] {
debugger
0 [Windows, Linux]Nhấp vào tab Nguồn
Chọn vào Event Listener Breakpoints, DevTools sẽ hiển thị ra một danh sách các danh mục sự kiện có thể mở rộng. Ví dụ như
debugger
1Sau đó nhìn xuống sự kiện Chuột và nhấp vào Mở rộng
Đánh dấu chọn vào hộp kiểm
debugger
2]] Bạn có thể chỉnh sửa trên DevTools trước rồi sau đó sẽ chỉnh sửa mã sau đó cũng được.Trên đây là cách tìm lỗi bằng DevTools của Google, bài viết được lược dịch và lấy DEMO từ https. // giải mã. io/tìm hiểu cách gỡ lỗi-javascript-with-chrome-devtools-9514c58479db
Hướng dẫn tương tác từng bước này, sẽ hướng dẫn bạn quy trình cơ bản để gỡ lỗi JavaScript trong Chrome DevTools. Nó sẽ cho bạn thấy cách gỡ lỗi một vấn đề cụ thể, nhưng quy trình chung mà bạn học được có thể áp dụng để gỡ lỗi tất cả các loại lỗi của JavaScript
Nếu bạn đang sử dụng bảng điều khiển. log[] để tìm và sửa các lỗi trong code của mình, hãy xem xét sử dụng quy trình được thảo luận trong hướng dẫn này. Nó thường nhanh và hiệu quả hơn rất nhiều
Tham khảo các khoa học về Javascript tại Techmaster
Lộ trình ReactJs giao diện người dùng 5 tháng
Lộ trình NodeJs 4,5 tháng
Bước 1. Tái hiện lỗi
Tái hiện lỗi [reproducte] luôn là bước đầu tiên để gỡ lỗi. "Tai current bug" có nghĩa là tìm ra một loạt các hành động làm cho lỗi xuất hiện. Bạn có thể cần tái hiện lỗi nhiều lần, vì thế cố gắng loại bỏ bất kỳ bước nào không cần thiết
Làm theo hướng dẫn dưới đây để tái hiện lỗi, cái bạn sẽ sửa trong bài viết này
- Nhấp vào Mở bản trình diễn. Trang demo sẽ mở trong tab mới
- Trên trang demo, nhập 5 cho Số 1
- Nhập 1 cho Số 2
- Nhấn Add Number 1 và Number 2
- Kết quả sẽ là 5 + 1 = 51
Kết quả này là sai. Kết quả đúng phải là 6. Và đây chính là lỗi bạn sẽ sửa
Bước 2. Pastop code with a breakpoint
DevTools giúp bạn tạm dừng mã trong quá trình thực thi và kiểm tra giá trị của tất cả các biến tại thời điểm đó. Công cụ để tạm dừng mã gọi là điểm dừng. Please try
1. Mở DevTools trên trang demo bằng cách nhấn Command + Option + I [Mac] hoặc Control + Shift + I [Windows, Linux]
2. Nhấp vào tab Nguồn
3. Nhấp vào Event Listener Breakpoint để mở rộng phần này. DevTools sẽ liệt kê một loạt các loại sự kiện có thể mở rộng, chẳng hạn như Animation và Clipboard
4. Di chuyển đến mục Chuột, nhấp vào Mở rộng. DevTools sẽ hiển thị danh sách các sự kiện chuột, chẳng hạn như nhấp chuột, với hộp kiểm bên cạnh
5. Chọn sự kiện nhấp chuột
DevTools được mở trên trang demo, với Sources planel được mở và trình nghe sự kiện nhấp chuột được cho phép. Nếu số lượng DevTools của bạn lớn, Event Listener Breakpoints có thể ở bên phải thay vì ở phía dướ bên trái như hình trên6. Nhấp vào Thêm số 1 và số 2 một lần nữa. DevTools tạm dừng và tô sáng một dòng mã trong bảng Nguồn. DevTool đánh dấu dòng này
function onClick[] {
Khi bạn chọn sự kiện nhấp chuột, bạn đã thiết lập điểm ngắt dựa trên sự kiện dựa trên tất cả các nhấp chuột sự kiện. Khi bất kỳ nút nào được nhấp và nút đó có trình xử lý nhấp chuột [xác thực điều này khi sự kiện xảy ra], DevTools tự động dừng trên dòng đầu tiên của trình xử lý nhấp chuột
Chú thích. Đây chỉ là một trong nhiều loại breakpoint mà DevTools cung cấp. Điểm dừng bạn cần phải phụ thuộc vào kiểu vấn đề bạn đang gỡ lỗi
Tham khảo các khóa học lập trình trực tuyến, onlab và thực hiện lập trình tại TechMaster
Bước 3. Duyệt qua mã
Một trong những nguyên nhân phổ biến gây ra lỗi là khi script thực thi sai thứ tự. Duyệt qua mã cho phép bạn thực thi mã, từng dòng một và tìm kiếm chính xác nơi thực thi mã theo thứ tự khác mà bạn muốn. Please try
1. Trên bảng Nguồn của DevTools, nhấp vào Bước vào lệnh gọi hàm tiếp theo
đến bước thực thi hàm onClick[], từng dòng một. DevTools đánh dấu dòng mã sau.if [inputsAreEmpty[]] {
2. Nhấp vào Bước qua lệnh gọi hàm tiếp theo
. DevTools thực thi inputAreEmpty[] mà không đi vào trong nó. Chú ý cách DevTools bỏ qua một vài dòng mã. Bởi vì đầu vàoAreEmpty[] có giá trị sai, vì thế khối lệnh nếu không được thực thi.Đó là ý tưởng về cơ bản về việc duyệt qua mã. Nếu bạn xem mã khi bắt đầu. js, bạn có thể thấy rằng bug sẽ ở đâu đó trong hàm updateLabel[]. Thay vì đi qua mọi dòng mã, bạn có thể sử dụng một kiểu điểm dừng khác để tạm dừng mã gần hơn với vị trí của lỗi
Bước 4. Thiết lập một điểm dừng khác
Line-of-code breakpoint là kiểu beakpoint phổ biến nhất. Khi bạn có một dòng mã cụ thể và muốn tạm dừng ở đó, hãy sử dụng điểm ngắt dòng mã. Please try
- Nhìn vào dòng mã cuối cùng của hàm updateLabel[], nó giống như thế này.
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
- Ở phía bên trái của mã, bạn có thể thấy số dòng của đoạn mã này là 32. Bấm vào 32. DevTools đặt một biểu tượng màu xanh dương ở đó. Điều này có nghĩa là có một điểm ngắt dòng mã trên dòng này. DevTools sẽ luôn dừng trước khi dòng mã này được thực thi
- Nhấp vào Tiếp tục thực thi tập lệnh . Tập lệnh tiếp tục thực thi cho đến dòng mã bạn đặt điểm dừng.
- Nhìn vào những dòng mã trong updateLabel[] cái đã được thực thi. DevTools in the value of addend1, addend2 and sum
Giá trị của tổng có vẻ đáng nghi ngờ. Nó giống như một chuỗi, trong khi nó phải là một số. This could be the resourcegây ra lỗi
Bước 5. Kiểm tra các giá trị của biến
Một nguyên nhân phổ biến khác có thể gây ra lỗi là khi một biến hoặc một chức năng tạo ra một mức giá khác với mong đợi. Nhiều lập trình viên sử dụng bảng điều khiển. log[] to follow các biến thay đổi như thế nào, nhưng bảng điều khiển. log[] có thể hơi trống và không hiệu quả vì 2 lý do. Đầu tiên, bạn cần chỉnh sửa mã sửa đổi với bảng điều khiển nhiều câu lệnh. nhật ký[]. Thứ hai, bạn không thể biết chính xác biến nào liên quan đến lỗi, vì thế bạn cần phải có nhiều biến
Một trong những sự thay thế của DevTools với bảng điều khiển. log[] là Biểu thức xem. Use Watch Expressions to theo dõi giá trị của các biến theo thời gian. Như tên gọi Watch Expressions không chỉ giới hạn trong các biến. Bạn có thể lưu trữ mọi biểu thức JavaScript trong Biểu thức xem. Please try
- Trên bảng Nguồn của DevTools, nhấp vào Xem.
- Nhấp vào Thêm biểu thức .
- Nhập loại tổng
- Nhấn Enter. DevTools hiển thị loại tổng. "chuỗi". Giá trị bên phải là dấu hai chấm là kết quả của Watch Expression of you
Watch Expression panel [phía dưới bên phải], sau khi tạo typeof Watch Expression. Nếu cửa sổ DevTools của bạn lớn, bảng Watch Expression sẽ ở bên phải, phía trên bảng Event Listener BreakpointsĐúng như dự đoán, tổng là một chuỗi, thay vì là một số. Đây chính là nguyên nhân gây ra lỗi
Công cụ thay thế thứ 2 của DevTools cho bảng điều khiển. log[] is Console. Sử dụng Bảng điều khiển để thực hiện các câu lệnh JavaScript. Các thành viên lập trình thường sử dụng Console để ghi đè giá trị của biến khi gỡ lỗi. Trong trường hợp này, Console có thể giúp kiểm tra các phương án sửa lỗi của bạn. Please try
- Nếu bảng điều khiển của bạn chưa mở, hãy nhấn Escape [Esc] để mở nó. Nó sẽ mở ở bên dưới cửa sổ DevTools
- Trong Console, nhập parseInt[addend1] + parseInt[addens2]
- Nhấn Enter. DevTools sẽ thực thi và kết quả là 6, đây là kết quả bạn mong đợi
Bước 6. Sửa lỗi
Sau khi đã xác định được phương án để sửa lỗi. Bạn cần chỉnh sửa mã với phương án của mình và chạy lại mã. Bạn không cần phải rời khỏi DevTools để làm điều đó. Bạn có thể chỉnh sửa mã JavaScript trực tiếp trong DevTools UI. Please try
- Trong trình soạn thảo trên bảng nguồn của DevTools, thay thế var sum = addend1 + addend2 với var sum = parseInt[addend1] + parseInt[addend2];.
- Nhấn Command + S [Mac] hoặc Control + S [Windows, Linux] để lưu thay đổi của bạn. Bối cảnh của mã thay đổi thành màu đỏ báo hiệu rằng tập lệnh đã được thay đổi trong DevTools
- Nhấp vào Vô hiệu hóa điểm ngắt . Nó thay đổi thành màu xanh dương báo hiệu đã hoạt động. Trong thiết lập này, DevTools sẽ bỏ qua mọi điểm ngắt mà bạn đã thiết lập.
- Nhấp vào Tiếp tục thực thi tập lệnh .
- Try demo with other values. Giờ demo hiện tại sẽ tính toán chính xác giá trị của tổng
Hãy nhớ rằng quy trình này chỉ áp dụng để sửa mã đang chạy trong trình duyệt của bạn. Nó không sửa mã cho tất cả người dùng chạy trang web của bạn. Để làm điều đó, bạn cần sửa mã, cái đang ở trên máy chủ của bạn
Bước tiếp theo
chúc mừng. Bây giờ bạn đã biết những cơ bản thứ về gỡ lỗi JavaScript trong DevTools
Bài hướng dẫn này mới chỉ cho bạn thấy 2 cách thiết lập breakpoint. DevTools cung cấp nhiều cách khác nhau, bao gồm