Là developer bạn thường muốn debug code. Có thể đã dùng console.log trong challenge, cách debug đơn giản nhất.
Trong bài này sẽ chia sẻ vài trick hay nhất, debug dùng native debug-tool của trình duyệt.
Sâu Sâu Về FreeCodeCamp Code Editor:
Trước khi vào debug, hãy rò rỉ vài bí mật về engine check code tuyệt vời ở FCC.
Chúng tôi dùng CodeMirror tùy chỉnh làm code editor. Hàm eval() dùng để evaluate JavaScript code dưới dạng string từ editor. Khi eval() gọi, trình duyệt native execute code của bạn. Chúng ta sẽ học thêm tại sao bí mật này quan trọng ở phần sau.
Chuyển Sang Các Trick:
Google Chrome là trình duyệt phổ biến với built-in JavaScript engine V8, cung cấp toolset tuyệt vời cho developer gọi là Chrome DevTools. Khuyên tham khảo Complete JavaScript debugging guide của họ.
1: Cơ Bản DevTools
Khởi Động Chrome DevTools
Bấm F12
. Hoặc bấm
Ctrl + Shift + I
trên Windows/Linux hoặc
Cmd + Shift + I
trên Mac, hoặc nếu thích chuột vào Menu > More Tools > Developer Tools.
Làm Quen Tab Sources Và console.
Hai tab này có thể là bạn thân nhất khi debug. Tab Sources visualize tất cả script trên webpage bạn truy cập. Tab có section cho code window, file tree, call stack & watch window, v.v.
Tab console là nơi tất cả log output đi. Bạn cũng dùng prompt console tab execute JS code. Nó giống command prompt Windows, hoặc terminal Linux.
Tip: Toggle console bất kỳ lúc trong DevTools dùng phím Esc.
2: Shortcuts Và Tính Năng Phổ Biến
Mặc dù có thể xem danh sách shortcut đầy đủ, dưới là vài shortcut dùng nhiều nhất:
Feature | Windows, Linux | Mac
Tìm từ khóa, hỗ trợ regex. Ctrl+F``Cmd+F
Tìm và Mở file Ctrl+P``Cmd+P
Nhảy đến dòng Ctrl+G+:line_no``Cmd+G+:line_no
Thêm breakpoint Ctrl+B, hoặc click line no. Cmd+B, hoặc click line no.
Tạm dừng/tiếp tục thực thi script F8 F8
Step over function call tiếp theo F10 F10
Step into function call tiếp theo F11 F11
3: Dùng Source Map Cho Code Của Chúng Ta
Một trong những tính năng cool nhất bạn sẽ thích là debug Dynamic Script, on-the-fly, qua Source Maps.
Mọi script có thể visualize trong tab Sources của DevTools. Tab sources có tất cả JavaScript source file. Nhưng code từ code editor chạy qua eval() trong container gọi là virtual machine (VM) trong process trình duyệt.
Như bạn đoán, code của chúng ta thực sự là script không có tên file. Vậy không thấy nó trong tab Sources.
Đây là hack!
Phải tận dụng Source Maps gán tên cho JavaScript từ editor. Rất đơn giản:
Giả sử ở challenge Factorialize, code trông như:
function factorialize(num) { if(num <= 1){ ... } factorialize(5); Chỉ cần thêm //# sourceURL=factorialize.js lên đầu code, dòng đầu tiên:
//# sourceURL=factorialize.js function factorialize(num) { if(num <= 1){ ... Và Eureka, xong!
Bây giờ mở DevTools tìm tên file. Thêm breakpoint, Debug thoải mái và tận hưởng!
Thêm Thông Tin Về Debug:
- Beginner's guide to bug squashing
- Debugging tips and tricks for beginners
- How to get the most out of your browser's debugging console
Học lập trình miễn phí. Chương trình mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm lập trình viên. Bắt đầu ngay