Sử dụng Vue.js Devtools
Ứng dụng Vue là một niềm vui để viết và thường khá dễ gỡ lỗi. Nhưng bạn có biết điều gì sẽ làm cho việc gỡ lỗi tốt hơn không? Một cách chuyên dụng để kết nối vào các ứng dụng Vue và thao tác chúng từ các devtools của trình duyệt của bạn. Gì? Một điều như vậy đã tồn tại? Oh. Vậy thì. Tôi cho rằng ta sẽ phải viết về nó ngay bây giờ, phải không.
Vue có một tiện ích mở rộng Chrome (và Firefox, đại loại) chất lượng cho phép kiểm tra cây thành phần, xem xét các sự kiện và gỡ lỗi du hành thời gian của các trạng thái Vuex. Các tính năng này làm cho việc gỡ lỗi trở nên đơn giản một cách kỳ lạ, ngay cả đối với các ứng dụng khá lớn.
Cài đặt
Đối với Chrome: Có thể cài đặt Vue devtools từCửa hàng Chrome trực tuyến .
Đối với Safari: Một giải pháp được mô tả để cài đặt tiện ích mở rộng trong Safari trên Vue Devtools Wiki .
Cây thành phần
Các devtools cung cấp tổng quan cây kiểu DOM về tất cả các thành phần trong ứng dụng của bạn, với thông tin về dữ liệu, thuộc tính, thuộc tính được tính toán và liên kết vuex của từng thành phần trong ngăn chi tiết.
Gỡ lỗi du hành thời gian
Tính năng hữu ích nhất của các devtools là gỡ lỗi du hành thời gian cho các ứng dụng sử dụng Vuex. Nó cho phép bạn quan sát, hoàn nguyên và làm phẳng cửa hàng Vuex của bạn theo thời gian. Bạn có thể sử dụng điều này để hoàn nguyên về trạng thái trước đó, phát lại các sự kiện để có cái nhìn thứ hai về lỗi hoặc kiểm tra các bộ phận chuyển động khác nhau giúp cho cửa hàng Vuex hoạt động trong ngăn chi tiết.
Nhật ký sự kiện
Ngăn Sự kiện cung cấp quyền truy cập vào tất cả các sự kiện do các thành phần trong ứng dụng phát ra cùng với tên, nguồn và trọng tải của chúng.
Tận hưởng sức mạnh gỡ lỗi mới tìm thấy của bạn! (Trừ khi bạn đã biết về nó, trong trường hợp đó… thì… Xin lỗi vì đã thất vọng.)
Các tin liên quan
