Heim Web-Frontend js-Tutorial So verwenden Sie die DevTools-Debugging-Tools in Vue

So verwenden Sie die DevTools-Debugging-Tools in Vue

Jun 22, 2018 pm 04:54 PM
devtools vue

Dieser Artikel stellt hauptsächlich die Verwendung der Debugging-Tools von Vue DevTools vor. Folgen wir dem Editor, um einen Blick darauf zu werfen

Aufgrund der Arbeitsanforderungen verwende ich derzeit hauptsächlich den Vue.js-Technologie-Stack für die Entwicklung. Das Debugging-Tool wird hier verwendet Wenn Sie Vue DevTools zum Debuggen verwenden, kann es häufig nicht verwendet werden, was dazu führt, dass Vue nicht erkannt wird, was die Arbeitseffizienz sofort verringert.

Installation:

1. Von Github herunterladen:

1

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

Nach dem Login kopieren

2 Abhängige Pakete installieren

1

2

3

cd vue-devtools

 

cnpm install

Nach dem Login kopieren

Correct Vue DevTools

Okay, kommen wir zum Punkt.

Laden Sie zunächst Vue DevTools von der offiziellen Website herunter (https://github.com/vuejs/vue-devtools).

Schlüsselschritt 1. Ändern Sie persistent

, um die Datei vue-devtools/shells/chrome/manifest.json zu finden, und ändern Sie persistent in true.

Nach dem Speichern kompilieren Sie es:

Schlüsselschritt 2. Überprüfen Sie 允许访问文件网址

Die Vue DevTools wurden im vorherigen Schritt geschrieben und der nächste Schritt besteht darin, diese Erweiterung zu installieren.

Öffnen Sie Chrome und geben Sie chrome://extensions/ in die Adressleiste ein, um die Chrome-Erweiterung direkt einzugeben.

Überprüfen Sie oben 开发者模式 und klicken Sie dann auf „Entpackte Erweiterung laden...“. Der Pfad lautet: vue-devtools-master/shells/chrome

Überprüfen 允许访问文件网址

Schlüsselschritt 3. Vue.config.devtools

1

2

3

4

5

6

7

Vue.config.devtools = true; //这步很重要

new Vue({

 el: '#app',

 data: {

  a: 123,

 }

});

Nach dem Login kopieren

zur Vue-Datei hinzufügen und fertig!

Effekt

Laden Sie die korrigierte Version von Vue DevTools herunter. Download: vueDevTools (überwachbare korrigierte Version).zip

Das Obige ist, was ich Für alle zusammengestellt, ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die sekundäre Axios-Kapselung in Vue

So verwenden Sie Audiokomponenten in WeChat-Miniprogrammen

So verwenden Sie die Videokomponente zum Abspielen von Videos im WeChat-Miniprogramm

So implementieren Sie den Download-Fortschrittsbalken im WeChat-Miniprogramm

So verwenden Sie das Tool zur Überprüfung der Mobiltelefonnummer PhoneUtils in JavaScript

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die DevTools-Debugging-Tools in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie Echarts in Vue So verwenden Sie Echarts in Vue May 09, 2024 pm 04:24 PM

So verwenden Sie Echarts in Vue

Die Rolle des Exportstandards in Vue Die Rolle des Exportstandards in Vue May 09, 2024 pm 06:48 PM

Die Rolle des Exportstandards in Vue

So verwenden Sie die Kartenfunktion in Vue So verwenden Sie die Kartenfunktion in Vue May 09, 2024 pm 06:54 PM

So verwenden Sie die Kartenfunktion in Vue

Der Unterschied zwischen Event und $event in Vue Der Unterschied zwischen Event und $event in Vue May 08, 2024 pm 04:42 PM

Der Unterschied zwischen Event und $event in Vue

Die Rolle von Onmount in Vue Die Rolle von Onmount in Vue May 09, 2024 pm 02:51 PM

Die Rolle von Onmount in Vue

Der Unterschied zwischen Export und Exportstandard in Vue Der Unterschied zwischen Export und Exportstandard in Vue May 08, 2024 pm 05:27 PM

Der Unterschied zwischen Export und Exportstandard in Vue

Was sind Hooks in Vue Was sind Hooks in Vue May 09, 2024 pm 06:33 PM

Was sind Hooks in Vue

Für welche Szenarien können Ereignismodifikatoren in Vue verwendet werden? Für welche Szenarien können Ereignismodifikatoren in Vue verwendet werden? May 09, 2024 pm 02:33 PM

Für welche Szenarien können Ereignismodifikatoren in Vue verwendet werden?

See all articles