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.

Answer 1

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

Answer 2

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.