[Vue] vue-devtools of family bucket

overview

Vue Devtools is a debugging browser plug-in officially released by Vue. It can be installed on browsers such as Chrome and Firefox, and is directly embedded in the developer tools for a smooth user experience. Vue Devtools was developed by Vue.js core team members Guillaume Chau and Evan You.

Install

(1) Download devtools source code on github, address: https://github.com/vuejs/vue-devtools

(2) After downloading, enter the vue-devtools project, execute npm install, and then npm run build.

(3) Enter the node_modules file under this file, find the vue-devtools file, and modify the manifest.json under the vendor file to true.

(4) Open the settings in the upper right corner of the browser –> more tools –> extensions, open the developer mode

(5) Then drag the chrome folder under the shells just compiled into the browser.

use

Devtools are only available when Vue.config.devtools === true.

components

In the components panel, you can see a series of components we defined. After selecting the corresponding component, you can see the data, props, computed, and attrs attributes in the component on the right panel.

At the same time, the data attribute can be edited, and the page will change in real time after editing. After selecting

Select, you can select the components in the page in real time, and quickly locate the corresponding component in the debugging panel.

Right mouse button -> Inspect Vue component, you can also quickly locate the component. Components can be filtered according to component names,

and data can also be filtered.

Clicking Inspect Dom can directly locate DOM elements in the Elements panel.

Each component instance has a variable. The currently selected component is $vm0,\; the\; other\; components\; are\; assigned\; in\; ascending\; order\; from\; top\; to\; bottom($ vm1,$vm2、$ vm3…), the console can directly print $vm0 to see this instance directly.

Vuex

The Vuex panel can record every mutation. Click the corresponding mutation record on the right to see the detailed information submitted by the mutation, and the status of the state at this time.

At the same time, you can filter mutations and states.

When you slide the mouse over the mutation record, commit, revert, and Time Travel will appear. commit: save the specified mutation, and the Base State at the top of the mutation record will become the state of this mutation. At the same time, the mutation before this commit will be deleted. revert: Revert to the specified mutation, the current state becomes the state that knows the mutation, and the records after revert will be deleted. Time Travel: time travel, the state data is switched to the specified mutation, but all records will be saved.

The Vuex panel supports the function of exporting/importing state Export: Copy state to clipboard. Import: Support importing json data directly into vuex.

Events

The Events panel can record each event triggered by $emit, and you can see the detailed information of the event on the right, and also supports filtering.

name: event name type: event type, in order to be compatible with Vue1.x, the event is triggered by dispatch in Vue1.x. At this time, the type is dispatch to trigger the event. At this time, the type is$dispatchtriggers\; an\; event,\; at\; this\; timetypeisdispatchsource\; :the$ component that triggers the event paload: load, the parameter passed when the event is$triggered$

Routing

The Routing panel has an option: history, routes history records every routing change, but pay attention to the history here !== window.history, every routing change will be pushed to history, even if you are the route that this.$replace jumps .

The detailed information will be displayed on the right. The from and to in the panel have the same meaning as the from and to in the vue-router routing hook.

Routes shows all routes, which is basically the visual display of routes in vue-router.

Performance

performance can help us analyze the rendering of pages and components. It has two functions: Frames per second and Component render.

Frames per second(fps): How many frames per second the browser renders, that is, how many times the page is rendered per second. The higher the blue column, the higher the fps, and the smoother the page. It can also record the cause of page rendering, such as M, E, R. M: mutation E: events R: routes

Component render can record the rendering time of the component. Note that this time is cumulative. For example, if this component is rendered twice, the rendering time is the total duration of these two times. At the same time, you can also see the execution time of each life cycle hook in the component.

Settings

Normalize component name: Components panel component name display style, origin name original component name, Pascal case big hump, Kebab case middle horizontal line.

Editable props: Whether to support the props attribute to be editable, by default the props attribute in the components panel cannot be edited.

New Vuex backend: Whether to let the Vuex panel run alone in the background, faster and less memory usage.

Theme: theme. Time Format -> Display milliseconds: The time format is displayed in milliseconds, which is currently not reflected. Atuoload Vuex state: whether to automatically load vuex state, currently no effect.

source

Installation and use of vue-devtools
Vue devtools usage guide