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.

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.

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”.

Choosing the "Edit HTML" option

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

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.

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!

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?