Take screenshots of webpages in Firefox

Are you working on a website & need a quick way to send someone a screenshot of what you are doing ?

Firefox has a screenshot tool built right in the browser that you can use to grab the entire web page or just what’s showing in the viewport or hover over a specific element on the page & capture just that.

Many of us take a lot of screenshots & send them to other people to communicate about websites we’re working on, projects we’re working on or ideas we have.
There are a lot of tools, plugins & add-ons to take screenshots.

Firefox has a screenshot tool that might be just the right fit for making it very quick and easy to take the screenshots that you need.

Firefox screenshot tool

In the above image, you can see up in the URL bar, in the Page action menu, click on three dots and select Take a Screenshot from the drop-down or you can also take a screenshot by right-clicking on a page and selecting Take a Screenshot

Firefox screenshot tool displays two options

In the above image at right side corner you can see that after clicking on Take a Screenshot you have a choice.
We can take a screenshot of just the visible view port or we can do full page.

Firefox screenshot save visible option

Let’s say if we click on Save visible, we can see that it does take a screenshot of what was visible (refer above image)

It doesn’t take a screenshot that includes the browser tabs or anything else that’s going on in your computer.
It just gets the exact webpage that’s inside the viewport.

If we click on Save full page, we can see that it does take a screenshot of the entire webpage for this really beautiful website.

This is really helpful for those of us who design or build websites.

You can also drag and pick the part of the webpage that you wish to capture (refer image below)

Mess around with it until you get what you want, and then save or copy your screenshot.

Another way to pick something is to hover over elements on the page.

In the below image, there’s sort of the wrapper, probably that goes around the text or you can even hover over an image to get a wrapper

This is a really great way to get just part of the page without having to fuss with crop marks and try to get it exactly to the edges of the pixels.

Select a region to take screenshot

Firefox knows what a DOM is, it knows what all these elements are. It can help use those elements to grab exactly the part that you want.

And after selecting a specific part of webpage we have three choices :

  1. We can download the file (which is going to put our screenshot image file in my Downloads folder)
    or
  2. We can copy this image (which means the file is not going to end up on my computer at all and I can go over to some sort of chat window or whatever and I can just paste it quickly)
    In the image below at right side bottom corner you can check the popup displayed which says that your screenshot has been copied to clipboard.
  3. Cancel: To cancel your selection, click on the Cancel icon

If this post was helpful, please like and share below to show your support !

Advertisements

Firefox Dev Tools 3 Panel Web Inspector – HTML + CSS + Extra options

Beginner friendly guide to Firefox Dev Tools

I want to show you two really quick things about the Firefox Dev Tools that are little tiny icons that you might not notice, but you definitely want to know about.

I’m here, on a random web page, working on the CSS, HTML and right there, you’ll see that there’s this little icon, that you can click, that toggles the Firefox Dev Tools to switch from having two panels to having three panels.

Toggle on 3 pane inspector

Now there’s a good chance when you downloaded Firefox, and you opened it for the first time, it will open with three panels, but in case if it didn’t, or in case you switched back to two and you didn’t realize it, this is where the button is.

You click this little button, and it goes from having HTML and CSS to having HTML and CSS and other options.

And these other options include layout tools, a panel that gives you the computed values for everything in CSS, the changes tab lets you know when things have changed or keeps track of your changes, the Font inspector gives you a way to adjust and change fonts and mess around with variable fonts, (if you’re using a variable font) and the Animations inspector (if you have animations on the page) is a place where you can see exactly what’s going on with animations.

I think it’s really handy to be able to see the HTML in one panel, CSS in another panel and to see other things about CSS in the third panel.

The other thing I wanted to make sure you know about is a little button for messing around with print style sheets.

Toggle print media simulation for page

You can see in the above image , there’s a little icon, that looks like a piece of paper and it makes the browser think that it’s about to print a piece of paper.

It will turn on any media queries that you have set for Print, it will activate the kind of rendering engine behavior that gets activated whenever someone goes to actually print the page.

So it’s a quick way, if you’re styling print style sheets, you can check print media simulation of the page, and not have to actually find a printer and print it out.

Highlighted buttons, navigation links will be removed after clicking on print media simulation

You can see in above image which displays a MDN CSS grid layout webpage, the buttons, navigation links (highlighted in the image above) is not needed when you’re printing it out.
Because None of these buttons will actually do anything on a piece of paper.
Below image displays the webpage after clicking on tiny button to toggle print media simulation

Result after clicking on print media simulation

That’s one of the things you want to do, when you have to print style sheets, is to remove things that you don’t necessarily need.

If this post was helpful, please like and share below to show your support !

Data Safe App

Data Safe app

My new application Data Safe is now available for free download on Firefox Marketplace

This app allows one to choose files from phone and encrypt them with a pass phrase. One can even decrypt the encrypted file.

Note that the app does not encrypt the actual file, but a copy of it, so you would not lose the original. One can encrypt any file like documents, music, videos, pictures, etc.

This app have more than 15k+ downloads

screencapture-marketplace-firefox-statistics-app-data-safe-1520179410436

You can download the app from:  https://marketplace.firefox.com/app/data-safe/

                            prasad seth data safe

Article related to the app was featured in newspaper “Maharashtra Times”

prasad seth maharashtra times

MozoGeek Event at Zeal College of Engineering Pune

MozoGeek Event at Zeal College of Engineering

Event Name : Mozogeek

Agenda :

1.Web app development
2. Introduction to Firefox OS
3. Firefox OS Application development – Foxication
4. Hands on training on Appmaker

Day and Date :
Saturday, 22nd August

Venue :
Computer Department, ZES’s Zeal College of Engineering and Research, Narhe, Pune

Hashtag :  #mozogeekzfc

I started the session with an introduction to Mozilla and it’s mission. Then in the next session I  gave the introduction of Firefox OS. I explained the advantages of Firefox OS and why it is a great mobile OS,demo of FirefoxOS on simulator.

prasad seth firefox

Then in the next session I gave hands-on training to the attendees on how to make a web application. I explained them about Webmaker with hand-on training of Thimble and Appmaker. Some Remixes and makes were made by the attendees.

prasad seth firefox

I explained them about Firefox Marketplace… Attendees were asked to download different apps and review the apps which they liked.

prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox

Mozilla Pune Annual Community Meetup

Mozilla Pune Annual Community Meetup
Event Name: Mozilla Pune Annual Community Meetup
Time: 10am to 6pm
Date: 20th June
Venue: Red Hat, Pune
Hashtags:  #MozPune
Event agenda :
1. Introduction
2. Pune community analysis
3. Taskforce Introduction
4. Making inter-community communication better
5. Mozilla Pune 2015 Goals
6. Inter-community collaboration work
It was an awesome annual meetup at Red Hat,Pune with all Pune Community members
prasad seth mozilla prasad seth mozilla prasad seth mozilla prasad seth mozilla prasad seth mozilla

Mozilla Awarness Program @ VIIT Pune

Mozilla Awarness Program
Event Name: Mozilla Awareness Program @ VIIT Pune
Time: 1 am to 3 pm
Date: 11th July
Venue: Vishwakarma Institute of Information Technology,Pune
Hashtag : #viitFSA
Students in VIIT are enthusiastic for contributing to Mozilla as an FSA. This event helped them to know about Mozilla’s mission, web app development, open web and different ways of contributing to Firefox.
I started the event by giving an introduction about Firefox. Then in the next session I introduced students about Web app development and Firefox OS. Along with me Hrushikesh and Pooja introduced attendees about FSA program.
We registered the attendees for the FSA program. Attendees were very curious to know more about different Firefox products.
Mr. Kailas Patil Sir guided us for the event !!
prasad seth mozilla prasad seth mozilla prasad seth mozilla