Cách debug code JavaScript trên DevTool

Cách debug code JavaScript trên DevTool

Anh NguyễnBạn nghĩ gì về bài viết này?

Là một lập trình viên, bạn thường sẽ phải fix bug do chính code của bạn hoặc người khác gây ra. Bạn có thể đã sử dụng console.log trong một số thử thách gỡ lỗi nhưng đây vốn chỉ là cách debug code đơn giản.

Trong bài viết này, mình sẽ cho bạn biết một số thủ thuật hay nhất để gỡ lỗi bằng cách debug code JavaScript trên DevTool của trình duyệt.

Google Chrome DevTools là gì?

Cách debug code JavaScript trên DevTool

Google Chrome là một trong những trình duyệt phổ biến nhất với công cụ JavaScript tích hợp có tên là V8 và cung cấp một bộ công cụ tuyệt vời cho các nhà phát triển có tên là Chrome DevTools. Bạn nên xem hướng dẫn gỡ lỗi JavaScript hoàn chỉnh của họ TẠI ĐÂY.

Cách debug code JavaScript trên DevTool

Mở Google Chrome DevTools

Để mở Google Chrome DevTools, đơn giản nhất là nhấn F12 trên bàn phím. 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. Nếu bạn chỉ thích dùng con chuột của mình, hãy đi tới Menu > More Tools > Developer Tools hoặc chuột phải vào 1 vị trí bất kỳ và chọn Inspect.

Làm quen với tab Soucres và Console

Cách debug code JavaScript trên DevTool

Hai tab này có lẽ sẽ là người bạn tốt nhất của bạn trong khi gỡ lỗi. Tab Sources 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ấu trúc tệp, call stack,….

Tab Console là nơi tất cả các đầu ra của log đi. Ngoài ra, bạn có thể sử dụng lời nhắc của tab Console để thực thi mã JavaScript. Điều này đồng nghĩa với dấu nhắc lệnh trên Windows hoặc terminal trên Linux.

Mẹo: Chuyển đổi bảng Console bất kỳ lúc nào trong DevTools bằng phím Esc.

Các phím tắt và tính năng phổ biến

Trong khi bạn có thể truy cập danh sách đầy đủ các phím tắt, dưới đây là một số phím tắt được sử dụng nhiều nhất:

  • Search Ctrl+F``Cmd+F
  • Search and Open a file Ctrl+P``Cmd+P
  • Jump to line Ctrl+G+:line_no``Cmd+G+:line_no
  • Add a breakpoint Ctrl+B
  • Pause/resume script execution F8 F8
  • Step over next function call F10 F10
  • Step into next function call F11 F11

Sử dụng Source Map

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, ngay lập tức, thông qua Source Map.

Cách debug code JavaScript trên DevTool

Mọi câu lệnh đều có thể được hiển thị trong tab Sources của DevTools. Tab Sources có tất cả các tệp source của JavaScript. Nhưng mã từ trình soạn thảo đượ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 trình duyệt.

Như bạn có thể đoán bây giờ là code của chúng ta thực sự là một tập lệnh không có tên tệp. Vì vậy, chúng ta không thấy điều đó trong tab Sources.

Chúng ta phải tận dụng Source Map để gán tên cho JavaScript từ editor. Nó khá đơn giản như sau:

function factorialize(num) {
  if(num <= 1){
  ...
}
factorialize(5);Code language: JavaScript (javascript)

Tất cả những gì chúng ta cần làm là thêm // # sourceURL = factorialize.js vào đầu đoạn mã, tức là dòng đầu tiên:

//# sourceURL=factorialize.js

function factorialize(num) {
  if(num <= 1){
  ...Code language: JavaScript (javascript)

Bây giờ, hãy mở DevTools và tìm kiếm tên tệp. Thêm breakpoint, gỡ lỗi và tận hưởng thôi nào!

Kết luận

Trên đây là một số hướng dẫn giúp bạn có thể hiểu cách debug code JavaScript trên DevTool và ứng dụng vào project thực tế. Chúc bạn thành công!

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận