Home > Lập trình > Javascript > Debug Javascript Với Google DevTools (Part2)

Debug Javascript Với Google DevTools (Part2)

Hi, tiếp tục bài viết giới thiệu về Google DevTools nào. Ở bài viết trước tớ đã giới thiệu sơ qua về Google DevTools, nếu bạn nào chưa biết hoặc chưa rõ có thể đọc lại bài viết này tại đây.

Google Developers
Google Developers 

Debug với Breakpoints

Debug là một kỹ thuật dùng để kiểm tra dữ liệu hay workflow code (nôm na là luồng mà mã code sẽ đi)
Một đoạn mã code sẽ được biên dịch từ trái qua phải và từ trên xuống dưới. Trong quá trình debug có những đoạn mã code ta có thể dễ dàng nhìn thấy đường đi logic hay giá trị của một biế…, tuy nhiên sẽ có những đoạn mã code xử lý phức tạp. Để bỏ qua những đoạn mã đơn giản và nhảy ngay đến vị trí ta quan tâm đó là mục đích sử dụng breakpoint. Một breakpoint sẽ đánh dấu một điểm dừng mà bạn muốn xem. Vì vậy sử dụng debug với breakpoint sẽ rút ngắn thời gian khi chúng ta lập trình.

B1: Mở một trang web có sử dụng Javascript (download code sample). Nhấn Ctrl + Shift + I để mở google DevTools, nhớ chuyển qua tab source để theo dõi mã script chạy thế nào nhé

Debug Javascript với Google DevTools
Debug Javascript với Google DevTools

B2: Tiếp theo là set breakpoint, ví dụ điểm tớ muốn dừng là điểm ta lấy giá trị của txtYourName trong sự kiên click của btnSearch. Thì trên line gutter tớ click tại dòng thứ 3 để set breakpoint, quá đơn giản. line gutter là cái cột hiển thị số dòng của script, google dịch là dòng máng xối J) nghe nó cứ ngồ ngộ chả giống gì kỹ thuật cả ^^

B3:
Debug sự kiện click của btnSearch, để debug thì tại trang index, sau khi gõ tên bạn vào ta nhấn vào btnSearch (nhớ là Google DevTool vẫn đang mở lên nhé đừng tắt đi), nếu đúng thì sẽ thấy như hình dưới.
Line thứ 3 sẽ được tô lên màu xanh, ý là hiện tại ta đang ở dòng thứ 3 trong script này

Debug Javascript
Debug Javascript

Giải thích lại về Step Over/ In/ Out
Step over Step In khá giống nhau, có điều nếu trong dòng code hiện tại có một lời gọi “call function” (ví dụ: line số 8) thì Step In sẽ tiến vào bên trong function, như hình trên thì con trỏ cái dòng màu xanh sẽ nhảy đến line 13
ta phải đi tiếp đến hết function hoặc dùng step Out nhảy ra để có thể lấy kết quả. Còn Step over nó sẽ đi tiếp sang line số 9 và ta sẽ nhìn thấy kết quả của function SayHello ngay lập tức.

Chỉ như vậy thôi là sau khi chạy hết một vòng ta sẽ hiểu rõ với dữ liệu là tên bạn hiện tại thì btnSearch sẽ làm việc và cho ra kết quả như thế nào. Đây chỉ là một ví dụ đơn giản trong muôn vàn cái phức tạp, chính vì vậy lúc lập trình, code thì tớ và các cậu đều cần phải cẩn thận, tránh xảy ra những lối logic cơ bản, rút ngắn thời gian viết mã 😀

Một số điều lưu ý và nâng cao

 

  1. Ta có thể set nhiều breakpoint để phù hợp với mục đích dùng. Cột ngoài cùng bên tay phải có một tab là Breakpoints, ta có thể chỉnh bật tắt những breakpoint nào tùy thích.
  2. Ta có thể xóa breakpoint bằng cách click thêm lần nữa lên breakpoint
  3. Click phải lên breakpoint nó có những option sau
    Continue to here: ví dụ bạn đang ở line 3, nhưng muốn nhảy ngay đến line 8, thì ta set 1 breakpoint tại line 8 đồng thời click phải lên breakpoint và chọn continue to here. Như vậy bạn sẽ ngay lập tức chuyển đến line 8
    Remove breakpoint: đơn giản là xóa breakpoint đi
    Edit breakpoint: cái này là nâng cao, dùng để customize condition, bạn cần cung cấp một biểu thức so sánh trong này, Nếu biểu thức so sánh này đúng thì breakpoint này mới được dừng lại còn nếu không nó sẽ được bỏ qua.
    Disable breakpoint: đơn giản là tắt breakpoint này đi

  4. Trong quá trình debug bạn có thể kiểm tra giá trị của biến hay biểu thức tại panel console, bằng cách gõ tên biến hay biễu thức vào và nhấn enter

    Capture5

    Vậy là xong phần Debug Javascript với Google DevTools, hy vọng bài này sẽ giúp ích cho các bạn trong quá trình viết code. Trên đây chỉ là những vấn đề cơ bản và thường dùng. Sẽ có những vấn đề khác trong quá trình sử dụng cũng như những nhu cầu khác nảy sinh. Đến lúc đó thì các bạn hãy tìm hiểu và đừng quên “Chia sẽ” lại cho mọi người nhé.

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: