Làm chủ Google Chrome DevTools và các chức năng Call Stack, Watch, Scope

1. Giới thiệu và cách mở công cụ DevTools

Kỹ năng debug là một kỹ năng nền tảng không thể thiếu của bất kỳ một lập trình viên nào. Debug không chỉ để tìm và sửa lỗi, mà còn giúp lập trình viên hiểu rõ hơn luồng của chương trình. Qua đó cải thiện kỹ năng code của mình và chất lượng chương trình thông qua các lỗi đã được sửa.

Google Chrome là một trình duyệt web được giới lập trình viên ưa chuộng vì nhanh, tiện lợi, đồng bộ và sở hữu công cụ Developer Tools vô cùng mạnh mẽ. Bài viết này sẽ giới thiệu cơ bản về công cụ DevTools, cách sử dụng các chức năng Call Stack, Watch, Scope trong công cụ này.

Một vài cách mở DevTools dễ thực hiện như sau:

  • Ctrl + Shift + I.
  • F12.
  • Chuột phải => Kiểm tra phần tử (Inspect).

Bạn chuyển qua Tab Sources sẽ là nơi bạn thực hành debug sau này.

  1. List các Source files (HTML, Javascript, CSS, …).
  2. Hiển thị nội dung file source hiện tại.
  3. Control buttons và thông tin trong quá trình debug.

2. Các chức năng cơ bản

Break points:

Break point màu xanh

Breakpoints là vị trí mà chương trình sẽ dừng lại để lập trình viên xem xét sự thay đổi qua từng biến, qua từng dòng lệnh, từ đó phát hiện ra vị trí dòng code lỗi.

Có thể đặt nhiều Breakpoint trong chương trình. Trên Chrome Developer Tools, để đặt breakpoints, đơn giản chỉ cần click vào line number. Hoặc bạn có thể đặt debugger trong JavaScript

Các lệnh điều khiển cơ bản:

  • Resume F8: Chương trình sẽ tiếp tục chạy cho đến khi gặp 1 breakpoint khác (nếu có).
  • Step over F10: Chạy từng dòng lệnh, nhưng sẽ không nhảy vào trong các hàm khác.
  • Step into F11: Chạy từng dòng lệnh như Step over, nhưng sẽ nhảy vào từng dòng lệnh trong các hàm khác.
  • Step out Shift+F11: Thoát khỏi hàm hiện tại đang debug.
  • Step F9: Chạy từng dòng lệnh.
  • Deactive breakpoint: Tắt hêt các điểm breakpoint.
  • Pause on exception: Tự động dừng khi xảy ra ngoại lệ.

Bây giời, mình sẽ cùng tìm hiểu về phần chính của bài viết này.

3. Call Stack

JavaScript là một ngôn ngữ đơn luồng, cũng có nghĩa là nó chỉ có một Call Stacklà một cấu trúc dữ liệu dạng ngăn xếp (stack) dùng để chứa thông tin về hoạt động của chương trình, danh sách các hàm được gọi lúc thực thi chương trình.
Khi bạn chạy debug code theo cách nhảy từng dòng lệnh, thì Chrome DevTools cung cấp cho bạn 1 Call Stack pane. Do đó khi bạn debug/step đến một function A, thì A sẽ được push (on top) vào Call Stack. Sau khi thực thi hàm A xong và trả về kết quả thì A sẽ bị pop ra khỏi stack.

Ví dụ cơ bản giúp thông não:

Có đoạn code sau:

Khi selector ‘.TruongBatBuoc’ thoả mãn sự kiện thì sẽ chạy hàm CheckInput(). Mình đặt break point vào hàm CheckInput() thì ta được Call Stack như sau:

Call Stack

Tiếp tục F11 để chạy từng dòng và quan sát của hàm CheckInput(), vì trong hàm CheckInput() có gọi hàm validateEmail() nên con trỏ chuyển vào hàm này và nó được push vào top của Call Stack:

Con trỏ chuyển vào hàm validateEmail()
Hàm validateEmail() được push vào Call Stack

Và giống như những Stack, sau khi thực hiện hàm phía trên cùng xong thì nó sẽ bị pop ra khỏi Call Stack. Khi nhìn vào Call Stack ta còn biết được hàm đó nằm ở file JS nào, dòng thứ bao nhiêu. VD: ảnh trên hàm dispatch() nằm ở file jquery.js và ở dòng thứ 5226 trong file.

4. Watch

Watch là một chức năng của Chrome DevTools cho phép bạn dễ dàng quản lý biến trong chương trình của mình. Bạn sẽ không phải dùng đến Tab Console để kiểm tra các biến khi đang debug ở Tab Sources vì Watch sẽ giúp bạn quản lý dễ dàng hơn, tiện lợi và không cần chuyển qua lại giữa các Tab.

Thêm biến

Để thêm một biến vào Watch list, bạn chọn vào biểu tượng thêm phía bên phải của khung Watch. Sau đó nhập tên biến và ấn Enter để thêm.

Trình theo dõi sẽ cho bạn thấy giá trị cụa biến được thêm vào. Nếu biến chưa được đặt hoặc không thể tìm thấy thì nó sẽ hiển thị <not availiable> ở phần giá trị.

Cập nhật biến

Khi bạn đang thực hiện debug trên Chrome, các giá trị biến sẽ tự động cập nhập trong khung Watch. Bạn cũng có thể cập nhật lại trị thủ công giá trị của các biến bằng cách nhấn nút refresh cạnh nút thêm biến.

Xóa các biến khỏi danh sách

Sẽ có thể có những biến bạn không muốn quản lý nữa. Bạn có thể cần xóa các biến ra khỏi Watch list để tối ưu và làm việc nhanh hơn. Bạn có thể xóa bằng cách di chuột vào biến, sau đó nhấp vào icon loại bỏ ở bên phải. Hoặc chuột phải rồi chọn Delete watch expression.

5. Scope

Khi bạn debug, khung Scope hiển thị cho bạn các thuộc tính, biến được xác định tại thời điểm đó.

Khung Scope chỉ hiển thị dữ liệu khi đang ở trong chế độ debug. Khi chương trình chạy bình thường thì khung Scope trống.

Khung Scope hiển thị các thuộc tính và các biến xác định ở phạm vi Local, Closure và Global.

Có thể quản lý các đối tượng được tạo ra nếu viết JS OOP.

Scope và Watch đều rất hữu ích, tiện dụng. Theo mình điểm khác nhau của 2 chức năng này là:

  • Scope: thì chỉ có thể theo dõi được các thuộc tính, biến và đối tượng không cần thêm thủ công.
  • Watch: có thể theo dõi được các hàm, nhưng cần thêm thủ công. Nhưng khi dừng debug, trong một số trường hợp giá trị vẫn được lưu lại ở khung Watch.

Bài viết dựa trên những rì mình từng trải và tham khảo ở https://developers.google.com.

Mình là Hùng, sinh viên năm 3 của UET. Số đo 4 vòng của mình là 50-100-50-20cm=)). Mong mọi người xem sẽ không cà khịa mình vì bài viết quá hay :3 Bye!!!