CODEWITHSUNDEEP
vue.jsdebuggingbrowser
Rtbo
Rtbo

Reputation: 230

Where can I inspect Vue.js generated render functions?

An exception breakpoint once led me to a render function generated by the Vue template compiler for one of my Vue components.

This striked me as a "Hey, I now understand how this template system works!", but I didn't pay attention to where that was in the webpack tree.

Now I'd like to inspect the code for other components and may be set a breakpoint here and there, but when I browse the active javascript sources in the browser debugger pane, I can't find any of this generated code.

Upvotes: 4

Views: 1183

Answers (1)

skirtle
skirtle

Reputation: 29132

It looks like the compiled render functions can be found in the sources tree under the . folder of webpack://. It can be a bit tricky to find the right one though because there are multiple files for each .vue file. The other files will contain other bits of the component. The file containing the render function should be pretty obvious when you find it, it should start var render = function() {. For example, in one of my test applications I can see the render function for app.vue at webpack:///./src/app.vue?91e4, though that last part will vary.

If you want to insert a breakpoint for your own component then you can sneak it in via a method. This can also be a quick way to find the right file.

Within the template, make a call to a method, I've called it breakpoint:

{{ breakpoint() }}

Then in the method:

breakpoint () {
  debugger
  return ''
}

You can then walk one level up the stack to see the compiled render function.

Of course you don't necessarily have to use a debugger statement for this. You could just set a browser breakpoint in a suitable method (or introduce one if one doesn't already exist). So long as the method is called within the template it should give you access to the compiled render function.

To set a breakpoint that way you should just need to navigate to the relevant .vue file in the webpack:// section of the sources tree. That file is usually easy to find directly under the webpack:// heading.

Update:

Once you've found the file containing the render function using a breakpoint you can then find the file in the sources tree using 'Reveal in sidebar':

Screenshot of context menu

Upvotes: 2

Related Questions