Chrome Developer tool: html script is blank (in source) debugging tutorial

Question

I am doing the Chrome debugging tutorial, using NetBeans and Google Chrome. Everything, including extensions, seems to work correctly, but when I get to section Use the Debugger, I cannot see the html code to insert a breakpoint.

After selecting inspect popup on the browser, it opens in Console, showing nothing, Elements shows popup.html with images added. When I go to Sources, the file popup.html can be opened, but the only line, Line 1, is blank. If I open the js file, the js file is there and can be edited (break pointed).

I am sorry - probably something basic, but I'm not very experienced with this. I've tried reloading and refreshing everything.

FOLLOW-UP: By entering location.reload(true) into the Console prompt, the popup.html file became visible as Source! Why? No idea.

I hope this saves someone the full day I spent stumbling around.

Yeah, but that reloads the page, and loses any interaction you might have had on the page before opening the debugger. — Peter Brand, Dec 13 '17 at 13:41
This is happen in the latest version of Chrome, Oct 2019, but the location.reload(true) trick didn't load anything. Incidentally, the source window only shows the line number 1, but nothing else. — , Oct 01 '19 at 15:33
@sidhewsar open chrome devtools (press F12) and click "console" tab , then write "location.reload(true)" — LKB, Dec 29 '22 at 04:28

score 84 · Answer 1 · answered Aug 30 '18 at 09:59

84

in my case the order helped was

close the blank tab in sources
close dev tools
open dev tools
open the tab in sources(its still blank)
refresh page

answered Aug 30 '18 at 09:59

Andrey Zausaylov

1,015
7
7

this worked for me, location.reload(true) didn't work using chrome 98.0.4758.102 – samwa Mar 01 '22 at 00:19

score 65 · Answer 2 · answered May 12 '14 at 18:01

65

This appears to be a known issue with Chromium DevTools. Basically, the HTML and other non-script content is already flushed before DevTools opens and there's no reliable way to get it back. Refreshing the page with DevTools open "corrects" the issue.

answered May 12 '14 at 18:01

Eric

6,965
26
32

@zdarsky.peter The linked issue was marked as fixed/closed. If you're experiencing issues, try searching the issue list. – Eric Mar 04 '15 at 18:23
4

Agreed - I have the issue and this fix is either out of date (for a previous identical issue), or does not work. – Dan Nissenbaum Mar 06 '15 at 00:53
3

i am also having the same issue. Refreshing the page does not get around the issue. – M H May 28 '15 at 14:14
@michaelhanon, I had the same issue today. Turns out I had a javascript error that really confused the Inspector tool. Once I sorted out the javascript problem, I could inspect my webview without a problem. – AWT Jun 03 '15 at 18:33
18

you can get it work by closing the developer tools and again reopening them using the inspect element option. It works for me. – Vishal Apr 07 '16 at 05:37
1

does someone know why this bug is still present in Chrome as of May 16 2016 even though it was fixed in July 2014? – nonzaprej May 16 '16 at 14:53
7

Still going in December 2017! – Peter Brand Dec 13 '17 at 13:49
Playing around with closing the dev tools, reloading, and reopening shows the code again. – gdvalderrama Dec 19 '17 at 15:38
Still going in November 2018! – Gadzooks34 Nov 15 '18 at 22:09
2

Bug is still present in 2019. – Simon Morgan Jan 10 '19 at 14:45
7

Bug is still present - May 2019 – Chris Rogers May 28 '19 at 05:47
Bug is still present - Nov 2019 – Nigel Fds Nov 14 '19 at 06:11
Bug is still present - Dic 2019 – Dordoka Maisu Dec 19 '19 at 14:17
1

The bug is still presenting itself! - Feb 2020 – Farzad Karimi Feb 17 '20 at 06:45
Yup, same issue faced by me. SO what I do is ... I keep the console window open and then refresh the page. The code becomes visible then. – foodiepanda Apr 23 '20 at 06:19
1

The bug is still present! - April 30 2020 – MorenajeRD Apr 30 '20 at 20:53
The bug is still present - November 2020 – sean Nov 21 '20 at 18:14
1

Happy new year! 2021 is here, so is the bug! – James T Jan 05 '21 at 21:54
May 2021, still buggy – camainc May 12 '21 at 15:17

paul · Answer 3 · 2015-10-22T19:11:31.903

31

I had this problem, and have just found that disabling "Enable Javascript Source Maps" from the Inspector settings window (F1) solved it

I recreated my js.map, reenabled the setting and the source was still available.

So I think my problem was that I was serving unminified js (dev settings), but the map (built for prod settings) was still there and out of date.

edited Oct 22 '15 at 19:11

answered Oct 22 '15 at 19:06

paul

21,653
1
53
54

4

close chrome and reopen after changing the setting too! – Nateous Mar 29 '18 at 19:11

score 18 · Answer 4 · answered Oct 16 '16 at 06:38

18

In my case, I was unable to access the console as it's tab also displayed a blank page. My solution is to use the CTRL+SHIFT+I combination with the blank debugger screen in focus, then type parent.location.reload(true) in the console of the popup debugger.

answered Oct 16 '16 at 06:38

Ikenna Anthony Okafor

628
7
25

2

As in WillB's comment above, that reloads the page, and loses any interaction you might have had on the page before opening the debugger. – Peter Brand Dec 13 '17 at 13:42
Awesome! This worked for me after 2 hours of struggle. – Zeeshan Adil Aug 16 '18 at 10:21
I don't know what the parent.location.reload implies but it solved my problem after several chrome restart / hard refresh / emptying chrome cache data! thanks! – beluga Apr 02 '19 at 15:15
Glad I could help. It reloads the parent window (the blank window where you typed CTRL+SHIFT+I) from the child window. – Ikenna Anthony Okafor Apr 02 '19 at 15:23

score 12 · Answer 5 · answered May 02 '19 at 10:34

12

Dev Tools (F12) -> Inspector settings window (F1) -> Restore defaults and reload [button at the bottom] works for me!

answered May 02 '19 at 10:34

Sylwia M

121
1
4

This one worked for me, but since I was already in the Chrome v88.x (2021) inspect => source window, I only had to press the F1 key. – Jan 26 '21 at 15:19

score 5 · Answer 6 · answered Mar 08 '16 at 15:11

5

In my case there was an extension in chrome causing the debugger to give the blank index page under a "no domain" section of the debugger. After disabling all non-essential extensions in chrome, the debugger showed the correct source again.

answered Mar 08 '16 at 15:11

Brett Drake

301
3
12

4

Would have been great if you took a note of extension causing issue. Many extensions might be non-essential for you and essential for me. This makes answer worthless. – Imad Jan 18 '17 at 07:30
5

I wouldn't agree with "worthless". At least you know to check the plugins. – Brett Drake Jan 18 '17 at 10:44
This was my issue - in my case, I had installed UltraSurf Unblock VPN extension. Opening the local debug page in an incognito window brought it up instantly. Bit of a "durrrr" moment I must admit :( haha! – IfElseTryCatch Aug 23 '17 at 07:34
Using incognito fixed it for me. – Petah Nov 02 '17 at 05:34

score 2 · Answer 7 · answered Mar 16 '16 at 15:21

2

I fixed my problem by using a brand new session with command line argument "--user-data-dir", and disabling "Enable Javascript Source Maps". My code shows up fine in Firefox debugger, so looks like caused by a Chrome bug.

answered Mar 16 '16 at 15:21

Simon

21
1

score 2 · Answer 8 · answered Apr 11 '16 at 09:09

2

I had the same problem. Even a refresh of the page didn't worked.

Going chrome://help and refreshing the browser + restart worked for me.

You can update Chrome through the menu too:

answered Apr 11 '16 at 09:09

Charles

11,367
10
77
114

score 2 · Answer 9 · answered Dec 10 '20 at 19:24

I had the same issue where my HTML doc was blank in the Sources tab. I tried a couple of the fixes recommended here, but none of them worked. This suggestion even caused all local scripts to disappear. The only thing that worked for me was, from the inspector window, pressing the F5 key. Credit to this SO answer.

score 1 · Answer 10 · answered Jun 03 '15 at 18:36

1

I have noticed that some serious javascript issues cause problems like this. In my case, I was erroneously overwriting my entire document due to a typo.

If you're getting a blank html page in the Chromium WebTools debugger, take a good look at your javascript to make sure it's not doing anything strange.

answered Jun 03 '15 at 18:36

AWT

3,657
5
32
60

1

This seems to be what caused the problem for me as well. In my case I had a bad jquery reference. $('inputid') as opposed to $('#inputid'). – Vincent Feb 19 '18 at 18:30
This is happening to me [in 2023... 116.0.5845.111] It seems a "bug" that the debugger isnt able to help debug some javascript typos. I have a complex Flask server and after my most recent code update nothing is showing up in the debug window, although the code seems to work. If I run the code to build the template, render but save to file, then load that file in standalone Flask app, then the script is visible (although none of the callback buttons, etc, work). But if I run code to both render and serve template then the debug screen is blank. I'm reduced to lots of "Got here" lines to debug. – Tunneller Aug 27 '23 at 14:44

score 0 · Answer 11 · answered Jun 22 '22 at 15:36

0

In my case, I was in the Filesystem tab instead of Page tab. From the "Page" tab, select the source code you are working with and do F5 (refresh). It should load the source code for you.

answered Jun 22 '22 at 15:36

JAY SHIN

9
2

CMD-R on Mac worked for me on the Page tab. The (index) code was initially blank but after CMD-R (reload), the source code appeared. Thanks! – joehanna Mar 21 '23 at 03:24

score -1 · Answer 12 · answered Jun 01 '17 at 07:49

in my case it happend suddenly , after i infected with malware and i reset my browser - deleted cache/appdata.

Solution: remove extension that may affect Js in my case

i removed/disabled the below extension and worked https://chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje?hl=en

strange because before i washaving that addon without problem , i think its like CPR to heart . :)

score -1 · Answer 13 · answered Jun 12 '17 at 02:51

-1

In my case, I had gulp with browsersync running for a few days. I bounced gulp and solved my issue.

answered Jun 12 '17 at 02:51

dman

10,406
18
102
201

score -1 · Answer 14 · answered Jul 18 '17 at 07:43

I had also this issue when I had a huge java-script file, I had this line

                points.push({
                    location: new google.maps.LatLng(46.5376919, 4.5425704),
                    date : "5/8/2017 5:11:00 PM",
                    free : true
                });

in a for cycle and it was counting 3000 items so the file grow big in the script and the file was blank in chrome sources. (I think I hit some limitation)

After making the file smaller by removing to 100 items it worked just fine.

Harry · Answer 15 · 2023-04-12T21:19:10.647

To make it easier for others, i am re-posting the high-rated comment from @Vishal (Apr 7, 2016 at 5:37) to Answer from @Eric because i first tried most of the other answers and only after that, i parsed all the comments and found my personal solution (which works only every third try but hey, better than using vscode):

You can get it work by closing the developer tools and again reopening them using the inspect element option.

This worked for me: close dev tools, right click some elment and hit inspect.

Chrome Developer tool: html script is blank (in source) debugging tutorial

15 Answers15

Linked