I am using Firefox as the main browser for web development but it doesn’t have functionality for saving code snippets . Most of the developers are switching to chrome because of this inability to save code. Firefox is good with other things but please provide this function. It would be one of the demanding updates for web developers . Please show some concern about this issue.
There is an RFE on file for this from a few years ago: https://bugzilla.mozilla.org/show_bug.cgi?id=1315549
It would be helpful to understand the specific use cases for this feature.
Firefox has expression history (https://developer.mozilla.org/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Execution_history) and this would be like adding bookmarks to speed access to selected ones. Is this a common developer activity?
It’s possible to associate a shorthand name an expression/snippet now, but it’s a bit too much work. Let’s say you frequently want to modify the page’s background color:
document.body.style.backgroundColor='#def';
To add a name, one option would be:
(function (){
this.kw='bblue';
document.body.style.backgroundColor='#def';
})();
But creating that and then searching for that is quite a bit of extra work compared with choosing from a list.
A simpler workaround for now would be a regular bookmarklet.
The way you suggested is circuitous. It require lot of extra work. Why would someone do this when we have simple solution for this in Chrome.
I mean to say for front-end developer Its like creating small library instead of using already available one.
Firefox is really good for Web Development but please don’t ignore voids or emptiness that is still present in it. Try to be problem solver and give us another good reason to stick to it.
Hello @SudoCodes ,
we don’t have a snippet management UI as Chrome does, but you can save and load snippets from the WebConsole (with Ctrl+S/Ctrl+O, or Cmd+S/Cmd+O on OSX)
Snippets are very useful for debugging by setting breakpoints and stepping through code one line at a time, analyzing data and server responses, etc. Doing this through console is nearly impossible in my opinion
you can add breakpoints in a console expression (sort of), by adding debugger;
statement in your code. This will pause the expression evaluation and open the debugger, and from there, you can inspect the variables, step, …
I know this isn’t a fully fledged snippet management feature, but we’re a very small team and we are currently extremely busy working on a critical refactoring in the whole DevTools codebase.
I can see the appeal of such feature and would gladly use it myself, but we simply don’t have time to spend on this at the moment.
The good news is that if you know web development, anyone can contribute to devtools which are built in html, css and JS (with some React).
If someone is willing to tackle this, they can read https://firefox-source-docs.mozilla.org/devtools/getting-started/README.html , and I’m willing to mentor them
Hi @Nicolas_Chevobbe, was just reading this post and I think I can contribute to a code snippet feature for the DevTools.
Would love to see snippets available for anyone to use!
I’m not sure i’m able to DM yet but I’ll get the local env up and running and perhaps we can connect on any info that’s needed? cheers
Hello Chris
Thanks for offering help!
Since we have https://bugzilla.mozilla.org/show_bug.cgi?id=1315549 , could you ask there that you want to work on it so I’ll assign it to you? And then we can discuss about how we could do it
We can also chat on https://chat.mozilla.org/#/room/#devtools:mozilla.org