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.

Whittaker

Use the network tab in developer tools and refresh the page to determine if the js file was actually loaded when the page loads. – Carnallite

@Carnallite I did that. Question explanation is clarified as result of your comment. Thx. – Whittaker

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. – Speculative

If no console log present it means your source files are not loaded from where you expect to be. – Speculative

@Speculative Great idea. Thx. File name next to the message from console.log() parameter is VM254 DdiClientMain.js:17. I wonder what this means? – Whittaker

VM is a code for script loaded with eval or other cases, annyhow is loaded in page via javascript. – Speculative

But missing scripts are not loaded via eval. They are referenced from html head, just like other scripts that do appear in sources menu. – Whittaker

Did anybody file a crbug ? – Aftersensation

@Carnallite Two years later & still the same problem. Thanks for the solution – Undesigned

Answer 1

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

Whittaker

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. – Aftersensation

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. – Possessory

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

Answer 2

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

Phallus

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

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 – Elsi

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

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

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

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. – Headrest

Just ran into this bug after upgrading to Chrome 95 on Win10, so it's still not fixed. @Headrest 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. – Vespine

Did not work for me. What did the trick was "Restore defaults and reload" button in devtools settings. – Doe

Hitting F5 while on the network tab worked for me. Thanks! – Alleyn

Answer 3

For me I just had to open the Developer Tools -> settings and click on the "Restore defaults and reload" button at the bottom.

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

Seals

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

Luellaluelle

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. – Northern

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

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

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) – Sporocyte

Answer 5

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

Snort

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

Answer 6

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.

Salacious

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

Answer 7

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

Preparatory

Answer 8

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

1. In Sources mode, click the blue-highlighted button:

2. Select Open file.

3. Type the name of the wanted file in the search input box.

4. Select the file from the result list.

Rachelrachele

Answer 9

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.

Exsiccate

Answer 10

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.

Treasurehouse

Answer 11

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.

Humpage

Answer 12

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.

Cythiacyto

Answer 13

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

Stefa

Answer 14

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.

Sherly

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

Answer 15

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

Bondage

Answer 16

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.

Belak

Answer 17

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.

Grande

Answer 18

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.

Preinstruct

Answer 19

That's how it worked for me:

Steps:

1. " Ctrl+Shift+C " opens your inspect in your browser.
2. Open file.
3. Choose the correct directory.
4. 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.

Matthia

stackoverflow.com/editing-help – Outfoot

Answer 20

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.

Superorganic