How to debug in chrome console?

[joaopaulofilho]

Try this

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=pt-BR

Works with vuex too.

[eliashdezr]

@joaopaulofilho

Does that allow to use breakpoints in the javascript source? I don’t see it.

[joaopaulofilho]

I didn’t ever used break points. Don’t know how…

[Martin]

In the sources tab you can open the webpack generated files and set breakpoints by clicking on
the line numbers.

https://developer.chrome.com/devtools

[eliashdezr]

Breakpoints never get hit

[Jon]

@eliashdezr

Try adding the command “debugger” in your source code where you’d like a break point to occur. That oughta stop it in its tracks! (A kludge, but maybe better than nothing.)

Like you, I’m also having major problems debugging in Chrome (and FireFox) since moving to Vue 2/Quasar 0.8+/Webpack 2 (<— One of those is the culprit!)

Under V1, I used to be able to click on the error message in console and link straight to the mapped (i.e. readable) source-code, and step through it. Now, unless the error occurs during the build or I manually insert “debugger” into the source code, I’m usually taken to the Vue internal function that “rehtydrates” the component into JS. Have tinkered & looked for a solution for ever with no luck, so if you find it please let us know!!

Also, I had some partial success by selecting “Break on uncaught expection” from Chrome debugger, although it only seems to work sporadically. sigh

[Martin]

@eliashdezr
You are not the only one…
https://github.com/webpack/webpack/issues/2145

Every now and then, my breakpoints are also skipped. Thankfully still workable for me.
OSX 10.11.6, Chrome 54.0.2840.98 (64-bit)

[eliashdezr]

Thanks for the reply guys.

I guess I’ll do the old fashion way (console.logs) or using the debugger command.

[Greg]

If it could help,

For well debuging in chrome or visual studio code on mac osx,
I have to replace devtool param in webpack.dev.conf.js
#cheap-module-eval-source-map by #eval-source-map

Like this :
module.exports = merge(baseWebpackConfig, {
// eval-source-map is faster for development
devtool: ‘#eval-source-map’, // ‘#cheap-module-eval-source-map’,
…
}

Hope

[flachica]

Well I have to use the method that says jon, that is, write ‘debugger’ to stop in the breakpoing. Is there any way to do it without having to modify the code? I see that they fixed the bug in webpack but it still does not work even if I’m changing devtools

[Hawkeye64]

Debugging in Chrome always seems to be off a few lines which makes it difficult. I suspect webpack with maps is slightly off for some reason.

[harishashim]

Just registered to say +1 . Will follow this thread and give feedback if I ever found a solution.

Sharing some not so relevant link:

https://developers.google.com/web/tools/chrome-devtools/javascript/

[stefan8888]

For anyone wondering how to debug Node.js (i.e. SSR mode) during development (i.e. quasar dev), the solution is quite cool and can be found here:

https://stackoverflow.com/questions/11611162/how-to-debug-node-js-app-with-breakpoints-and-everything