Home > Lập trình > Javascript > Debug Javascript với Chrome DevTools

Debug Javascript với Chrome DevTools

Đã bao giờ bạn làm việc với Javascript? Có lẽ đây là câu hỏi thừa nếu bạn là một lập trình viên. Javascript, Jqery, Ajax là những từ ngữ thường dùng trong giới lập trình web. Để tạo ra một website mà không sử dụng những thứ kể trên thì chắc chắn rằng website của bạn hẳn sẽ rất “cứng” :D. Bạn cứ nghỉ đi nếu như website là một bộ xương thì việc sử dụng javascript giống như là đường GÂN nối những khúc xương lại vậy, chính vì thế nó làm cho website của bạn hoạt động được mềm mại và uyển chuyển hơn. Tuy nhiên hôm nay không phải là ngày để giới thiệu về những thứ đó.

Nếu bạn đã từng làm việc nhiều với Javascript đủ để nhận thấy rằng Javascript cũng “khó chịu” y như C hay những ngôn ngữ lập trình khác thì có lẽ bài viết này sẽ giúp ích được cho bạn đôi chút. Lúc còn là sinh viên tôi thường có những đồ án môn học liên quan đến web và việc sử dụng Javascript, Jquery, Ajax cho website như là một điều kiện cần để vượt qua môn học. Lúc đó mỗi lần muốn kiểm tra xem một function trong javascript hoạt động như thế nào tôi thường dùng hàm alert() để đưa kết quả hiển thị lên màn hình, không biết các bạn thì sao nhưng vs tôi điều đó thật là đáng nhớ. Còn bây giờ, loay hoay mãi cũng vào chủ đề chính ^^. Xin được phép giới thiệu đến các bạn Google Chrome và cách dùng Google Chrome để debug Javascript.

Ngày nay với sự gia tăng nhanh chóng của các ứng dụng web linh hoạt có sử dụng javascript, lập trình viên cần đến cho mình một công cụ giúp kiểm tra nhanh các lỗi xử lý logic. Chính vì lẽ đó google đã đưa ra một công cụ(Google Chrome DevTools) và tích hợp sẵn vào trình duyệt web giúp cho lập trình viên có thể giải quyết được vấn đề nêu trên.

Làm quen với Source Panel

Đầu tiên mở trình duyệt google chrome (GC) lên truy cập clbinternet.info rồi nhấn f12 xem ta có gì. Chọn tab Source ta sẽ thấy giao diện như hình dưới.

Debug javascript với google Chrome DevTools
Debug javascript với Chrome DevTools

–       File tree: chọn cái này ta sẽ thấy các file javascript được sử dụng trong trang web sẽ được liệt kê theo dạng cây. Còn đợi gì nữa hãy chọn thử để xem kết quả thế nào 😀

–       Per-file tabs: mỗi tab tương ứng với một file javascript, chọn tab nào thì script trong file đó được hiển thị lên phân vùng chính. Nó cũng giống như trình soạn thảo notepad ++ thôi 😀

–       Pause, Continue. Step over/ In/ Out:

o   Nút đầu tiên khá quen thuộc pause, continue.

o   Nút thứ 2 là step over: nếu bạn đang debug tới một function a, trong function a có gọi function b. nếu chọn step over ngay tại thời điểm gọi function b thì ta sẽ chỉ nhận được kết quả của function b và hoàn toàn không biết trong function b xử lý như thế nào

o   Tiếp theo Step In tương tự ví dụ trên tại thời điểm gọi function b nếu ta sử dụng step in thì ngay lập tức con trỏ debug nhảy ngay vào dòng đầu tiên của function b qua đó từng bước ta sẽ thấy function b đã xử lý như thế nào và kết quả của function b

o   Step out: cũng ví dụ trên khi đã vào trong function b, nếu ta dùng step out nó sẽ đưa con trỏ debug về function trước đó đã gọi function b.

–       Show drawerDocking: thử ngay đi để thấy kết quả :D.

–       Setting là một số cài đặt trong phần debug panel này, nếu có điều kiện và muốn tìm hiểu, hãy thử chỉnh sửa các thông số trong đây để hiểu rõ nó

–       Disable breakpoints: tắt hoặc bật các breakpoint, breakpoint sử dụng trong trường hợp ta chỉ muốn kiểm tra kết quả tại một số vị trí trong mã code

Một số phím tắt khi sử dụng:

–       F8: để continue

–       F10: Step over

–       F11: Step into

–       Shift + F11: Step out

Một số điểm cơ bản về công cụ GC debug là nó thế. Tạm dừng bài viết này ở đây, bài viết tiếp theo sẽ hướng dẫn các bạn debug với breakpoint :D. Hẹn gặp lại ở bài viết sau.

About Huy Nguyễn

Chào mọi người, mình là Huy. Mình thích rất nhiều thứ liên quan đến máy tính, thích web thích lập trình, thích thiết kế ... :3. Thích nhiều thứ, hiện tại mình đang tìm hiểu về Wordpress bạn nào có hứng thú thì trao đổi thêm vs mình nha.

Check Also

Cùng tìm hiểu những điều cơ bản về QR code

QR code hiện nay đã không còn lạ lẫm với mọi người, mình xin tổng …

Leave a Reply

%d bloggers like this: