Hãy đối mặt với nó. Là nhà phát triển, chúng tôi dành phần lớn thời gian để khắc phục sự cố. Dù tôi có cố gắng thế nào đi chăng nữa, luôn có điều gì đó cần gỡ rối. Trước đây, tôi sẽ sử dụng console.log hoặc alert. Chỉ cần rắc chúng vào mã của tôi và hy vọng rằng họ cung cấp cho tôi đủ thông tin để khắc phục sự cố
Nếu bạn đã thử làm điều đó, bạn biết rằng đó không phải là một cách tiếp cận tốt. Nó giống như đưa cho bác sĩ phẫu thuật một con dao rựa thay vì một con dao mổ – không chính xác và là một công cụ tồi cho công việc
Nhưng giống như bác sĩ phẫu thuật có dao mổ, chúng tôi cũng có sẵn những công cụ tốt hơn cho chúng tôi. Cụ thể, trình gỡ lỗi. Trong bài viết này, tôi sẽ hướng dẫn bạn cách sử dụng trình gỡ lỗi JavaScript của Chrome để giúp bạn sửa lỗi nhanh hơn và dễ dàng hơn
Bắt đầu
Để bắt đầu, chúng ta có thể mở Công cụ dành cho nhà phát triển thông qua menu, bằng cách nhấp chuột phải vào trang và chọn “Kiểm tra phần tử” hoặc bằng cách nhấn F12 (hoặc Cmd+Opt+i nếu bạn đang sử dụng máy Mac)
Chúng tôi có thể tìm thấy trình gỡ lỗi tập lệnh từ tab Nguồn của công cụ dành cho nhà phát triển. Nó sẽ giống như thế này
nhấp để phóng to
Chúng tôi có rất nhiều thứ trong chế độ xem này. Trong bài viết này, chúng ta sẽ chỉ tập trung vào các điểm dừng và xem qua mã, có thể tìm thấy ở bên phải. Đây là những tính năng chính của trình gỡ lỗi và tất cả các chức năng khác được xây dựng trên chúng
Một kịch bản gỡ lỗi điển hình
Điều gì xảy ra trong một tình huống điển hình khi có lỗi trong mã JS của bạn?
Điều đầu tiên chúng tôi muốn làm là đảm bảo rằng chúng tôi đã bật “Tạm dừng khi có ngoại lệ”, đây là nút ở bên phải có biểu tượng tạm dừng trong đó
Bằng cách bật ngắt ngoại lệ, Chrome sẽ tự động tạm dừng thực thi mã vào trình gỡ lỗi cho chúng tôi nếu có sự cố. Khi tính năng này được bật, chúng tôi cũng có thể tùy chọn tạm dừng Chrome đối với các trường hợp ngoại lệ bị bắt. Điều này có nghĩa là mọi ngoại lệ được đưa ra đều dẫn đến việc Chrome tạm dừng thực thi. Đôi khi, tính năng này có thể hữu ích nếu thư viện đang xử lý lỗi và Chrome sẽ không tạm dừng lỗi đó
Kiểm tra giá trị
Khi Chrome tạm dừng thực thi tập lệnh, chúng tôi có thể nhận được nhiều thông tin về những gì đang diễn ra. Đây là một trong những lợi ích lớn của việc sử dụng trình gỡ lỗi - bạn có quyền truy cập vào mọi thứ mà tập lệnh có quyền truy cập. Không cần thêm nhật ký ngẫu nhiên và cố gắng đoán xem điều gì đã xảy ra
Trong chế độ xem mã, Chrome cung cấp cho chúng tôi thông tin về các giá trị biến. Dòng được đánh dấu màu xanh lam là nơi mã bị tạm dừng. Biểu tượng màu đỏ trên dòng cho biết một ngoại lệ đã được đưa ra. Chúng ta có thể thấy thông báo lỗi bằng cách di con trỏ qua biểu tượng hoặc bằng cách nhìn bên phải nơi có thông báo “Tạm dừng khi có ngoại lệ”
Chúng tôi cũng có thể kiểm tra thêm bất kỳ biến nào bằng cách di con trỏ qua tên của chúng. Điều này đặc biệt hữu ích cho các đối tượng có thể chứa nhiều thuộc tính. Chúng tôi cũng có thể tìm thấy nhiều thông tin khác nhau ở bên phải, trong “Phạm vi”. Trong bảng này, các biến được nhóm theo phạm vi của chúng – ví dụ: bất kỳ biến cục bộ nào được xác định trong hàm mà chúng ta đang ở sẽ ở trong “Locals”, nếu chúng ta ở trong một bao đóng, một nhóm cho các biến từ bao đóng sẽ được đưa vào và cuối cùng
Tìm ra vấn đề
Bước đầu tiên để tìm ra vấn đề là xem thông báo lỗi. Trong trường hợp này, chúng ta có một TypeError: urls.forEach is not a function. Trên dòng được đánh dấu, chúng ta có thể thấy mã đang cố gọi forEach
Vì lỗi chỉ ra rằng forEach không phải là một hàm, điều đó có nghĩa là urls là một giá trị không chính xác. Nếu chúng ta tìm kiếm giá trị của urls bằng cách di con trỏ lên nó, chúng ta có thể thấy đó là một chuỗi "foobar" – rõ ràng không phải là một mảng và do đó nó không có hàm forEach trong đó
Chúng ta có thể dừng lại ở đây. Chúng tôi đã xác định được sự cố và chúng tôi có thể khắc phục sự cố bằng cách kiểm tra loại biến. Tuy nhiên, chúng tôi chưa muốn làm điều đó ngay bây giờ
Một trong những bí mật để viết mã mạnh mẽ là hiểu tại sao điều gì đó xảy ra. Người mới bắt đầu sẽ sửa lỗi này bằng câu lệnh if để kiểm tra loại và gọi nó là một ngày, nhưng chúng tôi muốn trở thành chuyên gia. Chúng ta cần xác định nguyên nhân cốt lõi của vấn đề trước khi khắc phục
Xác định nguyên nhân gốc rễ
Cách tiếp cận mà một nhà phát triển có kinh nghiệm thực hiện để sửa lỗi là tìm ra nguyên nhân gốc rễ của chúng. Chắc chắn rồi, chúng tôi có thể thêm một bản sửa lỗi, nhưng lỗi thường chỉ là triệu chứng của lỗi chứ không phải lỗi thực sự. Chúng tôi có thể khắc phục triệu chứng và giả vờ như lỗi không tồn tại, nhưng điều này chỉ dẫn đến mã lộn xộn và vô số bản sửa lỗi trong trường hợp đặc biệt cho những thứ mà không ai thực sự hiểu. Một cách tiếp cận tốt hơn là sửa nó tại nguồn – điều này cũng thường ngăn ngừa các lỗi trong tương lai
Chúng ta có thể bắt đầu tìm kiếm nguyên nhân gốc rễ bằng cách tìm trong Call Stack ở bên phải
Call Stack cho chúng ta thấy “cha mẹ” của lệnh gọi hàm này. Chức năng hiện tại của chúng tôi được đánh dấu, Loader.loadImages. Tất cả các mục bên dưới nó là các chức năng đã được thực thi trước khi nhập chức năng này – trong trường hợp này, chúng ta có thể thấy chức năng nơi mã đến là một alert0
Chúng tôi có thể truy cập tất cả các chức năng trước đó bằng cách nhấp vào chúng trong danh sách ngăn xếp cuộc gọi. Chúng ta nên thử và lặp lại các bước trước đó cho đến khi tìm thấy nguồn. Tìm bất kỳ biến nào đang được chuyển xung quanh với các giá trị không chính xác. Khi chúng tôi tìm thấy nơi bắt nguồn của giá trị xấu, chúng tôi đã tìm ra nguyên nhân gốc rễ của mình
Trong trường hợp này, câu trả lời rất đơn giản
Vào chức năng trước đó, chúng ta lại nhận được thông tin giống như tập lệnh đã có - tất cả các giá trị biến, v.v. được thể hiện. Chúng ta cũng có thể thấy dòng mã được gọi là chức năng ban đầu của chúng ta
Chúng tôi có thể thấy mã vi phạm được tô sáng – Chúng tôi đang gọi hàm alert1 với các tham số không hợp lệ. Nếu đây là mã thực, thì bây giờ bạn có thể khắc phục sự cố này - nhưng trong trường hợp này, tôi đã nhập mã này vào bảng điều khiển để gây ra lỗi
Gỡ lỗi một vấn đề phức tạp hơn
Hãy xem một ví dụ khác. Có một số tính năng khác trong trình gỡ lỗi mà chúng tôi có thể sử dụng để giúp gỡ lỗi các sự cố phức tạp hơn
Tôi đã tạo một đoạn ví dụ trên JSFiddle, đoạn mã này chúng ta sẽ gỡ lỗi tiếp theo. Mã này dựa trên một số mã sản xuất thực mà chúng tôi có trong công việc hàng ngày của mình, nhưng được đơn giản hóa để chúng tôi có thể tập trung vào gỡ lỗi, thay vì hiểu mã đang làm gì
Mã này có một số logic để tạo danh sách đối tượng dựa trên bất kỳ phần tử nào có lớp trong tài liệu. Nếu bạn nhấp vào nút chạy trong câu đố, bạn sẽ thấy một số đầu ra liệt kê hai đối tượng. Nếu bạn sửa đổi HTML và bao gồm một phần tử khác với một lớp, nó cũng sẽ hiển thị ở đó
Lỗi ở đây là chúng tôi muốn loại biểu thị alert2 khi phần tử là một alert3, nhưng thay vào đó nó lại ghi là alert4
Vì chúng tôi không ném ngoại lệ, nên chúng tôi cần sử dụng một số cách tiếp cận khác để tạm dừng thực thi mã vào trình gỡ lỗi
Sử dụng điểm ngắt
Để tạm dừng thực thi mã ở bất cứ đâu chúng ta muốn, chúng ta có thể sử dụng điểm dừng. Chúng tôi có hai cách để thiết lập một breakpoint
- Chúng ta có thể đặt điểm dừng bằng cách sử dụng câu lệnh alert5
- Chúng tôi có thể đặt điểm ngắt từ trình gỡ lỗi tập lệnh
Hãy bắt đầu bằng cách sử dụng phương pháp đầu tiên. Sử dụng alert5 thuận tiện khi bạn mở tệp và có thể chỉnh sửa nó, vì vậy tôi sẽ thêm nó sau dòng 9 trong câu đố
Nếu chúng ta nhấp vào nút chạy sau khi thêm câu lệnh trình gỡ lỗi (nhớ chạy lại fiddle để lưu các thay đổi), trình gỡ lỗi tập lệnh sẽ tự động tạm dừng mã trên dòng có câu lệnh
Ghi chú. số dòng trong trình gỡ lỗi tập lệnh khác với trong fiddle
Chúng ta có thể thấy rằng phép lặp của forEach hiện đang ở phần tử alert8. Chúng tôi muốn xem điều gì sẽ xảy ra với phần tử hình ảnh. Để làm như vậy, chúng ta có thể tiếp tục thực thi tập lệnh bằng cách sử dụng nút ở bên phải trông giống như nút Phát
Khi chúng tôi nhấn nó, tập lệnh sẽ được tiếp tục, nhưng nếu công cụ gặp một điểm dừng khác, nó sẽ lại tạm dừng tại đó. Khi trình gỡ lỗi tạm dừng tập lệnh của chúng tôi cho hình ảnh, bây giờ chúng ta có thể thấy rằng biến alert9 có giá trị không hợp lệ – nó được cho là có giá trị alert2
Có vẻ như giá trị loại xuất phát từ hàm TypeError: urls.forEach is not a function1, vì vậy chúng ta cần đi sâu vào nó và tìm ra điều gì sai
Hãy thêm một điểm dừng khác - lần này, hãy sử dụng phương pháp thứ hai. Chúng tôi có thể thêm các điểm ngắt từ trình gỡ lỗi tập lệnh bằng cách nhấp vào số dòng ở bên trái của chế độ xem mã. Hãy nhấp vào dòng 32 có chứa cuộc gọi đến TypeError: urls.forEach is not a function1
Số dòng hiện được tô sáng để cho biết nó có điểm dừng. Hãy tiếp tục tập lệnh một lần nữa và nhấn nút chạy một lần nữa. Lần này, mã tạm dừng tại điểm ngắt mà chúng tôi đã đặt từ trình gỡ lỗi
Tương tự như trước, hãy nhấp vào nút tiếp tục một lần để chúng tôi lấy phần tử hình ảnh
Chạy mã từng bước
Bây giờ chúng ta có thể xem qua mã để xem nó đang được thực thi như thế nào. Bất cứ khi nào mã bị tạm dừng, chúng ta có thể sử dụng các nút ở bên phải bên cạnh nút tập lệnh tiếp tục để chạy mã từng bước và xem điều gì đang xảy ra
Từ trái sang phải, họ là…
- Tiếp tục thực thi tập lệnh. Tập lệnh chạy như bình thường, cho đến khi gặp một điểm dừng khác
- Bước qua cuộc gọi chức năng tiếp theo. Thực thi dòng mã hiện được đánh dấu
- Bước vào cuộc gọi chức năng tiếp theo. Thay vì chỉ thực thi dòng mã, điều này sẽ đi vào “bên trong” chức năng tiếp theo
- Bước ra khỏi chức năng hiện tại. Chạy mọi mã còn lại trong hàm như bình thường và tạm dừng khi hàm thoát
Hãy để tôi giải thích chúng chi tiết hơn một chút
Bước vào sẽ đi vào bất kỳ hàm nào được gọi trên dòng hiện tại. Nếu chúng tôi sử dụng bước vào khi chúng tôi tạm dừng trên TypeError: urls.forEach is not a function1, mã sẽ chuyển đến dòng đầu tiên của hàm và bạn có thể tiếp tục chuyển qua mã từ đó. Bạn nên sử dụng bước vào bất cứ khi nào bạn muốn biết chức năng đang làm gì
Bước qua thực hiện dòng hiện tại, nhưng không bước vào bất kỳ chức năng nào. Nó vẫn thực thi mã bên trong chức năng như bình thường. Điều này thuận tiện nếu mã của bạn đang gọi một hàm tiện ích mà bạn không quan tâm, chẳng hạn như jQuery, Lodash hoặc một số trình trợ giúp khác. Nếu bạn không quan tâm đến chức năng của một chức năng, bạn có thể chỉ cần lướt qua nó, vì vậy bạn không cần phải lướt qua từng dòng mã bên trong nó
Step out thực thi phần còn lại của mã trong hàm hiện tại và trả về cho bạn một bước ra khỏi ngăn xếp cuộc gọi. Điều này thuận tiện khi bạn đang ở trong một chức năng nhưng không muốn xem qua phần mã còn lại của nó. Bạn có thể sử dụng bước ra để quay lại nơi hàm được gọi và tiếp tục từ đó
Bạn có thể thử với từng tùy chọn này để hiểu rõ hơn. Chỉ cần lặp lại các bước tập lệnh nút chạy/tiếp tục từ trước để quay lại
Giải quyết vấn đề
Khi chúng tôi tạm dừng ở dòng 32 với TypeError: urls.forEach is not a function1, chúng tôi muốn tìm hiểu điều gì đã xảy ra. Chúng ta có thể sử dụng step into để vào bên trong hàm để xem xét
Bạn sẽ nhận thấy trình gỡ lỗi đưa bạn vào dòng đầu tiên của hàm. Bây giờ chúng ta có thể sử dụng bước vào hoặc bước qua để chạy mệnh đề if và xem điều gì sẽ xảy ra
Việc thực thi mã nhảy qua câu lệnh if. Điều này có nghĩa là điều kiện không dẫn đến giá trị trung thực. Hãy tìm hiểu tại sao. Nếu bạn di con trỏ qua TypeError: urls.forEach is not a function5, chúng tôi có thể kiểm tra nó và hy vọng biết được lý do tại sao mã không hoạt động
Có vẻ như chúng tôi đã tìm thấy vấn đề của mình. Giá trị TypeError: urls.forEach is not a function6 là chữ hoa, trong khi điều kiện của chúng tôi kiểm tra giá trị chữ thường. Chúng tôi đã xác định được nguyên nhân của sự cố và hiện có thể khắc phục sự cố
Sự kết luận
Trình gỡ lỗi của Chrome là một công cụ mạnh mẽ và có thể giảm rất nhiều thời gian gỡ lỗi mã. Thậm chí tốt hơn, các phương pháp tương tự này có thể được áp dụng cho các công cụ dành cho nhà phát triển trong các trình duyệt khác – bao gồm Firefox, Safari và thậm chí cả Internet Explorer
Bạn có thể sử dụng các phương pháp được hiển thị trong bài viết này để gỡ lỗi hầu hết các sự cố mà bạn có thể gặp phải – cụ thể là các điểm dừng là một tính năng rất mạnh mẽ
Đây chỉ là trầy xước bề mặt. Các công cụ dành cho nhà phát triển có nhiều tính năng hữu ích hơn trong đó. Tôi đang xem xét việc tạo một loạt bài viết này, vì vậy vui lòng để lại nhận xét bên dưới nếu bạn muốn xem thêm