vuex/docs/en/debug.md

Debug Mode

To enable debug mode, simply pass in debug: true when creating the Vuex instance:

const vuex = new Vuex({
  state,
  actions,
  mutations,
  debug: true
})

In debug mode, two features are enabled:

1. Every mutation dispatched will be logged in the console, along with a snapshot of the state before that mutation, and a snapshot of the state after that mutation.

2. Whenever Vuex state is mutated outside of mutation handlers, an error will be thrown. This ensures that all state mutations can be explicitly tracked by debugging tools.

Debug vs. Production

Do not use debug mode in production! Debug mode takes a snapshot of the entire state tree for each mutation, and runs a deep watch on the state tree for detecting inappropriate mutations - make sure to turn off debug mode in production to avoid the performance cost.

When using Webpack or Browserify, we can let our build tools handle that for us:

const vuex = new Vuex({
  // ...
  debug: process.env.NODE_ENV !== 'production'
})

In Webpack/Browserify, this will result in debug mode being on by default. Then, use the build setup described here to convert the value to false when building for production.

Configuring the Logger

You can pass in the debugOptions option to configure the logger:

const vuex = new Vuex({
  // ...
  debug: true,
  debugOptions: {
    collapsed: false, // auto-expand logged mutations
    transformer (state) {
      // transform the state before logging it.
      // for example return only a specific sub-tree
      return state.subTree
    },
    mutationTransformer (mutation) {
      // mutations are logged in the format of { type, payload }
      // we can format it anyway we want.
      return mutation.type
    }
  }
})