Screenshots from the Firefox Developer Tools console
Mozilla plans to launch a new screenshot taking feature in Firefox 63 that enables users to capture screenshots using the Developer Tools console.
Another screenshot tool and feature? Firefox has quite a few of those already and if you don't follow development closely, it may be unclear why Mozilla will add another to the web browser.
Firefox users can use the native screenshot tool of the browser to take screenshots, and save them online or offline. The tool supports basic image editing options even.
Another option is available in the Developer Tools. You need to open the Settings and check the "Take a screenshot of the entire page" option to add a button to the Developers Tools to capture screenshots when you activate it.
Finally, there is the Developer Toolbar which supports a variety of commands including taking screenshots but also other handy things such as changing preferences, editing cookies, or managing Firefox extensions.
Why then, another option to take screenshots in Firefox? Because the Developer Toolbar will be removed soon.
Overview of the Developer Tools screenshot command
Mozilla plans to integrate the new functionality in Firefox 63 -- out October 23, 2018 -- and one of the core reasons for the introduction of the feature is the removal of the Developer Toolbar in Firefox and with it the removal of the screenshot command.
The two remaining screenshot options, via the Screenshot add-on or the Developer Tools, are not nearly as sophisticated as the screenshot command of the Developer Toolbar.
The new screenshot command adds a new syntax to the Web Console of the Firefox browser as commands start with ":". The only two main commands that are available are :help and :screenshot at the time.
To capture a screenshot, you'd do the following:
- Use Ctrl-Shift-K to open the Web Console.
- Type :screenshot and hit Enter.
Firefox captures a screenshot of the visible part of the page. The command supports several parameters that you can make use of to customize the screenshot.
- :screenshot --fullpage -- captures the entire page and not only the visible part.
- :screenshot --clipboard -- copies the screenshot to the clipboard of the operating system.
- :screenshot --selector ".class" -- take a screenshot of a specific element on the page.
- :screenshot --fullpage --dpr 0.5 cnn-no-css -- grabs a low resolution copy of the entire page.
The :screenshot command replicates the command of the Developer Toolbar. Even better, Mozilla added support for remote targets to the command. You could save screenshots of a connected Android device to the computer you are using Firefox on.
The feature supports autocomplete functionality, and you may use the help command to display all options.
Closing Words
The new :screenshot command of the Console offers all screen capturing functionality of the Developer Toolbar of Firefox and new features. While you will have to learn a different command, Ctrl-Shift-K instead of Shift-F2, and a new syntax for the main command, it is good to see that Mozilla listened to users and re-implemented the functionality.
Now You: Do you use your browser to capture screenshots?
Offtopic: There is an abolute new Design for Firefox ready, called Material Fox.
It’s based on the new fresh Redesign from Googles Chrome Browser, which in my mind is the way the Quantum Design sould have looked from the Start.
It’s gotta be found right here and has now windows support, watchout the support info to make sure in about:config svg.context-properties.content.enabled, then it works like charm.
Found: https://www.deviantart.com/mucksponge/art/MaterialFox-760548189
Abolutely stunning and smooth.
By the way : where is the “the native screenshot tool” of Firefox ? I can see where it is in Vivaldi. There’s a small camera icon on the bottom bar, with a popup saying “capture page”, and then you click on it and the instructions are obvious.
I just grabbed successfully a whole Web page, down to the bottom. It pastes beautifully in Microsoft Paint. Opera has its camera icon as well, and it’s also dead simple to use, if less powerful than Vivaldi’s.
Why is it that Firefox cannot do simple things in a simple way ? I’m all for powerful features and customisation, but first you need to get the basics right.
I routinely screenshot, and I was never aware there was a screenshot feature in (regular) Firefox. I spent considerable time trying to find a (simple) program doing basic screenshots and editing, and I haven’t found one.
I use Pic Pick, which is quite good in many respects, but does manage some stupid user interface errors. I also use Windows 7’s Snipping Tool, which is nearly perfect, if minimal. Now I had to block updates on Pic Pick, because they “upgraded” in such a way that it’s much slower (and the interface is all over the place).
One thing I’ve never been able to do, is to grab a complete Web page. Even programs that pretend to do this don’t, in fact, succeed. At least, I’ve never managed to make them work.
That’s one more example of the Firefox vice : breaking rule number 1 or 2 of software design, which is : give users one way to do things, get the feature right, and make it obvious. Don’t pepper them whith variants, because you can’t decide what’s right, or you have to keep competing teams of developers happy.
Seems like Mozilla have lost their way with Firefox completely. They keep adding useless things like Vivaldi. There is a screenshot tool, built-in reading mode, Pocket, so many useless things that can’t be removed, only turned off.
It’s kinda ironic that they would strip its browser out of its best feature – real addons and make it bare-bones and are now bloating it with useless crap that nobody asked for or needs. It’s as if they want Firefox to stand out for the wrong reasons. I hate Chrome, but damn, it gets the job done where every other browser fails. And Google never bloated it with crap, there are even forks like SRWare Iron that is basically Chrome with Google’s tracking and other garbage removed.
It’s quite weird to think of add-ons as features. They are non-features by definition : something that’s not in the software, and needs an add-on to be brought to life.
What’s wrong with having features embedded in the software ? That’s the way most great programs were, and are designed.
While I totally get the nostalgia about the old extensions system (I myself have my personal list of add-ons I regret), many came to life in the first place because Firefox lacked a lot of features it should have included out of the box.
The problem with drawing the line in the wrong place between main program and add-ons, is that you lose the consistency of user interface and the integration of features with each other.
Worse still, and that’s a very big problem with Firefox, when the core software doesn’t get something right, and you have to use an add-on instead, there are many cases where you need to stitch several add-ons together for a single task — and even then, the result (somewhat obviously) wouldn’t be satisfactory.
Read mode is something that’s absolutely basic in a browser. You might not need it yourself, but it would be absurd to deny its usefulness. Word included that ages ago. If it’s needed in a word processor, you bet it’s needed in a browser. Ditto for screenshots, or, indeed, something closely associated : the ability to save a whole webpage in a single file for future reference and reading.
This does not exist at all in a standard, uniform, cross-browser manner, the way most software can save under pdf, txt or similar, universal formats. I think Internet Explorer was the one which did it best, long ago. Then we got the splendid maff format, which needed an add-on with Firefox — and it duly died when Quantum came of age.
It’s on things such as these a browser publisher worth its salt should exert leadership, and not leave it to third party developers.
“Firefox users can use the native screenshot tool of the browser to take screenshots, and save them online or offline.”
Firefox users can also unwillingly upload their screenshots to Mozilla servers thanks to creatively designed confusing icons.
As a bonus, all this not encrypted of course.
“Do you use your browser to capture screenshots?”
No, I don’t. If I need to take a screenshot of a web page, I just use the same screenshot tool that I use for any other sort of screenshot. The only use case I can see for having screenshot functionality in the browser itself is for taking screenshots of entire pages that don’t fit onto the screen all at once. That’s not something that I’ve ever needed to do.