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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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

Answer 7

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.

Answer 8

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.

Answer 9

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.

Answer 10

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.

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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.

Answer 15

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.

Answer 16

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.

Answer 17

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.