Using the Vue.js Devtools

Joshua Bemenderfer

Vue apps are a joy to write, and often fairly easy to debug. But do you know what would make debugging better? A dedicated way to hook into Vue apps and manipulate them from your browser’s devtools. What? Such a thing already exists? Oh. Well then. I suppose we’ll have to write about it now, won’t we.

Vue has a quality Chrome (and Firefox, sort of) extension that allows inspecting component trees, reviewing events, and time-travel debugging of Vuex states. These features make debugging ridiculously simple, even for fairly large apps.

Installation

For Chrome: The Vue devtools can be installed from the Chrome Web Store.

For Safari: A workaround is described for installing the extension in Safari on the Vue Devtools Wiki.

Component Tree

The devtools provide a DOM-style tree overview of all the components in your app, with information about each component’s data, properties, computed properties, and vuex bindings in the details pane.

Vue.js Devtools: Component tree pane.

Time-Travel Debugging

Hands down the most useful feature of the devtools is time-travel debugging for apps using Vuex. It allows you to observe, revert, and flatten your Vuex store over time. You could use this to revert to a previous state, replay events to get a second look at bugs, or inspect the various moving parts that go into making a Vuex store work in the details pane.

Vue.js Devtools: Vuex pane.

Event Log

The Event pane provides access to all events emitted by components in the app along with their names, sources, and payloads.

Vue.js Devtools: Event pane.

Enjoy your newfound debugging power! (Unless you already knew about it, in which case… well… Sorry to disappoint.)

✖ Clear

🕵 Search Results

🔎 Searching...