Ra mắt hai series mới cực hot Trí tuệ nhân tạo A đến ZPython công cụ không thể thiếu khi nghiên cứu Data science, Machine learning.

Vue.js Devtools công cụ debug khi viết ứng dụng

Trong bài trước chúng ta đã biết đến Vue.js là gì và cách thức gắn kết dữ liệu giữa view và model trong Vue, bài viết này sẽ tiếp tục tìm hiểu cách thức debug khi viết ứng dụng bằng Vue.js. Vue.js Devtools là một extension trong trình duyệt Chrome, giúp cho việc debug trong Vue dễ dàng hơn. Trong 5 ví dụ trước, chúng ta sử dụng bản Vue.js production đã minify do đó nó sẽ không sử dụng được cùng với Devtools, giờ chúng ta chèn lại thư viện Vue.js bản non-product

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script> -->
<script src="https://unpkg.com/vue"></script>

Sau khi thay đổi sang bản non-production, chúng ta thử vào một file ví dụ (bài viết sẽ sử dụng file 5th-example.html, xem bài thứ hai về Vue để tải file này về), khi đó mở tab Console trong Developer Tools sẽ thấy thông báo là đang ở chế độ development và nên cài Devtools từ đường dẫn https://github.com/vuejs/vue-devtools như hình dưới đây:

Thông báo chế độ development khi sử dụng Vue non-production

Cài đặt Vue.js Devtools trên Chrome

Để cài đặt extension Vue.js Devtools trên Chrome, vào extension trên Chrome Web Store, click vào Add to Chrome để cài đặt extension này. Sau khi cài đặt sẽ xuất hiện biểu tượng Vue ở góc trên bên phải trình duyệt. Tuy nhiên, lúc này khi click vào biểu tượng đó thì sẽ có thông báo Vue.js not detected do extension này chưa có quyền truy xuất file URL. Thêm quyền này bằng cách ấn vào biểu tượng 3 dấu chấm phía trên bên phải chọn More tools, sau đó chọn Extensions và tìm đến Vue.js devtools, chọn vào Allow access to file URLs.

Bật chế độ truy nhập file URL cho Vue devtools

Sau đó, bạn tắt trình duyệt đi và mở lại, chúng ta đã thấy biểu tượng Vue.js chuyển từ màu xám sang màu xanh. Như vậy chúng ta đã sẵn sàng sử dụng Vue.js devtools để debug. ## Sử dụng Vue.js Devtools

Vue.js Devtools đã được cài đặt và cấu hình xong, trong Developer tools của trình duyệt Chrome sẽ xuất hiện thêm một tab có tên là Vue.

Giao diện Vue.js devtools trong cửa sổ developer tools của Chrome

Chúng ta sẽ thấy một phần tử , khi click vào phần tử này chúng ta thấy đây chính là myModel trong ví dụ, bạn hãy xem lại code của 5th-example.html

Xem dữ liệu của model trong Vue.js devtools

<html>
<head>
    <title>Ví dụ thứ 5 về Vue.js - All Laravel</title>
</head>
<body>
    <div id="example5">
        Name: <input type="text" v-model="name">
        <button v-on:click="myClickHandler">Xin chào</button>
    </div>

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script> -->
    <script src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
        var myModel = {
            name: "Kiên Đặng",
            age: 35,
            gender: "male"
        };

        var myViewModel = new Vue({
            el: '#example5',
            data: myModel,

            // Phương thức quản lý sự kiện trong Vue
            methods: {
                myClickHandler: function(e) {
                    alert("Chào mừng " + this.name + " đến với All Laravel");
                }
            }
        });
    </script>
</body>
</html>

Tiếp theo chúng ta sửa thử dữ liệu trên view và xem kết quả dữ liệu trên model có thay đổi không.

Thay đổi dữ liệu trên view và dữ liệu này cập nhật luôn trên model

Khi thay đổi trường Name, ngay lập tức giá trị name được cập nhật từ view sang model. Tiếp theo, chúng ta thực hiện thay đổi dữ liệu trên model và xem view hiển thị như thế nào?

Thay đổi dữ liệu trên model ngay lập tức hiển thị trên view thay đổi

Ngay khi thay đổi dữ liệu của model, chúng ta thấy view thay đổi ngay với dữ liệu này. ## Gán dữ liệu hai chiều trên Vue.js

Qua công cụ Vue.js Devtools chúng ta có thể thấy rõ hơn khái niệm gán dữ liệu hai chiều trên Vue thông qua View-Model, khi dữ liệu trên View thay đổi ViewModel sẽ làm cầu nối để truyền tải dữ liệu thay đổi sang Model và ngược lại. Trên đây cũng là một ví dụ đơn giản nên khi debug không có gì cả, trong những ứng dụng phức tạp sử dụng Vue.js, công cụ debug Vue.js devtools giúp chúng ta được rất nhiều. Trong quá trình giới thiệu về Vue.js, tôi sẽ luôn sử dụng công cụ debug này để tiếp cận trực quan hơn. Hẹn gặp bạn ở các bài viết tiếp theo.


CÁC BÀI VIẾT KHÁC

FirebirD

Đam mê Toán học, Lập trình. Sở thích chia sẻ kiến thức, Phim hài, Bóng đá, Cà phê sáng với bạn bè.

Laravel Collection làm việc với tập dữ liệu lớn

Vue.js component xây dựng ứng dụng theo cách module hóa

2 Bình luận trong "Vue.js Devtools công cụ debug khi viết ứng dụng"

  1. The Boss

    2 years ago

    Phản hồi
    Mình thắc mắc lúc dev thì nó rất tốt nhưng khi deploy thì tool này khá nguy hiểm cho ứng dụng. Có cách nào disable trên env product k nhỉ.+
    1. FirebirD

      2 years ago

      Phản hồi
      Vue.js có hai phiên bản là development và production, Vue devtools chỉ sử dụng được với phiên bản development thôi, do đó trên môi trường product bạn sử dụng phiên bản production là được. https://vuejs.org/v2/guide/installation.html

Thêm bình luận