Comment utiliser les outils de débogage DevTools dans Vue

Cet article présente principalement l'utilisation des outils de débogage de Vue DevTools. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

En raison des exigences de travail, j'utilise actuellement principalement la pile technologique Vue.js pour le développement. L'outil de débogage de Vue DevTools sera utilisé ici. se pose Ici, lors de l'utilisation de Vue DevTools pour le débogage, il ne peut souvent pas être utilisé, ce qui indique que Vue n'est pas détectée, ce qui réduit instantanément l'efficacité du travail.

Installation :

1. Télécharger depuis github :

git clone https://github.com/vuejs/vue-devtools

2. Installez les packages dépendants dans le répertoire

cd vue-devtools

cnpm install

Correction de Vue DevTools

Bon, entrons dans le vif du sujet. Parlons de la méthode de correction.

Téléchargez d'abord Vue DevTools depuis le site officiel (https://github.com/vuejs/vue-devtools).

Étape clé 1. Modifiez persistent

pour trouver le fichier vue-devtools/shells/chrome/manifest.json et modifiez persistent en true.

Après l'avoir enregistré, compilez-le :

Étape clé 2. Cochez 允许访问文件网址

Vue DevTools a été écrit à l'étape précédente et l'étape suivante consiste à installer cette extension.

Ouvrez Chrome et saisissez chrome://extensions/ dans la barre d'adresse pour saisir directement l'extension Chrome.

Cochez en haut 开发者模式, puis cliquez sur "Charger l'extension décompressée...", le chemin est : vue-devtools-master/shells/chrome

Vérifiez 允许访问文件网址

Étape clé 3. Ajoutez Vue.config.devtools

Vue.config.devtools = true; //这步很重要
new Vue({
 el: '#app',
 data: {
  a: 123,
 }
});

au fichier Vue et c'est fait !

Effet

Téléchargez la version corrigée de Vue DevTools Télécharger : vueDevTools (version corrigée contrôlable).zip

Ce qui précède est ce que j'ai compilé Pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter l'encapsulation secondaire axios dans vue

Comment utiliser les composants audio dans les mini-programmes WeChat

Comment utiliser le composant vidéo pour lire des vidéos dans le mini programme WeChat

Comment implémenter la barre de progression de téléchargement dans le mini programme WeChat

Comment utiliser l'outil de vérification du numéro de téléphone mobile PhoneUtils en javaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!