Chrome开发者工具来源未正确显示javascript文件

Question

I'm very new to JavaScript, jQuery, and JSON browser debugging. But I do know that the "Sources” tab in chrome dev tools is supposed to let me look at my JavaScript files in the browser so I can set and manage my breakpoints and effectively debug my code.

However, when i press Ctrl + Shift + I to open chrome dev tools, i can't see a list of my javascript files under the Sources tab.

I only something in the form of...

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:

Answer 1

It looks like you have used a compression tool to combine all of your javascript files. What you see is not an error in Chrome - it's just all of your script files combined into one.

If you are still developing, just turn off whatever tool you are using to compress them (at least until you are finished your dev work). This will allow your scripts to load individually on the page.

Then you can use chrome dev tools to see each file listed.

Answer 2

If you want to set a break point. Use 'debugger' in your code like so :

//code here
debugger;

I never use Chrome to debug javascript but i'm sure you can do it easilly. Firebug in firefox is great and you can also debug in Visual studio if you use IE with 'debugger'.

Hope this help.

Answer 3

If you use chrome/firefox just press f12 it will open web development tool

now go to source/script section and select the js file in which you want to add a break point

just click on that line to add break point not run the function it will come to your break point and then you can debug through F10 for singe line and move for next break point press F8