Vue DevTools in Chrome: Vue is detected but no data is shown

I'm new to Vue and I want to try out the DevTools. I created a brand new app using vue cli (no additional code), the app is Vue v2 and my chrome plugin is v6.0.0 beta 3.

vue create my-app

When running the app in dev mode, the chrome toolbar devtools 'V' shows green and indicates that Vue is detected. I hit F12 and I see the Vue tab in the developer console BUT it is empty, the App dropdown shows 'No App' and there is nothing in the list, the Components dropdown is also empty.

I noticed this in the console after I click the Vue tab in dev console:

[HMR] Waiting for update signal from WDS...
DevTools failed to load SourceMap: Could not load content for chrome-   extension://ljjemllljcmogpfapbkkighbhhppjdbg/build/queue.js.map: HTTP error: status code 404,    net::ERR_UNKNOWN_URL_SCHEME
Enabling backend for Vue 2
connect
connect done
Uncaught (in promise) TypeError: Cannot set property '__VUE_DEVTOOLS_UID__' of null
at registerAppJob (backend.js:1414)
App with id 0 not found
Uncaught (in promise) TypeError: Cannot read property 'id' of null

Is there something else I need to config to enable the Vue DevTools?

Solution

This is most probably an issue in v6 of DevTools - it is still in beta. Revert to v5 and it will work fine. You can try to file an issue on Github so they can fix the bug.