Là một nhà phát triển, bạn thường muốn gỡ lỗi mã. Bạn có thể đã sử dụng console.log trong một số thử thách, đây là cách đơn giản nhất để gỡ lỗi.
Trong bài viết này, chúng tôi sẽ mách bạn một số thủ thuật thú vị nhất để gỡ lỗi bằng cách sử dụng các công cụ gỡ lỗi gốc của trình duyệt.
Thông tin chi tiết ngắn gọn về Trình chỉnh sửa mã FreeCodeCamp:
Trước khi chuyển sang phần gỡ lỗi, hãy tiết lộ một số thông tin bí mật về công cụ kiểm tra mã tuyệt vời đó tại FCC.
Chúng tôi sử dụng CodeMirror tùy chỉnh làm trình chỉnh sửa mã. Một eval() Hàm được sử dụng để đánh giá mã JavaScript được biểu thị dưới dạng chuỗi từ trình chỉnh sửa. Khi eval() được gọi, trình duyệt sẽ thực thi mã của bạn một cách tự nhiên. Chúng ta sẽ tìm hiểu thêm tại sao bí mật này lại quan trọng trong các phần sau của bài viết này.
Bây giờ chuyển sang các thủ thuật:
Google Chrome là một trong những trình duyệt phổ biến nhất có công cụ JavaScript tích hợp có tên V8 và cung cấp bộ công cụ tuyệt vời cho các nhà phát triển có tên Chrome DevTools. Bạn nên truy cập vào Hướng dẫn gỡ lỗi JavaScript hoàn chỉnh của họ.
1 :Khái niệm cơ bản về DevTools
Ra mắt Công cụ dành cho nhà phát triển Chrome
Nhấn F12
. Ngoài ra bạn có thể nhấn
Ctrl + Shift + I
trên Windows và Linux hoặc
Cmd + Shift + I
trên máy Mac hoặc Nếu bạn yêu thích con chuột của mình, hãy truy cập Menu > More Tools > Developer Tools .
Làm quen với Sources và console tab.
Hai tab này có lẽ sẽ là người bạn tốt nhất của bạn khi gỡ lỗi. Sources tab có thể được sử dụng để trực quan hóa tất cả các tập lệnh trên trang web bạn đang truy cập. Tab này có các phần dành cho cửa sổ mã, cây tệp, ngăn xếp cuộc gọi và cửa sổ xem, v.v.
console tab là nơi chứa tất cả đầu ra nhật ký. Ngoài ra, bạn có thể sử dụng lời nhắc của tab bảng điều khiển để thực thi mã JavaScript. Nó gần giống với dấu nhắc lệnh trên Windows hoặc terminal trên Linux.
Mẹo:Chuyển đổi bảng điều khiển bất cứ lúc nào trong DevTools bằng cách sử dụng Esc chìa khóa.
2 :Các phím tắt và tính năng phổ biến
Mặc dù bạn có thể truy cập danh sách phím tắt đầy đủ nhưng dưới đây là một số phím tắt được sử dụng nhiều nhất:
Tính năng Windows, Linux Mac
Tìm kiếm từ khóa, hỗ trợ biểu thức chính quy. Ctrl +F``Cmd +F
Tìm kiếm và mở tệp Ctrl +P``Cmd +P
Chuyển đến dòng Ctrl +G +:line_no``Cmd +G +:line_no
Thêm điểm ngắt Ctrl +B , hoặc bấm vào dòng số.Cmd +B , hoặc bấm vào dòng không.
Tạm dừng/tiếp tục thực thi tập lệnh F8 F8
Chuyển qua lệnh gọi hàm tiếp theo F10 F10
Bước vào lệnh gọi hàm tiếp theo F11 F11
3 :Sử dụng Bản đồ nguồn cho Mã của chúng tôi
Một trong những tính năng thú vị nhất mà bạn sẽ yêu thích là gỡ lỗi Dynamic Script một cách nhanh chóng thông qua Bản đồ nguồn.
Mọi tập lệnh có thể được hiển thị trong tab Nguồn của DevTools. Tab nguồn có tất cả các tệp nguồn JavaScript. Nhưng mã từ trình soạn thảo mã được thực thi thông qua eval() trong một vùng chứa được gọi đơn giản là máy ảo (VM) trong quy trình trình duyệt.
Như bạn có thể đoán bây giờ, mã của chúng tôi thực sự là một tập lệnh không có tên tệp. Vì vậy, chúng tôi không thấy điều đó trong tab Nguồn.
Bí quyết đây rồi!
Chúng ta phải tận dụng Source Maps để gán tên cho JavaScript từ trình soạn thảo của chúng tôi. Nó khá đơn giản:
Giả sử chúng ta đang tham gia thử thách Factorialize và mã của chúng ta trông như thế này:
function factorialize(num) {
if(num <= 1){
...
}
factorialize(5);
Tất cả những gì chúng ta cần làm là thêm //# sourceURL=factorialize.js ở đầu mã, tức là dòng đầu tiên:
//# sourceURL=factorialize.js
function factorialize(num) {
if(num <= 1){
...
Và thế là Eureka!
Bây giờ hãy mở DevTools và tìm kiếm tên tệp. Thêm điểm ngắt, Gỡ lỗi và tận hưởng!
Thông tin thêm về gỡ lỗi:
- Hướng dẫn khắc phục lỗi cho người mới bắt đầu
- Mẹo và thủ thuật gỡ lỗi cho người mới bắt đầu
- Cách tận dụng tối đa bảng điều khiển gỡ lỗi của trình duyệt của bạn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu