This tutorial covers a way you can debug vuex without the vue devtools.

First off, let's try to understand why debugging vuex with the vue js devtools would even be necessary.

Here's the situation:

You are working on a vue js application that uses vuex for state management.

Normally, if you want to monitor your state and debug your mutations, you would just install the vue devtools. The devtools are simple, easy to use, and provide all the information you need. For most projects, using the devtools is the appropriate solution. For convenience, here's the link to the addon for chrome and firefox.

However, what do you do when you're not in a normal browser environment?

What if, for whatever reason, you can't install the dev tools? Maybe your browser doesn't support them. Maybe your company's security team won't let you install them.

I faced a similar situation recently.

I was working on application that used an embedded browser. I had access to console logs, but had no way of installing the devtools.

After some frustration, I decided to look for a solution.

I had experience with redux, and was curious if there was something similar to the redux logger.

I wanted something that could log some information about each mutation and the store's state.

It turns out that vuex has a plugin that does just this -- and even better, it's included with vuex -- no extra packages needed.

You can set up a basic logger by doing the following:

1. Import the createLogger function from 'vuex/dist/logger'

import createLogger from 'vuex/dist/logger'

2. Create an instance of a logger using the createLogger function and include it in your plugins array.

plugins: [createLogger()],

You store should look something like this:

import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'

const store = new Vuex.Store({
  plugins: [createLogger()]
  //... rest of your store setup

That's all there is to setting it up-- you now have basic logging for your vuex store.

To confirm that it works, fire up your application and commit a mutation.

When you do, you should see something like this:

The log shows the mutation name, followed a timestamp.

If you click the arrow and expand the log, you will see the mutation object, the previous state, and the new state. It should look like this:

It works! We have logging!

Just be aware that this is not something that should be enabled in production. The plugin takes a full snapshot of your state, so it might end up hindering performance.

Enjoy your logging!

If you enjoyed this content, you check out my other vue tips, tricks, and guides.

Also, if you never want to miss any awesome RemoteDevDaily content, please subscribe to my mailing list

Have an awesome day!