devtools: Events are not shown in Devtools
Vue version: 2.1.10 Chrome version: 56.0.2924.87
I have an application i have been working on for a couple of months, and just recently, the Events tab in Devtools has stopped working. I can navigate to the tab, but no events are shown in it.
The events work fine, as my application is still functioning as expected, i just have a real hard time debugging it, because i cannot see the events in the Devtools.
My setup is a global Event instance, which is initialized in my bootstrap.js before the components are loaded, and the App Vue initialized.
window.Event = new Vue();
…Vue.components loaded…
const app = new Vue({ el: '#app' });
Event are $emited and $oned using Event.$emit and Event.$on.
I’m building the app using Laravel Mix, which is a wrapper for Webpack.
I’ve tried reinstalling the devtools, updating Chrome, and pretty much everything else i could think of.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 1
- Comments: 18 (2 by maintainers)
I ran in this issue, I figured out if you are using two version of vue in your application, say
vue.esm.jsandvue.jsevents won’t show on vue.devtool panelOK, culprit found.
When using Laravel Mix’ extract function, events do not show up in the developer console. Omitting the extract function, and the events show up. I’ll create an issue on the Mix repo.
Have same issue, no .extract in my config. Or I cant find it. Could you add details how to find ‘.extract’ ?
On further research it seems to have something to do with the webpack output; because replacing the webpacked Vue with the CDN one, and everything works. I’ll keep researching.