Các phương pháp hay nhất để gỡ lỗi mã JavaScript trong trình duyệt
Tất cả các nhà phát triển đều mắc lỗi và kết quả là lỗi xuất hiện. Ta phải đối mặt với các lỗi liên tục và điều cần thiết là các lập trình viên phải có kỹ năng gỡ lỗi tốt. Tôi sẽ chỉ cho bạn một số nguyên tắc có thể giúp bạn gỡ lỗi hiệu quả hơn.
Một vài nguyên tắc tốt về gỡ lỗi
- Trước tiên, bạn phải hiểu mã của bạn sẽ làm gì, xác định vị trí của các vấn đề và bắt đầu gỡ lỗi để xác minh các giả định của bạn.
- Khi bạn đã tìm ra nguyên nhân của lỗi, hãy tập trung vào việc khắc phục nguyên nhân của vấn đề.
- Khi bạn kiểm tra các giả định của bạn , bạn sẽ có các điểm ngắt và log console . Vì vậy, đừng quên loại bỏ chúng sau khi bạn gỡ lỗi xong.
- Và rõ ràng là không gỡ lỗi trong production !
Đăng nhập vào Control panel
console.log là cách phổ biến nhất để kiểm tra giá trị của các biến tại các điểm khác nhau trong quá trình thực thi ứng dụng của bạn. Nhưng có một số cách khác để hiển thị các giá trị đó theo những cách thuận tiện hơn.
Đôi khi ta có một đối tượng hoặc mảng phức tạp mà ta muốn kiểm tra. Ta vẫn có thể sử dụng console.log (array); nhưng console.table (mảng) sẽ hiển thị đối tượng dưới dạng một bảng đẹp:
console.table([ {animal: 'cayman', color: 'green' }, {animal: 'crocodilian', color: 'yellow-green' } ]); Sẽ xuất:
Ngoài ra, ta có thể sử dụng console.trace () để ghi lại đường dẫn chính xác để đến điểm đó. Nó sẽ xuất ra một dấu vết ngăn xếp.
function meat(){ function eggs(){ console.trace(); } eggs(); } Ta sẽ thấy trong console thông tin như thế này:
eggs meat <anonymous> Bạn có thể đọc tài liệu API console để biết thêm phương pháp.
Điểm ngắt
Điểm ngắt là một cách nhanh hơn và không phức tạp hơn để gỡ lỗi mã JavaScript của bạn.
Một cách phổ biến để đặt điểm ngắt trong mã của bạn là sử dụng câu lệnh debugger :
if (someCondition) { debugger; } Khi mã truy cập vào lệnh dừng thực thi debugger , nó sẽ chạy các công cụ dành cho nhà phát triển của trình duyệt của bạn và chuyển đến dòng tìm thấy câu lệnh debugger .
Nó sẽ cho phép bạn tạm dừng thực thi và sau đó từng dòng mã của bạn. Ta có thể quan sát mã và các giá trị của bạn được lưu trữ trong các biến và xem mọi thứ bắt đầu sai ở điểm nào. Ta có thể kiểm tra trạng thái hiện tại của mã và xem chính xác vị trí của ta trong mã.
Ta có thể thấy Call Stack hiển thị tất cả các hàm đã được gọi cho đến thời điểm đó. Tab Phạm vi hiển thị tất cả các phạm vi biến mà ta có sẵn tại thời điểm hiện tại và xem tất cả các biến và giá trị của chúng trong mỗi phạm vi.
Ta có thể thêm hoặc bớt các điểm ngắt bằng cách nhấp vào số dòng. Khi mã bị tạm dừng, ta có thể di chuyển qua mã bằng các mũi tên. Bằng cách nhấp vào mũi tên màu xanh lam, bạn sẽ di chuyển đến điểm ngắt tiếp theo hoặc chỉ đến cuối mã nếu không có điểm ngắt tiếp theo.
Bạn có thể nhấn vào mũi tên xuống để chuyển sang các chức năng hoặc mũi tên hướng sang phải để ném mã một dòng tại một thời điểm.
Và trình gỡ lỗi cung cấp cho ta dòng mã chính xác mà ta cần đi và sửa.
Tóm lược
Tôi hy vọng đây là một phần giới thiệu nhỏ hữu ích để gỡ lỗi mã JavaScript của bạn. Luôn nhớ rằng công cụ gỡ lỗi tốt nhất là tâm trí của bạn và tất cả những kỹ thuật đó sẽ không hữu ích nếu bạn không hiểu vấn đề mình đang cố gắng giải quyết là gì.
Các tin liên quan
Tối ưu hóa Tuyên bố chuyển đổi trong JavaScript2019-06-18
Làm việc với Singletons trong JavaScript
2019-04-19
Cách sử dụng Axios với JavaScript
2019-04-05
Giới thiệu về Lặp lại và Trình lặp trong JavaScript
2019-03-13
D3.js: Hiểu các lựa chọn và so sánh với Vanilla JavaScript
2019-03-04
Xem xét Phạm vi, Ngữ cảnh, Tham chiếu Đối tượng và Thuyết minh trong JavaScript
2019-02-25
Sử dụng JavaScript Mixins
2019-02-12
Đọc mã nguồn JavaScript, sử dụng AST
2019-02-09
JavaScript Biểu thức chính quy cho Người bình thường
2019-02-07
Mẫu kế thừa nguyên mẫu JavaScript
2019-02-01
