We Keep Coding

Why is the Firefox debugger not showing full source code?

I am trying to debug a web page in Firefox v42.0 Windows 10, where that web page goes through a proxy server and has code injected into it inline via <script>...</script> (not including a separate .js file) by the proxy server. When I right-click View Page Source, I see the original page plus the code I expect to see injected (and which is actually running). I also see the injected content in the DOM view of the Inspector tab. And it is also visible in the Network Tab in the Response section. However, when I view the same page in the debugger, the injected code is not visible, as if the page were not running through the proxy server.
Furthermore, if I insert a debugger; statement in the injected code, I do hit the breakpoint, but in the Firefox debugger tab it tells me I'm on line 550 of a file with only 173 lines in it according to Firefox. So I can not step through the code.
When I do the same thing in Chrome, I see what I'm expecting, which is the injected code in my page, and I am able to debug this code without problem.
I have cleared my cache to no effect. I looked at the Network tab and everything looks as expected there.
How and why is Firefox not showing me the actual page in the debugger tab (matching what's in View Source or the DOM view), and not letting me step through the injected code?

There are a few bugs in Firefox that can cause this that I've encountered myself:
A local caching issue which can be solved by first closing the dev tools window, hard-reloading the page (Ctrl/Cmd + Shift + R), then opening the debugger again.
Trying to debug a tab in a container, but the source is showing the page as it would be outside a container. See bug 1375036). This particular case should now be fixed.
Similar to the previous point, the debugger source showing you a slighty/completely different document to the one that's actually currently rendered by the browser. This is due to the fact that the debugger does not have access to the original markup & inline script the browser used to render the current page! Apparently designed that way to be memory efficient, but seems to ignore the fact that a developer wants to use the memory for storing the source, because they want the actual source. See bugs such as 1060732, 1149835, and 1472581.
If this is happening to you try debugging in the default/no container, or just do it in Chrome 🙁. If you can't debug in another browser, at least try a fresh profile before you "refresh" (nuke) Firefox as others suggest. You can do this from the about:profiles page (address must be typed manually or bookmarked), or by opening Firefox with the -P flag and creating a new one. To use those flags, run firefox -P --no-remote from a *nix/Mac terminal or C:\Program Files\Firefox Developer Edition\firefox.exe -P --no-remote from the Windows Run dialogue; the --no-remote flag is not required but allows you to run the new profile alongside your main one, and disregard links clicked in other programs.

The below worked for me
Copy url from address bar and close the tab.
Open the url in private mode, the debugger shows the source.
Close private window and open in default mode, the debugger shows the source now.

Try to refresh Firefox:
"Refresh Firefox
Click the menu button and then click help.
From the Help menu choose Troubleshooting Information.
Click the Refresh Firefox button in the upper-right corner of the Troubleshooting Information page.
To continue, click Refresh Firefox in the confirmation window that opens.
Firefox will close to refresh itself. When finished, a window will list your imported information. Click Finish and Firefox will open."
Check this for more information:
https://support.mozilla.org/en-US/kb/refresh-firefox-reset-add-ons-and-settings
I had the same problem. I solved it following these instructions.

I had a similar issue, but this was due to the index page redirecting to a subdirectory. The subdirectory contained the index.html with the javascript include files. The src files only got displayed only when an error occurred. To get around this, I cleared all my cache and I went directly to the subdirectory.

Debugging tool for Chrome Extension notification window

I created a notification window using the Chrome Extension API:
var notification = webkitNotifications.createHTMLNotification("notification.html");
notification.show();
Also there is an external notification.js for all the scripts I would like to run in the notification window (Since the manifest version 2 discourages inline javascript). Everything works fine except I couldn't open developer tools for the notification window to inspect the page. I can do it for the background as well as the popup pages, so not sure if I didn't find it or I simply can't inspect notification through the developer tool. I know I can send messages between background and notification so that outputs show up on the console, but it would be nice if I could inspect directly.
Thanks much!

Navigate to chrome://inspect/ and you can see all the pages that can be inspected. Under the section "Extensions" you should be able to see your notification page and you can inspect it.
Adding this answer for completeness, because #JJin's answer may had been working before but not in Chrome versions 24 and 25.

After some experimenting I accidently found that the developer tool is available for the notification page. The trick is to
fire up the notification window first and keep it on;
navigate to chrome://extensions and notification.html should appear alongside the background.html or whatever name the background page's name is,
as shown in the screenshot:
Make sure the notification window is on otherwise the notification.html would disappear.

extension using background, content and devtools together

I've been trying to figure this out from the docs and samples but there just isn't enough there yet (or maybe I'm missing something?).
I want to create a devtools panel but I still want access to the inspected window's dom like I get in content scripts. Right now my option is eval something in the context of the inspected window, but i would really rather not do that if I can avoid it. If I can just use a content script along with my devtools page/scripts that would be idea, but it doesn't seem to be working like I expect that it should - i can't seem to use the background page to send messages between my devtools page and my content script.
Also, is there a way to get those cool dom subtrees to display like they do in the elements panel or in the console along with the awesome hover/highlight feature?
UPDATE
So I can connect to the content script from the panel page by forwarding the tab id of the inspected window and pulling that out in my background page. So I have to do this
// devtools.js
chrome.extension.sendMessage({
'to': chrome.devtools.inspectedWindow.tabId,
'message': 'whatever'
});
and
//background.js
chrome.extension.onMessage.addListener(function(message,sender,callback) {
message.from = sender.tab.id;
chrome.tabs.sendMessage(message.to, message, callback);
});
And my content.js script gets the message just fine ... and i thought that the sender's tab id would work to send things back from the content script, but it doesn't. The background script gets the message but the devtools page never gets it back.
I'm having a bit of trouble figuring out how to properly debug devtools extensions as well. The content script can log to the page's console and the background script logs to the background page that you can inspect from the extensions page, but where does the devtools page log to?

The code I was originally testing works fine now with Chrome 26+ ... I think I was doing something that should have worked but didn't at the time that caused the behavior I was seeing.
#Konrad Dzwinel's comment was very helping on debugging devtools and noting that fact that this method actually should and does work. Thanks!

Just a quick update from 2016 (and Chrome 54+) for anybody who could also struggling debugging DevTools extension:
After adding custom DevTools pane successfully and showing Angular2 app in it, I found that the extension isn't connected to the page DevTools console and sources. Hitting on the page DevTools window F12 as suggested above doesn't work (have no idea if it's Chrome itself of some problems in my system), the page DevTools window is closed. But pressing Ctl+Alt+I on the page DevTools window opened one more DevTools window with the custom pane application sources and console attached.

Editing in the Chrome debugger

How do I "dynamically" edit JavaScript code in the Chrome debugger? It's not for me, so I don't have access to the source file. I want to edit code and see what effects they have on the page, in this case stopping an animation from queuing up a bunch of times.

I came across this today, when I was playing around with someone else's website.
I realized I could attach a break-point in the debugger to some line of code before what I wanted to dynamically edit. And since break-points stay even after a reload of the page, I was able to edit the changes I wanted while paused at break-point and then continued to let the page load.
So as a quick work around, and if it works with your situation:
Add a break-point at an earlier point in the script
Reload page
Edit your changes into the code
CTRL + s (save changes)
Unpause the debugger

You can use the built-in JavaScript debugger in Chrome Developer Tools under the "Scripts" tab (in later versions it's the "Sources" tab), but changes you apply to the code are expressed only at the time when execution passes through them. That means changes to the code that is not running after the page loads will not have an effect. Unlike e.g. changes to the code residing in the mouseover handlers, which you can test on the fly.
There is a video from Google I/O 2010 event introducing other capabilities of Chrome Developer Tools.

You can use "Overrides" in Chrome to persist javascript changes between page loads, even where you aren't hosting the original source.
Create a folder under Developer Tools > Sources > Overrides
Chrome will ask for permission to the folder, click Allow
Edit the file in Sources>Page then save (ctrl-s). A purple dot will indicate the file is saved locally.

This is what you are looking for:
1.- Navigate to the Source tab and open the javascript file
2.- Edit the file, right-click it and a menu will appear: click Save and save it locally.
In order to view the diff or revert your changes, right-click and select the option Local Modifications... from the menu. You will see your changes diff with respect to the original file if you expand the timestamp shown.
More detailed info here: http://www.sitepoint.com/edit-source-files-in-chrome/

Chrome Overrides
Open the JS file in the sources panel.
Right Click on script src URL > Reveal in Sources panel
Make sure "Enable Local Overrides" is checked.
Right Click anywhere in the JS file > Save for overrides
All Set!
Just edit the file, and save with CMD/CTRL + S. Now whenever you refresh the page, it'll use the modified file. (As long as the filename remains the same)
You'll know it's working if you see a purple dot in the file icon.

Place a breakpoint
Right click on the breakpoint and select 'Edit breakpoint'
Insert your code. Use SHIFT+ENTER to create a new line.

Pretty easy, go to the 'scripts' tab. And select the source file you want and double-click any line to edit it.

If its javascript that runs on a button click, then making the change under Sources>Sources (in the developer tools in chrome ) and pressing Ctrl +S to save, is enough. I do this all the time.
If you refresh the page, your javascript changes would be gone, but chrome will still remember your break points.

As this is quite popular question that deals with live-editing of JS, I want to point out another useful option. As described by svjacob in his answer:
I realized I could attach a break-point in the debugger to some line of code before what I wanted to dynamically edit. And since break-points stay even after a reload of the page, I was able to edit the changes I wanted while paused at break-point and then continued to let the page load.
The above solution didn't work for me for quite large JS (webpack bundle - 3.21MB minified version, 130k lines of code in prettified version) - chrome crashed and asked for page reloading which reverted any saved changes. The way to go in this case was Fiddler where you can set AutoRespond option to replace any remote resource with any local file from your computer - see this SO question for details.
In my case I also had to add CORS headers to fiddler to successfully mock response.

Now google chrome has introduce new feature. By Using this feature You can edit you code in chrome browse. (Permanent change on code location)
For that Press F12 --> Source Tab -- (right side) --> File System - in that please select your location of code. and then chrome browser will ask you permission and after that code will be sink with green color. and you can modify your code and it will also reflect on you code location (It means it will Permanent change)
Thanks

Just like #mark 's answer, we can create a Snippets in Chrome DevTools, to override the default JavaScript. Finally, we can see what effects they have on the page.

here's a gentle introduction to the js debugger in chrome that i wrote. Maybe it will help others looking for info on this: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

you can edit the javascrpit files dynamically in the Chrome debugger, under the Sources tab, however your changes will be lost if you refresh the page, to pause page loading before doing your changes, you will need to set a break point then reload the page and edit your changes and finally unpause the debugger to see your changes take effect.

I was looking for a way to change the script and debug that new script. Way I managed to do that is:
Set the breakpoint in the first line of the script you want to change and debug.
Reload the page so the breakpoint is being hit
Paste your new script and set desired breakpoints in it
Ctrl+s, and the page will refresh causing that breakpoint in first line to be hit.
F8 to continue, and now your newly pasted script replaces original one as long as no redirections and reloads are made.

Chrome DevTools has a Snippets panel where you can create and edit JavaScript code as you would in an editor, and execute it.
Open DevTools, then select the Sources panel, then select the Snippets tab.
https://developers.google.com/web/tools/chrome-devtools/snippets

how does Gmail hide its source

I just saw something odd, I'm using Google Chrome browser and I right clicked a tab with GMAIL open and selected to view the source. All I had returned was :
<!DOCTYPE html><html><head></head><body><div></div></body></html>
How would they have managed to do this ? I didn't think was possible ??

Because gmail is built with javascript it will also build the page dynamically after it is loaded with javascript.
gmail also uses a lot of iframes, you can have a look at the conent of those by inspecting them with Firebug for Firefox

I don't think it is possible. Did you use Tools -> View Source in the menu? It shows a lot with me. Maybe you clicked in an iframe?

depends where you click ... (you clicked in an iframe which is empty, and content is loaded with javascript from other frames...)
If you go to the options -> tools -> view source you will see the main frame and its code..