Chrome developer tools sources not showing javascript files correctly

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:

enter image description here

Can you include a screenshot, please?

Larz
– Larz

2014-11-20 12:55:28 +00:00
Commented Nov 20, 2014 at 12:55 — Larz
– Larz, Commented Nov 20, 2014 at 12:55
@larz, i have update original post with screenshot.

StackTrace
– StackTrace

2014-11-20 13:03:03 +00:00
Commented Nov 20, 2014 at 13:03 — StackTrace
– StackTrace, Commented Nov 20, 2014 at 13:03

Larz · Accepted Answer · 2016-03-01 16:43:17Z

4

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.

edited Mar 1, 2016 at 16:43

answered Nov 20, 2014 at 13:21

Larz

1,1861 gold badge8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

StackTrace Over a year ago

thanks, that was it. i'm inheriting this project from previous dev and yes indeed the javascript files were compressed.

prime Over a year ago

How to check those files are compressed or not ?

Larz Over a year ago

@prime "jslib.axd?=jquery-.7.2.min.js,query.validate.min.js,MyRegion.js,MyCountry.js,MyCategory.js" -----> This is a concatenated list of JavaScript file names. It's not uncommon to see this as a result when using a compression tool.

Mathieu Labrie Parent · Accepted Answer · 2014-11-20 13:00:58Z

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.

answered Nov 20, 2014 at 13:00

Mathieu Labrie Parent

2,6061 gold badge12 silver badges10 bronze badges

1 Comment

Larz Over a year ago

"Firebug in firefox is great" --> This is an opinion - not an answer to the question

Mayank Jindal · Accepted Answer · 2014-11-20 13:08:20Z

-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

answered Nov 20, 2014 at 13:08

Mayank Jindal

253 bronze badges

Collectives™ on Stack Overflow

Chrome developer tools sources not showing javascript files correctly

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related