Chrome developer tools sources don't render javascript files correctly
I am very new to JavaScript, jQuery and JSON browser debugging. But I know that the Sources tab in the chrome dev tools will allow me to view my JavaScript files in a browser so I can set and manage my breakpoints and debug my code efficiently.
However, when I press Ctrl + Shift + I to open the chrome dev tools, I cannot see the list of my javascript files in the Sources tab.
I'm just in shape ...
jslib.axd?=jquery-.7.2.min.js,query.validate.min.js,MyRegion.js,MyCountry.js,MyCategory.js
... which looks like a concatenated list of all my javascript files. But what I was expecting to see is a list of each of my javascript files.
Screenshot:
source to share
It looks like you used a compression tool to combine all your javascript files. What you see is not a bug in Chrome - all your script files are merged into one.
If you are still developing, just disable the tool you are using to compress them (at least until you are done with your developer). This will allow your scripts to load separately on the page.
Then you can use hrome dev tools to list all files.
source to share
If you want to set a breakpoint. Use the "debugger" in your code like this:
//code here
debugger;
I never use Chrome for javascript debugging, but I'm sure you can do it easily. Firebug in firefox is different and you can also debug Visual Studio if you are using IE with a "debugger".
Hope for this help.
source to share
If you are using chrome / firefox just press f12 it will open web development tool
go to source / script section and select js file where you want to add breakpoint
just click on that line to add a breakpoint without running the function it will come to the breakpoint and then you can debug via F10 for a single line and move for the next breakpoint press F8
source to share