Hướng dẫn cuối cùng để gỡ lỗi JavaScript

Tìm hiểu cách gỡ lỗi JavaScript bằng trình gỡ lỗi DevTools của trình duyệt

Gỡ lỗi là một trong những kỹ năng cốt lõi đối với hoạt động của một lập trình viên.

Đôi khi chúng tôi làm việc tốt nhất của mình, nhưng chương trình không hoạt động chính xác, chẳng hạn như nó bị lỗi, nó chỉ chậm hoặc nó in sai thông tin.

Bạn làm gì khi một chương trình bạn đã viết không hoạt động như bạn mong đợi?

Bạn bắt đầu gỡ lỗi nó.

Tìm ra lỗi có thể ở đâu

Bước đầu tiên luôn là xem xét những gì đang xảy ra và cố gắng xác định xem vấn đề đến từ đâu. Nó có phải là một vấn đề trong môi trường? Nó có vấn đề trong đầu vào mà bạn đã cung cấp cho chương trình? Nó có phải là sự cố một lần do sử dụng quá nhiều bộ nhớ không? Hay nó đang xảy ra mỗi khi bạn chạy nó?

Đó là tất cả những thông tin quan trọng để bắt đầu đi đúng hướng khi tìm ra một vấn đề.

Khi bạn đã biết được lỗi xuất phát từ đâu, bạn có thể bắt đầu kiểm tra phần mã cụ thể đó.

Đọc mã

Cách đơn giản nhất để gỡ lỗi, ít nhất là về mặt công cụ, là đọc mã bạn đã viết. Nói to. Có một điều kỳ diệu nào đó khi nghe từ chính giọng nói của chúng ta mà không xảy ra khi bạn đọc trong im lặng.

Thường thì tôi thấy có vấn đề theo cách này.

Sử dụng bảng điều khiển

Nếu việc đọc mã không tiết lộ gì cho bạn, bước hợp lý tiếp theo là bắt đầu thêm một vài dòng vào mã của bạn để có thể làm sáng tỏ.

Trong mã giao diện người dùng JavaScript, điều bạn thường làm là sử dụngalert()console.log(và những người bạn tuyệt vời của nó).

Hãy xem xét dòng này:

const a = calculateA()
const b = calculateB()
const result = a + b

Bằng cách nào đó, kết quả không được tính toán chính xác, vì vậy bạn có thể bắt đầu bằng cách thêmalert(a)alert(b)trước khi tính toán kết quả và trình duyệt sẽ mở hai bảng cảnh báo khi nó thực thi mã.

const a = calculateA()
const b = calculateB()
alert(a)
alert(b)
const result = a + b

Điều này hoạt động tốt nếu những gì bạn đang chuyển đếnalert()là một chuỗi hoặc một số. Ngay sau khi bạn có một mảng hoặc một đối tượng, mọi thứ bắt đầu quá phức tạp đối vớialert()và bạn có thể sử dụngAPI bảng điều khiển. Bắt đầu vớiconsole.log():

const a = calculateA()
const b = calculateB()
console.log(a)
console.log(b)
const result = a + b

Giá trị được in trong bảng điều khiển JavaScript của các công cụ dành cho nhà phát triển trình duyệt. Để thuận tiện, tôi sẽ giải thích cách gỡ lỗi trong Chrome DevTools tại đây, nhưng các khái niệm chung áp dụng cho tất cả các trình duyệt, với một số khác biệt về các tính năng được hỗ trợ.

Xemtổng quan chi tiết về Công cụ dành cho nhà phát triển của Chrome

Công cụ dành cho nhà phát triển của Chrome

Kết quả củaconsole.log()lệnh gọi được in ra bảng điều khiển JavaScript. Đây là một công cụ ít nhiều phổ biến cho mọi trình duyệt:

Browser console

Công cụ này rất mạnh mẽ và cho phép bạn in các đối tượng hoặc mảng phức tạp và bạn có thể kiểm tra mọi thuộc tính của chúng.

bên trongAPI bảng điều khiểnbài đăng bạn có thể thấy tất cả các tùy chọn và chi tiết làm việc với nó, vì vậy tôi không giải thích tất cả các chi tiết ở đây.

Trình gỡ lỗi

Trình gỡ lỗi là công cụ mạnh nhất trong các công cụ dành cho nhà phát triển trình duyệt và nó được tìm thấy trongNguồnbảng điều khiển:

The debugger

Phần trên cùng của màn hình hiển thị trình điều hướng tệp.

Bạn có thể chọn bất kỳ tệp nào và kiểm tra tệp đó ở bên phải. Điều này rất quan trọng để thiết lập các điểm ngắt, như chúng ta sẽ thấy ở phần sau.

Phần dưới cùng là trình gỡ lỗi thực tế.

Điểm ngắt

Khi trình duyệt tải một trang, mã JavaScript được thực thi cho đến khi đáp ứng một điểm ngắt.

Tại thời điểm này, quá trình thực thi bị tạm dừng và bạn có thể kiểm tra tất cả về chương trình đang chạy của mình.

Bạn có thể kiểm tra các giá trị của biến và tiếp tục thực hiện chương trình từng dòng một.

Nhưng trước tiên, breakpoint là gì? Ở dạng đơn giản, điểm ngắt là mộtbreakpointhướng dẫn đặt trong mã của bạn. Khi trình duyệt gặp nó, nó sẽ dừng lại.

Đây là một lựa chọn tốt trong khi phát triển. Một tùy chọn khác là mở tệp trong bảng Nguồn và nhấp vào số trên dòng bạn muốn thêm điểm ngắt:

Added breakpoint

Nhấp lại vào điểm ngắt sẽ xóa nó.

Sau khi bạn thêm một điểm ngắt, bạn có thể tải lại trang và mã sẽ dừng tại điểm thực thi đó khi nó tìm thấy điểm ngắt.

Khi bạn thêm điểm ngắt, bạn có thể thấy trongĐiểm ngắtbảng điều khiển đóform.jsTrực tuyến7có điểm ngắt. Bạn có thể thấy tất cả các điểm ngắt của mình ở đó và tạm thời vô hiệu hóa chúng.

Ngoài ra còn có các loại điểm ngắt khác:

  • XHR / tìm nạp các điểm ngắt: được kích hoạt khi bất kỳ yêu cầu mạng nào được gửi đi
  • Điểm ngắt DOM: được kích hoạt khi phần tử DOM thay đổi
  • Điểm ngắt của trình xử lý sự kiện: được kích hoạt khi một số sự kiện xảy ra, chẳng hạn như một cú nhấp chuột

Breakpoints

Phạm vi

Trong ví dụ này, tôi đặt một điểm ngắt bên trong trình xử lý sự kiện, vì vậy tôi phải gửi một biểu mẫu để kích hoạt nó:

Triggered breakpoint

Bây giờ tất cả các biến trong phạm vi được in, với các giá trị tương ứng của chúng. Bạn có thể chỉnh sửa các biến đó bằng cách nhấp đúp vào chúng.

Xem các biến và biểu thức

Quyền đối vớiPhạm vibảng điều khiển cóĐồng hồ đeo taybảng điều khiển.

Nó có một+mà bạn có thể sử dụng để thêm bất kỳ biểu thức nào. Ví dụ thêmnamesẽ innamegiá trị biến, trong ví dụFlavio. Bạn có thể thêmname.toUpperCase()và nó sẽ inFLAVIO:

Watch expressions

Tiếp tục thực hiện

Bây giờ tất cả các tập lệnh đều bị tạm dừng kể từ khi điểm ngắt dừng thực thi.

Có một tập hợp các nút phía trên biểu ngữ "Bị tạm dừng trên điểm ngắt" cho phép bạn thay đổi trạng thái này.

Đầu tiên là màu xanh lam. Nhấp vào nó sẽ tiếp tục thực thi tập lệnh bình thường.

Nút thứ hai làbước quavà nó tiếp tục thực thi cho đến dòng tiếp theo và dừng lại.

Nút tiếp theo thực hiện mộtbước vàohoạt động: đi vào hàm đang được thực thi, cho phép bạn đi vào chi tiết của nó.

Bước ra khỏilà ngược lại: quay trở lại hàm bên ngoài gọi hàm này.

Đó là những cách chính để kiểm soát luồng trong quá trình gỡ lỗi.

Chỉnh sửa tập lệnh

Từ màn hình devtools này, bạn có thể chỉnh sửa bất kỳ tập lệnh nào, cũng như trong khi tập lệnh bị tạm dừng thực thi. Chỉ cần chỉnh sửa tệp và nhấn cmd-S trên Mac hoặc ctrl-S trên Windows / Linux.

Tất nhiên các thay đổi sẽ không được lưu giữ trên đĩa trừ khi bạn đang làm việc cục bộ và thiết lập không gian làm việc trong devtools, một chủ đề nâng cao hơn.

Kiểm tra ngăn xếp cuộc gọi

Cáccuộc gọi chồngthật tuyệt khi biết bạn hiểu sâu về mã JavaScript có bao nhiêu cấp hàm. Nó cũng cho phép bạn di chuyển lên trong ngăn xếp bằng cách nhấp vào từng tên hàm:

Call stack

Tập lệnh hộp đen

Thông thường, đôi khi bạn làm việc với các thư viện mà bạn không muốn “bước vào”, bạn tin tưởng chúng và bạn không muốn thấy mã của chúng trong ngăn xếp cuộc gọi chẳng hạn. Giống như trong trường hợp trên chovalidator.min.js, mà tôi sử dụng để xác thực email.

Tôi tin rằng nó hoạt động tốt, vì vậy tôi có thể nhấp chuột phải vào nó trong ngăn xếp cuộc gọi và nhấnTập lệnh hộp đen. Từ đó trở đi, không thể bước vào mã tập lệnh này và bạn vui vẻ làm việc chỉ trên mã ứng dụng của riêng mình.

Sử dụng devtools của trình duyệt để gỡ lỗi Node.js

Vì Node.js được xây dựng trên cùng một công cụ của Chrome,v8, bạn có thể liên kết 2 và sử dụng Công cụ dành cho nhà phát triển của Chrome để kiểm tra việc thực thi các ứng dụng Node.js.

Mở của bạnthiết bị đầu cuốivà chạy

node --inspect

node-inspect

Sau đó, trong Chrome, nhập URL này:about://inspect.

node-link-browser

Nhấp vào liên kết Mở DevTools dành riêng cho Node bên cạnh Node đích và bạn sẽ có quyền truy cập vào Node.js trong trình duyệt DevTools:

node-console

Đảm bảo rằng bạn nhấp vào đó chứ không phải liên kết kiểm tra bên dưới, vì công cụ này sẽ tự động kết nối lại với phiên bản Node.js khi chúng tôi khởi động lại nó - khá tiện dụng!

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: