How to force Chrome debugging tools to debug in pretty code?

Question

Although I used pretty code and had set up the breakpoints in \"Pretty code\" tab, debugger keeps working in minified code. (I can\'t see exactly where I am and need to continuo

Answer 1

Seems like you are clicking the "{ }" (pretty print) icon located in the bottom panel and setting a breakpoints there without attaching a source map of the original file.

When given a .map file, Chrome dev tools and map each line of executed minified code to the original source file using the data in the .map file. Otherwise it will just do it's best to indent/format the minified file.

I suggest you use grunt uglify or similar to minify your js which will automatically generate a map file for debugging. See the following links for more information on how to do this.

http://blog.teamtreehouse.com/introduction-source-maps

Javascript .map files - javascript source maps