Blog Archives

Set size of browser inner window for screenshots in Chrome

I need to set the size of my browser’s inner window, so that I can take screenshots that fit into a specific area and have consistent dimensions. After doing a bit of searching and experimenting, I found that you can do it nicely with Chrome Developer Tools. This is handy, because Developer Tools are a standard part of the browser. There’s no need for any add-ons.

Here’s how to set the dimensions of the inner window (viewport) in Chrome.

In short

  1. Open Chrome Developer Tools.
  2. Click the Toggle Device Mode option near top left of the developer tools section.
  3. Choose Responsive from the dropdown menu at the top of the screen.
  4. Edit the dimensions, which are also at the top of screen, right next to the dropdown.

The longer version

The screenshots show Chrome version 49.0.2623.110 m.

1. Open Chrome Developer Tools.

Press Option+Command+J on a Mac, or Ctrl+Shift+J on Windows, or open Chrome’s hamburger menu and choose More Tools > Developer Tools:

Chrome Developer Tools

The Chrome Developer Tools panel opens in your browser. By default, it opens either at the right-hand side or at the bottom of your browser window. It can also open as an independent window. I have mine set to open at the bottom.

2. Click the Toggle Device Mode option near top left of the developer tools section.

The icon for Toggle Device Mode looks like a mobile device snuggling up to a larger screen.

Chrome Developer Tools

3. Choose Responsive from the dropdown menu at the top of the screen.

When you’re in “toggle device” mode, a dropdown menu and editable screen dimensions appear at the top of the window. Make sure the dropdown menu is set to Responsive.

Chrome Developer Tools

4. Edit the dimensions, which are also at the top of screen.

The dimensions are editable when the dropdown is set to “Responsive.” You can also set the relative size (100% in the screenshot).

Chrome Developer Tools

That’s it. Happy screenshotting!

Where does Screeny put the recorded video or image file?

I’ve been experimenting with Screeny by Daeo Corp. Software, for recording screencasts on a Mac. It works well, but it took me ages to figure out where the app saves the movie or image files.

Here’s the answer: Screeny creates a “Screeny” directory inside your “Movies” directory, and puts the files there. They’re .mov files.

~/Movies/Screeny

​Here’s an example file name:

Screeny Video 26 Mar 2016, 5.47.45 AM.mov

​Here’s what the directory looks like in Finder:

Where Screeny puts its movie files

Screeny puts the files in that directory as soon as you stop recording. There’s no way to change the default location of the files.

​What about single screenshots? Screeny puts those into a Screeny directory in your “Pictures” directory:

~/Pictures/Screeny​

​Example file name:

Screeny Shot 26 Mar 2016, 6.09.59 AM.png​

I hope this helps you find your screencasts.:)

Tweaking screenshots without an image editor

A technical writer’s nightmare! You know that feeling you get when you’re taking screenshots and something happens to mess up your scenario. You can’t go back. You can never reproduce that screenshot again. “You silly Galah,” you say to yourself, before heading out for a glass of strong hot chocolate.

There are other reasons why you may want to change the data on a screenshot. Maybe you need to remove your name, other identification or private data. Maybe you want to remove the word “beta” from the software version number.

One way to fix the data is to take the screenshot anyway, then tweak it in an image editor. But that’s so cumbersome. If only you could tweak the text before taking the screenshot!

Well, you can. Technical writers rejoice!

Enter Firefox Web Developer

Web Developer is a Firefox add-on developed by Chris Pederick. Its website says that it also works in Google Chrome. When you install the add-on into Firefox, you get a new toolbar across the top of the browser window. It offers a number of very cool options. Here is just part of the toolbar, with the “Miscellaneous” option expanded.

Tweaking screenshots before you take them

Web Developer toolbar

It’s that “Edit HTML” option that’s useful for tweaking screenshots before we even take them.

Take a look at the page below. It says that the last editor of the page was one Sarah Maddox.

Tweaking screenshots without an image editor

The page untouched

Let’s assume that my scenario demands an editor named Beetlejuice. I open Web Developer’s “Miscellaneous” menu and choose “Edit HTML”.

Tweaking screenshots without an image editor

Choosing the "Edit HTML" option

The Web Developer panel opens at the bottom of the window. I search for the text “Sarah”.

Tweaking screenshots without an image editor

Searching for the text to replace

Then I type in my replacement text, and it appears on the page as I type. Magic: the last editor of the page is now Beetlejuice.

Tweaking screenshots without an image editor

Beetlejuice is now the last editor

When I refresh the page, it will return to its proper state. The change is only in my browser, not on the server and not visible to others who view the page on their computers.

Firebug and others

Firebug is another Firefox add-on that will do the trick. It is a little more heavyweight than Web Developer, and can slow down the response from the websites. On the other hand, I found it easier to get a screenshot of the entire window, including my changes, when using Firebug. In Web Developer, my changes disappeared each time I closed the HTML panel.

To use Firebug:

  1. Install the Firebug add-on into Firefox.
  2. Click the little bug at bottom right of the window. The Firebug panel opens at the bottom of the browser window.
  3. Click the pointer icon, second from the left at the top of the Firebug panel.
  4. Move your mouse pointer across your screen. Firebug will draw lines to highlight the various UI elements. Click when it highlights the bit you need to change.
  5. Make your change to the HMTL in the Firebug window.
  6. Take your screenshot.
  7. Click the bug to close the Firebug panel.
  8. Refresh the page. Firebug only changes what the browser displays.

I’m sure there are more tools that can do the same thing in Firefox, as well as in Internet Explorer and other browsers.

Food for thought

Hmm. Thinking of the wider implications: Anyone can write anything on a website, take a screenshot, and make it look as if the website owner wrote it.:)

You silly Galah!

Tweaking screenshots before you take them

A Galah near Sydney, Australia

“You silly Galah!” Australians say that, usually with affection, when someone does something stupid. I wonder how the expression arose. Why would you ever call something silly, when it’s so lovely?

Follow

Get every new post delivered to your Inbox.

Join 1,690 other followers

%d bloggers like this: