CODEWITHSUNDEEP
debugginggoogle-chromedeveloper-tools
DrWhat
DrWhat

Reputation: 2490

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

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.

Upvotes: 127

Views: 60461

Answers (15)

Dongolo Jeno
Dongolo Jeno

Reputation: 444

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.

Upvotes: -1

Harry
Harry

Reputation: 1263

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.

Upvotes: -1

JAY SHIN
JAY SHIN

Reputation: 9

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.

Upvotes: 0

sam hooper
sam hooper

Reputation: 91

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.

Upvotes: 2

Sylwia M
Sylwia M

Reputation: 130

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

Upvotes: 13

Andrey Zausaylov
Andrey Zausaylov

Reputation: 1075

in my case the order helped was

  1. close the blank tab in sources
  2. close dev tools
  3. open dev tools
  4. open the tab in sources(its still blank)
  5. refresh page

Upvotes: 90

dman
dman

Reputation: 11073

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

Upvotes: -1

shareef
shareef

Reputation: 9581

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

Upvotes: -1

Ikenna Anthony Okafor
Ikenna Anthony Okafor

Reputation: 697

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.

Upvotes: 18

Charles
Charles

Reputation: 11796

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:

enter image description here

Upvotes: 2

Simon
Simon

Reputation: 21

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.

Upvotes: 2

Brett Drake
Brett Drake

Reputation: 331

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.

Upvotes: 5

paul
paul

Reputation: 22021

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.

Upvotes: 32

AWT
AWT

Reputation: 3717

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.

Upvotes: 1

Eric
Eric

Reputation: 6995

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.

Upvotes: 67

Related Questions