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
– Peter Brand, Commented Dec 13, 2017 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. — user2505564
– user2505564, Commented Oct 1, 2019 at 15:33

Andrey Zausaylov · Accepted Answer · 2018-08-30 09:59:03Z

90

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, 2018 at 9:59

Andrey Zausaylov

1,0757 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

samwa Over a year ago

this worked for me, location.reload(true) didn't work using chrome 98.0.4758.102

Eric · Accepted Answer · 2014-05-12 18:01:33Z

67

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, 2014 at 18:01

Eric

7,00528 silver badges32 bronze badges

20 Comments

Dan Nissenbaum Over a year ago

Agreed - I have the issue and this fix is either out of date (for a previous identical issue), or does not work.

M H Over a year ago

i am also having the same issue. Refreshing the page does not get around the issue.

Vishal Over a year ago

you can get it work by closing the developer tools and again reopening them using the inspect element option. It works for me.

Peter Brand Over a year ago

Still going in December 2017!

Chris Rogers Over a year ago

Bug is still present - May 2019

|

paul · Accepted Answer · 2015-10-22 19:11:31Z

32

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, 2015 at 19:11

answered Oct 22, 2015 at 19:06

paul

22.1k1 gold badge56 silver badges54 bronze badges

1 Comment

Nateous Over a year ago

close chrome and reopen after changing the setting too!

Ikenna Anthony Okafor · Accepted Answer · 2016-10-16 06:38:56Z

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, 2016 at 6:38

Ikenna Anthony Okafor

6977 silver badges27 bronze badges

4 Comments

Peter Brand Over a year ago

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.

Zeeshan Adil Over a year ago

Awesome! This worked for me after 2 hours of struggle.

beluga Over a year ago

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!

Ikenna Anthony Okafor Over a year ago

Glad I could help. It reloads the parent window (the blank window where you typed CTRL+SHIFT+I) from the child window.

Sylwia M · Accepted Answer · 2019-05-02 10:34:33Z

13

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

answered May 2, 2019 at 10:34

Sylwia M

1301 silver badge5 bronze badges

1 Comment

user2505564 Over a year ago

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.

Brett Drake · Accepted Answer · 2016-03-08 15:11:15Z

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 8, 2016 at 15:11

Brett Drake

3314 silver badges13 bronze badges

4 Comments

Imad Over a year ago

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.

Brett Drake Over a year ago

I wouldn't agree with "worthless". At least you know to check the plugins.

IfElseTryCatch Over a year ago

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!

Petah Over a year ago

Using incognito fixed it for me.

Simon · Accepted Answer · 2016-03-16 15:21:10Z

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, 2016 at 15:21

Simon

211 bronze badge

Comments

Charles · Accepted Answer · 2016-04-11 09:09:38Z

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, 2016 at 9:09

Charles

11.8k11 gold badges81 silver badges125 bronze badges

Comments

sam hooper · Accepted Answer · 2020-12-10 19:24:53Z

2

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.

answered Dec 10, 2020 at 19:24

sam hooper

915 bronze badges

Comments

AWT · Accepted Answer · 2015-06-03 18:36:24Z

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 3, 2015 at 18:36

AWT

3,7275 gold badges36 silver badges62 bronze badges

2 Comments

Vincent Over a year ago

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').

Tunneller Over a year ago

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.

JAY SHIN · Accepted Answer · 2022-06-22 15:36:07Z

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, 2022 at 15:36

JAY SHIN

92 bronze badges

1 Comment

joehanna Over a year ago

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!

shareef · Accepted Answer · 2017-06-01 07:49:49Z

-1

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

answered Jun 1, 2017 at 7:49

shareef

9,64116 gold badges64 silver badges94 bronze badges

Comments

dman · Accepted Answer · 2017-06-12 02:51:28Z

-1

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

answered Jun 12, 2017 at 2:51

dman

11.1k25 gold badges118 silver badges217 bronze badges

Comments

Harry · Accepted Answer · 2023-04-12 21:19:10Z

-1

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.

edited Apr 12, 2023 at 21:19

answered Apr 12, 2023 at 21:08

Harry

1,26311 silver badges25 bronze badges

Comments

Dongolo Jeno · Accepted Answer · 2024-05-08 07:11:51Z

-1

I also had this issue when I had a huge data inserted into an array, the problem was because of this:

                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 and because of this, the file was blank in chrome sources. (I think I hit some limitations)

After making the array smaller around 100 items it worked just fine.

edited May 8, 2024 at 7:11

answered Jul 18, 2017 at 7:43

Dongolo Jeno

4546 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

15 Answers 15

1 Comment

20 Comments

1 Comment

4 Comments

1 Comment

4 Comments

Comments

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

1 Comment

20 Comments

1 Comment

4 Comments

1 Comment

4 Comments

Comments

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Related