Add a global config to show event handlers during development

[smalllong]

What problem does this feature solve?

During development, it's hard to find out what method is used to handle events on the element using browser's DOM inspector. If it's able to see the handler's name or content during development, it will be easier for the developer to locate the handler's code.

What does the proposed API look like?

Set global config:

Vue.config.showHandlers = true;

then the handlers can be seen in the DOM inspector:

<div v-on:click='showHahaha' v-on:mouseenter='active = true'>hahaha</div>

since '@' is not valid in Element.setAttribute, I changed it to 'v-on:'

[posva]

Related answer: #2415 (comment)

Personally, I think to add this only in development would potentially create other problems that would make debugging harder. It's also necessary to keep them in sync while updating the HTML which would take quite some effort for questionable gain.

Are you aware of vue devtools? They make Vue apps debugging much easier

[smalllong]

@posva Actually, it's quite easy to add this feature, and I'm already using it during development. In function _createElement:
if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.on)) { data.attrs = data.attrs || {}; for (var i in data.on) { data.attrs['v-on:'+i] = data.on[i]._name } }
and in function bind:
boundFn._name = fn.name

[soanvig]

I see no point in implementing such a thing. Why?

1. There are dedicated devtools.
2. Because unit tests it is useless too: one should be testing if everything is executed as it should anyway.

[yyx990803]

This is not something that should be done by Vue. Chrome already gives you the ability to inspect listeners on arbitrary DOM elements.

[smalllong]

@yyx990803 However, I think the Chrome inspector's listeners shown in Vue apps are not readable.