JavaScript code override under developer tools

[SmartBastard]

In Chrome, there's an option "Enable Local Overrides" (while in inspector). When switched ON, we can edit, remove and inject JS lines to the files that are hosted with the website and/or we can add our files with custom JS code. Thanks to that, we as developers could debug JS code on the site. That's the only reason why I can't switch to Firefox on 100%.

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.

[Honza]

100% agreed, this is great feature and we are currently working on it (or at least light way version of it)

Bug 1704690 - Local HTTP Response Overrides

Honza

[Honza]

Btw. what is the use case for you? Are you debugging foreign web site? Or your own local site?

[Jon]

Hey all,

Good news...

This idea was shared with our DevTools Engineering team, and we're excited to report back that it is being worked on. Check out @Honza's comment in the thread for more info and stay tuned for updates 😀

[Killercat103]

This idea was shared with our DevTools Engineering team, and we're excited to report back that it is being worked on.

---

That's great! Excited to see it when it becomes available

[jcubic]

It would be great to have this. I was searching for DevTools Overwrite in Firefox and sadly found only this idea.

[johnkegd]

Please add this to firefox. I don't think we have to explain how this could be useful.

[johnkegd]

Please add this feature. I don't think we have to explain how is this is useful

[Honza]

This feature is already available.

1) Load your page

2) Open DevTools and select the Debugger panel

3) Right click on a JS source file in the Sources (left) side panel and execute "Add script override" 

The "Save As" dialog should allow you to save the file locally. This local file will be utilized when an HTTP request is made (for example, when you reload the page). You can modify this file to test various scenarios.

Please try it and let us know how it works for you.

Thank you!

[cganoe]

Does this feature work under remote debugging (about:debugging), for example Firefox for Android over USB to desktop Firefox? When I'm remote debugging on the desktop, I see the "Add script override" option in the desktop debugger, and it partially appears to work like it would if I were just on desktop (I can save the file, and it shows the purple dot next to the JavaScript file), but my edited code does not show in the debugger, and my local code changes don't appear to be getting to the mobile device. I'm guessing it doesn't work for remote debugging, which is unfortunate, unless I'm missing a step. Thanks for this great feature.

[Honza]

Sorry, remote debugging is not currently supported. 

It's possible, but not currently on our roadmap.

You might monitor this bug that covers this feature:

https://bugzilla.mozilla.org/show_bug.cgi?id=1881441

[cganoe]

Thanks for the reply and for getting override for remote debugging into enhancement/issue tracking.

[zeltera]

Dear Firefox development team,

The "Override response" for requests is a must have for Firefox. It helps developers debug production issues, simulate edge cases, errors etc. It is implemented in chrome at this moment.

[AmbientImpact]

Agreed, having this work with remote debugging would be very helpful to try and debug issues in production that you can't replicate locally and that only occur on a real mobile device; I'm currently trying to do that for a nasty bug and this would be such a big help. Thankfully the bug also occurs in Chrome so I can try that remote debugging, but I'd much rather use Firefox.

[Chad3]

Script overrides don't seem to be working in FireFox 131.  I went through the process and got the purple override circle on the script, however no matter what changes I make to the local file, the debugger shows and runs the original script from the web site.