Chrome developer tools do not show all JavaScript files any more

Question

Not all JavaScript files are visible in Chorme Developer tools any more.

Google Chrome is up to date. Version 44.0.2403.130 m Debug version of the app. Scripts in the head.

<script src="/Scripts/jquery-ui-1.8.24.js"></script>
<script src="/Scripts/jquery.validate.js"></script>

...

<script src="/Client/Statics/GuiContainers.js"></script>
<script src="/Client/ClientDAL.js"></script>
<script src="/Client/ClientLayoutUpdater.js"></script>
<script src="/Client/ClientRenderer.js"></script>
<script src="/Client/ControllerLocator.js"></script>

First part of the scripts is visible in Chrome Developer Tools under Sources menu on localhost/Scripts/* path. Second part of the scripts is not visible since yesterday. What is the matter with the Developer Tools?

There are no errors in JavaScript console. I can see successful requests for JavaScript files in network tab. All JavaScript is loaded. Application works fine.

What is the matter with the Developer Tools? Does anyone have an idea?

If I add localhost "folder" to the workspace, everything is visible, even server side source files.

Use the network tab in developer tools and refresh the page to determine if the js file was actually loaded when the page loads. — Seano666, Aug 06 '15 at 17:43
@Seano666 I did that. Question explanation is clarified as result of your comment. Thx. — Fosna, Aug 07 '15 at 07:03
put a console.log in a source file, refresh the page, you will get the console.log and you can click on source from console. — SilentTremor, Aug 07 '15 at 07:05
If no console log present it means your source files are not loaded from where you expect to be. — SilentTremor, Aug 07 '15 at 07:07
@SilentTremor Great idea. Thx. File name next to the message from console.log() parameter is VM254 DdiClientMain.js:17. I wonder what this means? — Fosna, Aug 07 '15 at 10:13
VM is a code for script loaded with eval or other cases, annyhow is loaded in page via javascript. — SilentTremor, Aug 07 '15 at 10:46
But missing scripts are not loaded via eval. They are referenced from html head, just like other scripts that do appear in sources menu. — Fosna, Aug 07 '15 at 17:19
@Seano666 Two years later & still the same problem. Thanks for the solution — Mawg says reinstate Monica, Aug 31 '17 at 12:54

score 144 · Answer 1 · answered Aug 08 '16 at 13:29

144

Opened the network tab in developer tools and pressed F5 to refresh - thanks @Seano666 for your comment on the question

answered Aug 08 '16 at 13:29

abiNerd

1,976
1
18
22

10

this worked for me also. opening the network tab during reload seems to affect the bug – CodeToad Sep 21 '16 at 14:04
Pro tip: You can sort all of what has loaded on a page by sorting by 'Type', that way all the scripts are listed together – Novastorm Jan 26 '17 at 16:45
Opening the Devtools works fine for me. No need to open Network Tab. – Surjith S M Apr 19 '17 at 13:56
Wow this worked. How did you even figure out this solution? :P – Gokul N K Jun 06 '19 at 09:04
This bug still exists on Version 77.0.3865.90 (Official Build) (64-bit) – Markus Zeller Oct 10 '19 at 09:35
This option showed it in the Network tab, but I can't set a breakpoint here, so it really doesn't help. I need to see the file in the Sources tab where I can set a break. – inliner49er Aug 27 '21 at 15:34
Just ran into this bug after upgrading to Chrome 95 on Win10, so it's still not fixed. @inliner49er after switching to the Network tab and refreshing, you should be able to hit `ctrl-P` and search for any loaded file in the open file menu. – jdunning Oct 23 '21 at 22:45
Did not work for me. What did the trick was "Restore defaults and reload" button in devtools settings. – Arjun Mudhaliyar Mar 13 '23 at 14:22
Hitting F5 while on the network tab worked for me. Thanks! – BrianK Jun 26 '23 at 00:36

score 67 · Answer 2 · answered Sep 28 '16 at 19:46

67

For me I just had to open the Developer Tools settings and click on the "Restore defaults and reload" button in the first tab.

Then all my local scripts showed up again and debugging was back to normal.

answered Sep 28 '16 at 19:46

Brendan

1,033
10
12

0x777 · Answer 3 · 2018-07-18T22:58:57.507

31

Add the debugger; instruction at any part of your script, the debugger will stop at this point and show you the script, even if the script is dynamically loaded.

                onSuccess: function (result) {
                    debugger;
                    combo.empty();
                    $(result).each(function () {
                        var option;

                        option = document.createElement('option');
                        option.value = this.Id;

                        $(option).appendTo(combo);
                    });
                }

edited Jul 18 '18 at 22:58

answered Oct 13 '17 at 16:31

0x777

825
8
14

3

This worked perfectly for a script that was loaded via an AJAX call that would refuse to show in the sources panel. Since Chrome was running it in a VM file of some sort, putting the `debugger;` line forced Chrome to open the VM file. – James Haug Apr 10 '18 at 02:33
@JamesHaug indeed, this is the only way I could debug dynamically loaded scripts, either they were loaded via a framework or injected – 0x777 Jul 18 '18 at 23:01
This worked for me, but it still doesn't show if I don't have the 'debugger' in there. – Steve Smith Nov 12 '20 at 03:15
thought this worked, but then it stopped working and was even showing old JS when it clearly was running new JS. F1 and then the reset button at the bottom of the settings menu seemed to work more reliably (though I have had to do it a few times) – nmz787 Mar 15 '22 at 08:34

score 12 · Answer 4 · answered Sep 19 '16 at 16:16

12

Try right click on reload button in developer tools.
You'll get a menu from which you can choose: Empty Cache & Hard Reload.
That worked for me.

answered Sep 19 '16 at 16:16

Southern Fire

151
1
3

1

This works for me as well. Also, even before refreshing, I can find the missing script under the 'Application' tab. – knopch1425 Jul 13 '17 at 07:28

score 8 · Answer 5 · answered Jun 08 '19 at 22:57

Problem: I had been developing/debugging for some time, and then I encountered a similar issue. Even though my console logs showed line numbers, when I clicked them, I was taken to line 1 of a blank page. My scripts were embedded in the html, so I could see them in the Elements tab, but when I opened the file in the Sources tab, it was just blank.

Solution: The fix for me was to copy the url address and paste it into a new tab and reopen dev tools. The original tab had gotten into a bad state somehow.

Indeed. I had exactly the same issue. Restarted Chrome which fixed the issue. — Rustem Zinnatullin, Nov 04 '19 at 11:22

score 5 · Answer 6 · answered Jul 17 '16 at 16:45

5

I had the same issue and "Empty cache and hard reload" worked for me.

answered Jul 17 '16 at 16:45

koshy6252

75
1
6

score 4 · Answer 7 · answered Apr 19 '19 at 09:10

I have experienced the same issue with a folder not being loaded and I resolved it in the following way:

In Sources mode, click the blue-highlighted button:
Select Open file.
Type the name of the wanted file in the search input box.
Select the file from the result list.

score 1 · Answer 8 · answered Feb 03 '16 at 09:10

The issue is due to network mapping and unmapping. There is some weird bug in chrome dev tools which causes these kind of issues. Some times you might even see, old css files in the side bar and when you open the css file from the left side bar. it would be just blank or even worse, wont even be visible.

Even i have tried all the options. restarting, removing all chache, mapping unmapping. incognito mode. But in the end had to reinstall to make this fix.

So go ahead do a fresh chrome install. everything should be Fine.

score 1 · Answer 9 · answered Dec 31 '17 at 07:58

1

The reason is your script file is not loaded yet, refresh page with f5 and you will see scripts listed in sources. This happend when you put your script tag in bottom of tag.

answered Dec 31 '17 at 07:58

akaMahesh

383
2
9

score 1 · Answer 10 · answered Jun 29 '18 at 13:21

In my case it was the Chrome cache issue. Refreshing did not work for me. After mapping the file below fixed my issue

1- Open the file on browser e.g. http://example.com/script.js

2- Add a version e.g. http://example.com/script.js?v=2

This clears the cache and the file start showing up as editable.

score 1 · Answer 11 · answered Nov 28 '18 at 02:01

1

I had the same issue and tried mentioned answers, but it turned that Google Chrome updated silently and it needs to be relaunched then everything works well.

Enter chrome://settings/help in your chrome URL and check if it needs relaunching.

answered Nov 28 '18 at 02:01

Shiko

2,448
1
24
31

score 1 · Answer 12 · answered May 07 '20 at 06:11

1

If you are debugging in chrome, Add the debugger; statement before and after in the javascript where you want to browser to stop for debugging

answered May 07 '20 at 06:11

Gopal Sinha

111
1
5

score 1 · Answer 13 · answered Feb 16 '22 at 06:43

1

Hit F12, then F1 and at the bottom of the page is a button that will just reset the dev tools. Worked for me. The application didn't showed the UI well, and the UI was bouncing.

answered Feb 16 '22 at 06:43

Igal Krigel

21
1

1

Please make sure to restart the Chrome again. Hope this helps. – Waleed Nasir Feb 16 '22 at 09:12

score 0 · Answer 14 · answered Jun 21 '16 at 14:51

0

I have experienced the same problem, all I did was delete all Temp files in the local AppData, under your profile name e.g C:\Users\userprofile\AppData\Local\Temp

answered Jun 21 '16 at 14:51

Steward Bopape

1
1

score 0 · Answer 15 · answered Aug 30 '16 at 16:29

For me also was a 'mapping and unmapping' issue. I removed all the mappings, but the folders under the web site weren't visible.

The solution for me was: in the settings of the dev tools go to the "Workspace" tab. There were still some mapping. I removed all. After a reload was okay.

score 0 · Answer 16 · answered Jun 27 '20 at 17:22

I faced this issue, due to spelling mistake inside javascript script tag.

<script type="text/javsscript" src="./../js/lib/darkmodejs.min.js"></script>

issue were spelling mistake inside attribute type, which then I changed to:

<script type="text/javascript" src="./../js/lib/darkmodejs.min.js"></script>

and it worked smoothly for me, sometime the issue is very minor but effects are bigger.

score 0 · Answer 17 · answered Nov 13 '20 at 15:56

In my case, the issue was that the JavaScript files that I had were taking a lot longer to load (about 5 minutes) so it gave me the impression that they were not getting loaded at all. I've seen this happen when I load the local project after a long time. Once they are loaded they stay in memory even after I refresh the page.

score 0 · Answer 18 · edited Aug 28 '23 at 22:29

0

That's how it worked for me:

Steps:

" Ctrl+Shift+C " opens your inspect in your browser.
Open file.
Choose the correct directory.
Allow the browser to access this directory.

Please double check that you have your files linked correctly with the HTML file as well, or if your running script is inside the HTML.

edited Aug 28 '23 at 22:29

Yunnosch

26,130
9
42
54

answered Aug 28 '23 at 21:31

user17894681

1
1

https://stackoverflow.com/editing-help – Yunnosch Aug 28 '23 at 22:30

score -1 · Answer 19 · answered Nov 26 '21 at 21:26

-1

So I had the same issue, but my resolution was because I had <script> src="script.js"</script> instead of <script src="script.js">. Once I fixed this, the file loaded correctly.

answered Nov 26 '21 at 21:26

J_W

51
4

score -3 · Accepted Answer · answered Sep 14 '15 at 13:54

-3

I have reinstalled Chrome with removing Chrome profile data. It works now.

answered Sep 14 '15 at 13:54

Fosna

2,050
3
22
23

1

Is there any where to selectively delete the profile data for chrome dev tools ? Don't want to loose the full history and bookmarks and so on. – Alex May 30 '16 at 07:17
4

I stumbled across this answer and you can selectively reset the dev tools settings without deleting the entire Chrome profile. Hit F12, then F1 and at the bottom of the page is a button that will just reset the dev tools. – Michael Thessel Jul 20 '16 at 19:33
Thanks a bunch Michael Tessel - my chrome dev for obscure reasons started to only show my less files (which makes debugging quite difficult). I reset the devtool settings, and everything worked again! :-) – hasse May 23 '17 at 09:13

Chrome developer tools do not show all JavaScript files any more

20 Answers20

Linked