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.

Change made in developer tools remains after refreshing the page

I inspected an element on the webpage through Chrome dev tools. I added to the styling: "font-weight:normal". I didn't mean for it to be permanent but now the change won't go away. It remains after refreshing. So whenever I inspect the element, that element isn't bolded like it's supposed to be. But when I got to the actual file in my source code, there's no "font-weight:normal" code.
What's going on? Why is the change remaining? How can I revert changes?

Try clearing your browser cache. And open and close your dev tools.

Problem resolved. I guess I had compiled my SCSS file into a CSS file where the "font-weight:normal" was saved. So when I was trying to change my SCSS file and didn't see changes in the webpage, I was confused. However, when I recompiled the SCSS file into CSS, I see that everything it working as it should and the browser reflects correct code changes as I recompile.

1) Try to open in a new tab and see if the changes stick
2) You are saying your source code doesn't reflect this change- make sure you the browser is loading the file you are editing (maybe you made a copy of it?)

Javascript redirecting on everypage can't remove

I have a javascript file that was accidentally added to the admin side of our site. The javascript is below,
<script>
if (document.getElementById("errorTitle") != null && document.getElementById("errorTitle").innerHTML === "Insufficient Privileges") {
window.location.replace("/portal/InsufficientPrivileges");
} else {
window.location.replace("/portal/FileNotFound");
}
</script>
The problem is that this code runs on the admin pages so we are unable to remove it. If we disable javascript on the browser the page never renders, dynamic content. How can we disable this from running so we can upload the proper file?

You might be able to edit the page that contains the reference to the problem file. If you can just edit the page to jump over where that code is called with an if statement or goto.
If you can't edit the other pages then you can Use the debugger to change the code executed on the fly. Chrome and Firefox have debuggers that should be able to do this.
Specifically for Chrome you go into the object inspector (available via menus or right clicking on the page). Then you can see the HTML on the left window. You select the script tag of interest, you can right click and select delete or select "Edit HTML"

If the page redirects you before you're even able to edit anything, you can use automated tools.
Fiddler (Windows)
Fiddler lets you see all pages downloaded, and then you can have it send your browser a different page when it tries downloading any page you specify (AutoResponder feature). This way you can temporarily edit a page while you can fix it in the admin panel.
Greasemonkey (Firefox) or Tampermonkey (Chrome)
These plugins let you run JavaScript code on a page as soon as it gets to your browser. This will let you do things such as removing the script tag programmatically.

Extension .js files don't show up in Chrome debugger

When I right click on the icon for my extension-in-development and click Inspect Popup (or when I click the icon and choose "Inspect Element") and look under the "Sources" tab, my .js file is nowhere to be seen - only a long list of inspect-able files like apitest, devtools, json_schema, etc. I can, however, find the code through the Elements tab by following the link in the .html file, but that doesn't bring to anywhere where I can actual debugging.
I've also loaded the "Hello, world" extension that Google's tutorial provides, and when I Inspect that one, its .js file is right there. I can't imagine what I've done differently from the tutorial example to cause this.
It's Chrome version 22.0.1229.94 run in a Linux VM. If there's any more information I should be providing, please let me know.

Type location.reload(true) in the console.
http://developer.chrome.com/extensions/tut_debugging.html

If I understand your question right,
Under the sources tab, there are two more tabs, one says Sources and the other says Content scripts. You need to click on the content scripts tab, and there you will find what you are looking for.

Okay So I figured it out, simply click on you extension icon, and a little dialog will pop up, then right click on it and click on inspect element. You can figure it out from there I reckon. (My other answer would be good if it was a content script, but this is a popup script.)

Firefox Firebug Extension - Freeze Javascript Feature?

How can I freeze Javascript in firebug so that i can inspect the changes made by it in the html? If for example i have a jQuery rollover effect and i want to inspect the html code in that point in time.
I believe Dreamweaver CS4 has this feature titled freeze javascript and live code. Is there a free equivalent either in Firebug or another Firefox extension?

By "freeze" I assume you mean debugging, and yes, Firebug definitely has that.
First you have to go into the Script tab on Firebug. If Script is disabled on the site, enable it.
Now, go to the dropdown and select which JavaScript file you want to debug. This is typically either the page itself with inline JavaScript, or a linked page. Find the line of code you want to freeze on, and click to the left of the line numbers. You'll see a red dot appear - this dot denotes that the code will freeze there during execution. Once the code is there, you can access the current HTML by going to the "HTML" tab. You'll also see the icons in the top-right corner of Firebug's Script pane light up, allowing you to either continue execution, step over, step into, or step out of each line of code, observing HTML changes for each line executed.
Note that Firebug lets you step through code line-by-line, which means that minimized JavaScript files (wherein all the code is compacted onto one line) are absolutely awful for debugging, because you can't tell where Firebug is. So for debugging purposes, I highly recommend getting the non-minimized versions of files.
If you need more help, I suggest checking out the Firebug documentation, which has some good guides.

Break on mutate (the pause button when the html tab is selected) is the closest thing I can find to this feature. It will pause the next time something is changed. It's just one off of what you want, but could be useful.

not exactly firefox function, but appears close enough (at least in the way I understand the question):
Get CheatEngine
Open firefox process
Check "enable speedhack"
Set speed to 0
Apply
All scripts are now effectively paused
You can test this on a javascript clock here.
I'm kind of dissapointed that noone has created a plugin for firefox, which would do the same.

In the Script tab of Firebug, you can set break points in Javascript that will allow you to step through code, set watches, and do other things you would in other debuggers. You can also switch to the HTML tab and see what changes have been made while Javascript is "frozen."

In Firebug, go to the script tab. On the top, you can see:
Inspect | all | <filename>
Click on to choose the file that contain the javascript you want to track. Once you have selected your file, click on a line number to put a brea kpoint (a big red dot will appear).
You can put several break points in different files. The break point will not disappear if you refresh the page (F5).
This tutorial should help you as well.