Công cụ dành cho nhà phát triển Vue.js

Vue có một bảng điều khiển tuyệt vời tích hợp vào Công cụ dành cho nhà phát triển trình duyệt, cho phép bạn kiểm tra ứng dụng của mình và tương tác với nó, để dễ dàng gỡ lỗi và hiểu


Khi bạn lần đầu tiên thử nghiệm với Vue, nếu bạn mở Công cụ dành cho nhà phát triển trình duyệt, bạn sẽ thấy thông báo sau: “Tải xuống tiện ích mở rộng Vue Devtools để có trải nghiệm phát triển tốt hơn:https://github.com/vuejs/vue-devtools

Hint to install the Vue devtools

Đây là một lời nhắc thân thiện để cài đặtPhần mở rộng Vue Devtools. Cái gì vậy? Bất kỳ khung công tác phổ biến nào cũng có phần mở rộng devtools của riêng nó, phần mở rộng này thường thêm một bảng điều khiển mới vào các công cụ dành cho nhà phát triển trình duyệt chuyên biệt hơn nhiều so với các công cụ mà trình duyệt cung cấp theo mặc định. Trong trường hợp này, hội đồng sẽ cho phép chúng tôi kiểm tra ứng dụng Vue của chúng tôi và tương tác với nó.

Công cụ này sẽ là một trợ giúp tuyệt vời khi xây dựng ứng dụng Vue. Các công cụ dành cho nhà phát triển chỉ có thể kiểm tra ứng dụng Vue khi ứng dụng đó đang ở chế độ phát triển. Điều này đảm bảo không ai có thể sử dụng chúng để tương tác với ứng dụng sản xuất của bạn (và sẽ làm cho Vue hoạt động hiệu quả hơn vì nó không phải quan tâm đến các devtools)

Hãy cài đặt nó!

Có 3 cách để cài đặt Vue Dev Tools:

  • trên Chrome
  • trên Firefox
  • như một ứng dụng độc lập

Safari, Edge và các trình duyệt khác không được hỗ trợ với tiện ích mở rộng tùy chỉnh, nhưng sử dụng ứng dụng độc lập, bạn có thể gỡ lỗi ứng dụng Vue.js đang chạy trong bất kỳ trình duyệt nào.

Cài đặt trên Chrome

Truy cập trang này trên Cửa hàng Google Chrome:https://chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpdvà bấm vàoThêm vào Chrome.

Add to chrome

Thực hiện quá trình cài đặt:

Add extension

Biểu tượng devtools Vue.js hiển thị trên thanh công cụ. Nếu trang không có phiên bản Vue.js đang chạy, nó sẽ chuyển sang màu xám.

Vue DevTools installed

Nếu Vue.js được phát hiện, biểu tượng có màu biểu trưng Vue.

Icon colored

Biểu tượng không có tác dụng gì ngoại trừ cho chúng ta thấy rằng ở đómột phiên bản Vue.js. Để sử dụng các devtools, chúng ta phải mở bảng điều khiển Công cụ dành cho nhà phát triển, sử dụng “Chế độ xem → Nhà phát triển → Công cụ dành cho nhà phát triển” hoặcCmd-Alt-i

DevTools window

Cài đặt trên Firefox

Bạn có thể tìm thấy tiện ích mở rộng của công cụ dành cho nhà phát triển Firefox trong cửa hàng tiện ích bổ sung của Mozilla:https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

Firefox addons store

Nhấp chuột "Thêm vào Firefox”Và phần mở rộng sẽ được cài đặt. Như với Chrome, biểu tượng màu xám hiển thị trên thanh công cụ

Firefox addon installed

Và khi bạn truy cập một trang web có phiên bản Vue đang chạy, nó sẽ chuyển sang màu xanh lục và khi chúng tôi mở Công cụ phát triển, chúng tôi sẽ thấy “Vue”Bảng điều khiển:

Vue devtools in Firefox

Cài đặt ứng dụng độc lập

Ngoài ra, bạn có thể sử dụng ứng dụng độc lập DevTools.

Cài đặt nó bằng cách sử dụng

npm install -g @vue/devtools

//or

yarn global add @vue/devtools

và chạy nó bằng cách gọi

vue-devtools

Thao tác này sẽ mở ứng dụng dựa trên Electron độc lập.

Standalone Vue devtools

bây giờ, hãy dán thẻ script mà nó hiển thị cho bạn:

<script src="http://localhost:8098"></script>

bên trong dự ánindex.htmlvà đợi ứng dụng được tải lại và nó sẽ tự động kết nối với ứng dụng:

Standalone Vue devtools connected

Cách sử dụng Công cụ dành cho nhà phát triển

Như đã đề cập, Vue DevTools có thể được kích hoạt bằng cách mở Công cụ dành cho nhà phát triển trong trình duyệt và chuyển đến bảng Vue.

Một tùy chọn khác là nhấp chuột phải vào bất kỳ phần tử nào trong trang và chọn “Kiểm tra thành phần Vue”:

Inspect vue component

Khi bảng điều khiển Vue DevTools mở, chúng ta có thể điều hướng cây thành phần. Khi chúng tôi chọn một thành phần từ danh sách bên trái, bảng điều khiển bên phải sẽ hiển thị các đạo cụ và dữ liệu mà nó nắm giữ:

Navigate the components tree

Trên đầu có 4 nút:

  • Các thành phần(bảng hiện tại), liệt kê tất cả các phiên bản thành phần đang chạy trong trang hiện tại. Vue có thể có nhiều phiên bản chạy cùng một lúc, chẳng hạn như nó có thể quản lý tiện ích giỏ hàng của bạn và trình chiếu, với các ứng dụng nhẹ, riêng biệt.
  • Vuexlà nơi bạn có thể kiểm tra trạng thái được quản lý thông quaVuex.
  • Sự kiệnhiển thị tất cả các sự kiện được phát ra
  • Làm tươitải lại bảng điều khiển devtools

Chú ý nhỏ= $vm0văn bản bên cạnh một thành phần? Đó là một cách tiện dụng để kiểm tra một thành phần bằng Bảng điều khiển. Nhấn phím “esc” sẽ hiển thị bảng điều khiển ở cuối devtools và bạn có thể nhập$vm0để truy cập thành phần Vue:

Component Console Shortcut

Điều này rất thú vị để kiểm tra và tương tác với các thành phần mà không cần phải gán chúng cho một biến toàn cục trong mã.

Lọc thành phần

Bắt đầu nhập tên thành phần và cây thành phần sẽ lọc ra những thành phần không khớp.

Filter components

Chọn thành phần trong trang

Nhấn vào

Select component in the page

và bạn có thể di chuột vào bất kỳ thành phần nào trong trang, nhấp vào nó và nó sẽ được mở trong devtools.

Định dạng tên các thành phần

Bạn có thể chọn hiển thị các thành phần trong camelCase hoặc sử dụng dấu gạch ngang.

Lọc dữ liệu đã kiểm tra

Trên bảng bên phải, bạn có thể nhập bất kỳ từ nào để lọc các thuộc tính không khớp với từ đó.

Kiểm tra DOM

Nhấp vào nút Kiểm tra DOM để được đưa đến trình kiểm tra Phần tử DevTools, với phần tử DOM được tạo bởi thành phần:

Inspect DOM

Mở trong trình chỉnh sửa

Bất kỳ thành phần người dùng nào (không phải các thành phần cấp khung) đều có nút mở nó trong trình soạn thảo mặc định của bạn. Rất tiện dụng.

Tải xuống miễn phí của tôiSổ tay Vue


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