How to debug in chrome console?

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

No More Posting New Topics!

How to debug in chrome console?