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.

Solution 1

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

Solution 2

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

Solution 3

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.

Solution 4

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);
                    });
                }

Solution 5

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.

View more solutions

Comments

[Alex]

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.

[Michael Thessel]

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.

[CodeToad]

this worked for me also. opening the network tab during reload seems to affect the bug

[Novastorm]

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

[Surjith S M]

Opening the Devtools works fine for me. No need to open Network Tab.

[hasse]

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! :-)

[knopch1425]

This works for me as well. Also, even before refreshing, I can find the missing script under the 'Application' tab.

[James Haug]

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.

[0x777]

@JamesHaug indeed, this is the only way I could debug dynamically loaded scripts, either they were loaded via a framework or injected

[Gokul N K]

Wow this worked. How did you even figure out this solution? :P

[Markus Zeller]

This bug still exists on Version 77.0.3865.90 (Official Build) (64-bit)

[Rustem Zinnatullin]

Indeed. I had exactly the same issue. Restarted Chrome which fixed the issue.

[Steve]

This worked for me, but it still doesn't show if I don't have the 'debugger' in there.

[inliner49er]

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.

[jdunning]

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.

[Waleed Nasir]

Please make sure to restart the Chrome again. Hope this helps.

[nmz787]

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)