Cách debug javascript trên Chrome

Trước khi viết mã phức tạp hơn, hãy nói về debugging.

Debugging là quá trình tìm và sửa lỗi trong một tập lệnh. Tất cả các web browser hiện đại và hầu hết các môi trường khác đều hỗ trợ công cụ debugging một giao diện người dùng đặc biệt trong các công cụ dành cho nhà phát triển giúp debugging dễ dàng hơn nhiều. Nó cũng cho phép theo dõi mã từng bước để xem chính xác những gì đang diễn ra.

Các bài viết liên quan:

• Debugger trong android studio
• Cấu trúc điều kiện trong JavaScript
• Loop trong JavaScript
• Gradients trong CSS

Chúng tôi sẽ sử dụng Chrome ở đây, vì nó có đủ tính năng, hầu hết các browser khác đều có quy trình tương tự.

Hướng dẫn debugging JavaScript trong Browser

Tab Source

Phiên bản Chrome của bạn có thể trông hơi khác một chút, nhưng vẫn phải rõ ràng những gì ở đó.

• Mở trang ví dụ trong Chrome.
• Bật công cụ dành cho nhà phát triển với F12 (Mac: Cmd + Opt + I).
• Chọn Tab Source.

Dưới đây là những gì bạn sẽ thấy nếu bạn làm điều đó lần đầu tiên:

Hãy nhấp vào nó và chọn hello.js trong chế độ xem dạng cây. Đây là những gì sẽ hiển thị:

Tab Source có 3 phần:

• File Navigator tệp liệt kê HTML, JavaScript, CSS và các tệp khác, bao gồm cả hình ảnh được đính kèm vào trang. Các tiện ích mở rộng của Chrome cũng có thể xuất hiện ở đây.
• Code Editor hiển thị mã nguồn.
• Ngăn debugging JavaScript dùng để debugging, chúng ta sẽ khám phá nó ngay sau đây.

Bây giờ bạn có thể nhấp lại vào cùng một trình chuyển đổi để ẩn danh sách tài nguyên và cung cấp cho mã một số không gian.

Tab Console

Nếu chúng ta nhấn Esc, thì một bảng console sẽ mở ra bên dưới. Chúng ta có thể gõ lệnh vào đó và nhấn Enter để thực thi.

Sau khi một câu lệnh được thực thi, kết quả của nó được hiển thị bên dưới.

Ví dụ: ở đây 1 + 2 cho kết quả là 3 và hello (trình debugging) không trả về kết quả nào, vì vậy kết quả là không xác định:

BreakPoint

Hãy kiểm tra xem điều gì đang xảy ra trong mã của trang mẫu. Trong hello.js, nhấp vào dòng số 4. Có, ngay trên chữ số 4, không phải trên code.

Xin chúc mừng! Bạn đã đặt một điểm dừng. Vui lòng nhấp vào số cho dòng 8.

Nó sẽ trông như thế này (màu xanh là nơi bạn nên nhấp vào):

Breakpoint là một điểm mã nơi trình debugging sẽ tự động tạm dừng việc thực thi JavaScript.

Trong khi mã bị tạm dừng, chúng tôi có thể kiểm tra các biến hiện tại, thực hiện các lệnh trong bảng điều khiển, v.v. Nói cách khác, chúng tôi có thể debugging nó.

Chúng tôi luôn có thể tìm thấy danh sách các Breakpoint trong bảng điều khiển bên phải. Điều đó rất hữu ích khi chúng ta có nhiều Breakpoint trong các tệp khác nhau. Nó cho phép chúng tôi:

• Nhanh chóng chuyển đến Breakpoint trong mã (bằng cách nhấp vào Breakpoint trong bảng bên phải).
• Tạm thời vô hiệu hóa Breakpoint bằng cách bỏ chọn nó.
• Xóa Breakpoint bằng cách nhấp chuột phải và chọn Xóa.
• Và như thế.

Conditional breakpoints

Nhấp chuột phải vào số dòng cho phép tạo Breakpoint có điều kiện. Nó chỉ kích hoạt khi biểu thức đã cho là đúng.

Điều đó rất hữu ích khi chúng ta chỉ cần dừng cho một giá trị biến nhất định hoặc cho một số tham số hàm nhất định.

Lệnh debugging

Chúng ta cũng có thể tạm dừng mã bằng cách sử dụng lệnh trình debugging trong đó, như sau:

Debugger;

Điều đó rất thuận tiện khi chúng tôi đang ở trong trình chỉnh sửa mã và không muốn chuyển sang trình duyệt và tra cứu tập lệnh trong công cụ dành cho nhà phát triển để đặt Breakpoint.

Pause và look

Trong ví dụ của chúng tôi, hello () được gọi trong quá trình tải trang, vì vậy cách dễ nhất để kích hoạt trình debugging (sau khi chúng tôi đặt các Breakpoint) là tải lại trang. Vì vậy, hãy nhấn F5 (Windows, Linux) hoặc Cmd + R (Mac).

Khi Breakpoint được đặt, việc thực thi tạm dừng ở dòng thứ 4:

Vui lòng mở menu thả xuống thông tin ở bên phải (có gắn nhãn mũi tên). Chúng cho phép bạn kiểm tra trạng thái mã hiện tại:

1. Watch hiển thị các giá trị hiện tại cho bất kỳ biểu thức nào.

Bạn có thể nhấp vào dấu cộng + và nhập một biểu thức. Trình debugging sẽ hiển thị giá trị của nó bất kỳ lúc nào, tự động tính toán lại trong quá trình thực thi.

1. Call Stack hiển thị chuỗi cuộc gọi lồng nhau.

Tại thời điểm hiện tại, trình debugging đang ở bên trong lệnh gọi hello (), được gọi bởi một tập lệnh trong index.html (không có chức năng nào ở đó, vì vậy nó được gọi là ẩn danh).

Nếu bạn nhấp vào một mục ngăn xếp (ví dụ: ẩn danh), trình debugging sẽ chuyển đến mã tương ứng và tất cả các biến của nó cũng có thể được kiểm tra.

1. Scope các biến hiện tại.

Local hiển thị các biến hàm cục bộ. Bạn cũng có thể thấy các giá trị của chúng được đánh dấu ngay trên nguồn.

Global có các biến toàn cục (trong số bất kỳ hàm nào).

Ở đó cũng có từ khóa này mà chúng tôi chưa nghiên cứu, nhưng chúng tôi sẽ sớm thực hiện điều đó.

Theo dõi các bước chạy JavaScript

Có các nút cho nó ở trên cùng của bảng console bên phải. Hãy chú ý.

1. Resume: tiếp tục thực hiện, phím nóng F8.

Tiếp tục thực hiện. Nếu không có thêm Breakpoint nào, thì quá trình thực thi sẽ tiếp tục và trình debugging sẽ mất quyền kiểm soát.

Đây là những gì chúng ta có thể thấy sau khi nhấp vào nó:

Quá trình thực thi đã tiếp tục, đạt đến một Breakpoint khác bên trong say () và tạm dừng ở đó. Hãy xem Call Stack ở bên phải. Nó đã tăng thêm một bước gọi hàm. Chúng ta đang ở bên trong say () ngay bây giờ.

1. Step: chạy lệnh tiếp theo, phím nóng F9.

Chạy câu lệnh tiếp theo. Nếu chúng ta nhấp vào nó ngay bây giờ, cảnh báo sẽ được hiển thị.

Nhấp vào đây một lần nữa lần nữa sẽ lần lượt chạy qua tất cả các câu lệnh script.

1. Step over: chạy lệnh tiếp theo nhưng không đi vào một function, phím nóng F10.

Tương tự như lệnh Step trước đó, nhưng hoạt động khác nếu câu lệnh tiếp theo là một lệnh gọi hàm. Đó là: không phải là một cảnh báo được tích hợp sẵn, mà là một chức năng của riêng chúng ta.

Lệnh Step đi vào nó và tạm dừng việc thực thi ở dòng đầu tiên của nó, trong khi Step over thực hiện lệnh gọi hàm lồng nhau một cách vô hình, bỏ qua phần bên trong của hàm.

Việc thực thi sau đó bị tạm dừng ngay sau chức năng đó.

Điều đó thật tốt nếu chúng ta không muốn xem điều gì xảy ra bên trong lệnh gọi hàm.

1. Step into, phím nóng F11.

Điều đó tương tự như Bước, nhưng hoạt động khác trong trường hợp gọi hàm không đồng bộ. Nếu bạn chỉ mới bắt đầu học JavaScript, thì bạn có thể bỏ qua sự khác biệt, vì chúng tôi chưa có lệnh gọi không đồng bộ.

Đối với tương lai, chỉ cần lưu ý rằng lệnh Step bỏ qua các hành động không đồng bộ, chẳng hạn như setTimeout (lệnh gọi hàm đã lên lịch), sẽ thực thi sau đó. Bước vào đi vào mã của họ, chờ họ nếu cần. Xem hướng dẫn sử dụng DevTools để biết thêm chi tiết.

1. Step out: tiếp tục thực hiện cho đến khi kết thúc function hiện tại, phím nóng Shift + F11.

Tiếp tục thực hiện và dừng nó ở dòng cuối cùng của hàm hiện tại. Điều đó rất hữu ích khi chúng ta vô tình tham gia một cuộc gọi hàm lồng nhau bằng cách sử dụng, nhưng nó không khiến chúng tôi quan tâm và chúng tôi muốn tiếp tục kết thúc cuộc gọi đó càng sớm càng tốt.

1. enable/disable all breakpoints.

Nút đó không di chuyển việc thực thi. Chỉ cần bật / tắt khối lượng cho các Breakpoint.

1. enable/disable automatic pause in case of an error.

Khi được bật và các công cụ dành cho nhà phát triển đang mở, lỗi tập lệnh sẽ tự động tạm dừng quá trình thực thi. Sau đó, chúng tôi có thể phân tích các biến để xem điều gì đã xảy ra. Vì vậy, nếu tập lệnh của chúng tôi chết do lỗi, chúng tôi có thể mở trình debugging, bật tùy chọn này và tải lại trang để xem vị trí chết và bối cảnh tại thời điểm đó.

Nhấp chuột phải vào một dòng mã sẽ mở menu với một tùy chọn tuyệt vời có tên Continue to here.

Điều đó rất hữu ích khi chúng ta muốn di chuyển nhiều bước về phía trước dòng, nhưng chúng ta quá lười để đặt Breakpoint.

Log

Để xuất nội dung nào đó ra bảng console của chúng tôi, có chức năng console.log.

Ví dụ:

console.log(value,, data);

Người dùng thông thường không thấy đầu ra đó, nó nằm trong bảng console. Để xem nó, hãy mở bảng điều khiển Console của các công cụ dành cho nhà phát triển hoặc nhấn Esc khi đang ở trong một bảng điều khiển khác: điều này sẽ mở ra bảng điều khiển ở dưới cùng.

Nếu chúng tôi có đủ thông tin đăng nhập vào mã của mình, thì chúng tôi có thể xem những gì đang diễn ra từ các bản ghi mà không cần trình debugging.

Tóm lược

Như chúng ta có thể thấy, có 2 cách chính để tạm dừng một tập lệnh javaScript:

• Một Breakpoint.
• Các câu lệnh trong debugging.

Khi bị tạm dừng, chúng ta có thể debugging kiểm tra các biến và theo dõi mã để xem việc thực thi bị sai ở đâu.

Thông tin từ chương này là đủ để bắt đầu debugging, nhưng sau này, đặc biệt nếu bạn thực hiện nhiều thứ trên trình duyệt, vui lòng đến đó và xem qua các khả năng nâng cao hơn của các công cụ dành cho nhà phát triển.

Ngoài ra, bạn cũng có thể nhấp vào các vị trí khác nhau của các công cụ dành cho nhà phát triển và chỉ cần xem những gì đang hiển thị. Đó có lẽ là con đường nhanh nhất để học các công cụ dành cho nhà phát triển. Đừng quên về nhấp chuột phải và menu ngữ cảnh!

Video liên quan