Chrome Developer tool: html script is blank (in source) debugging tutorial
DebuggingGoogle ChromeDeveloper ToolsDebugging Problem Overview
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.
Debugging Solutions
Solution 1 - Debugging
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
Solution 2 - Debugging
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.
Solution 3 - Debugging
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.
Solution 4 - Debugging
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.
Solution 5 - Debugging
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.
Solution 6 - Debugging
Dev Tools (F12) -> Inspector settings window (F1) -> Restore defaults and reload [button at the bottom] works for me!
Solution 7 - Debugging
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.
Solution 8 - Debugging
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.
Solution 9 - Debugging
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:
Solution 10 - Debugging
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.
Solution 11 - Debugging
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 . :)
Solution 12 - Debugging
In my case, I had gulp with browsersync running for a few days. I bounced gulp and solved my issue.
Solution 13 - Debugging
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.