F12 for website developer tools & device modes

Modern versions of Firefox, Chrome, and Internet Explorer each come with powerful tools for website development. In your browser of choice, hit F12 on your keyboard to toggle them on and off.

Screen shot of a website with Chrome DevTools & Device Emulation

Each browser offers variations on these tools, but these common utilities are my favorites:

A code inspector for viewing the page's HTML and CSS code and making on-the-fly edits to what you see onscreen. Edits made from the code inspector aren't saved anywhere—they only last until you refresh the page. Use it for: debugging tricky formatting, experimenting with new text or styling before actually making live edits.

A network tab reporting how quickly every component of the page loads, including total load speed and weight. Use it for: figuring out exactly which files may be slowing down the page.

Device modes for seeing how a web page looks on screens of varying sizes (with resolution presets for common devices). Use it for: checking how pages behave on small screens when you don't have access to the latest phones and tablets.

If you hit F11 by mistake, something scary happens—all your toolbars disappear! Your browser has gone full-screen. Take a deep breath, and hit F11 again to toggle full-screen mode off.

More about developer tools:

Browser plug-ins, a thing of the past


Cat_PluginsA browser plug-in (or plugin) is extra software installed on a PC that allows a browser to display additional content it was not originally designed to display.  Some examples of popular plug-ins are Flash Player, Java and Silverlight.  Plug-ins were created because, at the time, browsers were fairly immature and browser development was not happening fast enough, if at all.  So this created big opportunities for plug-in developers to create software that would expand the capabilities of browsers.

Now, let's talk about what the problems are with plug-ins.  The biggest problem that I see is  the fact that they are not very secure.  There have been numerous attacks through either Flash or Java and since everyone has the same plug-in an attack works across every browser and operating system.  Other problems include not working on different operating systems as they are designed to only work on certain ones or they can be be very unstable which can cause your browser to crash or just behave badly.  These are the reasons why Mozilla announced in 2013 that they would changing the way Firefox loads third party plug-ins such as Flash, Java and Silverlight. Google has also announced their three-step approach to plug-in elimination:

  1. In January 2015 they began blocking plug-ins by default.
  2. In April 2015 they will begin to disable Chrome's ability to run plug-ins at all, unless a user specifically enables it by setting a flag in Chrome's technical preferences.
  3. In September 2015, they will begin to completely remove all ability to run plug-ins from Chrome.

So now you're probably wondering, "If they're going away, what's going to be replacing them?".  The answer is that we are in a much healthier environment of rapid browser development (Firefox and Chrome both release a new browser version every 6-weeks) and web standards.  Many of the features plug-ins implemented are now being introduced in the form of built-in browser features.  Don't feel bad that plug-ins are going away -- they had their time and now like everything else on the Internet it's time for a change.

Duplicating Browser Tabs

Have you ever needed to duplicate a tab while browsing in your favorite browser?  I know I have and in the past what I would do is copy the web address, open a new tab and then paste the web address into the new tab.  This always seemed SO cumbersome and I thought: "There must be an easy, quicker, better way to do this!" So I went searching and found that there IS an easy way to duplicate a browser tab and it works the same in IE, Firefox and Chrome.  Here are the steps:

  1. Press Alt+D to move the focus to the location bar.
  2. While still holding down the Alt key press the Enter key.
  3. The current tab has now been duplicated.

That's it.  Easy as could be.

Office 365 Bookmarks Toolbar Shortcuts

The Office 365 rollout to the libraries has been going great so far and we are looking forward to other libraries coming aboard in the next couple months.  One topic that I’d like to address is the correct way to create an Office 365 login screen shortcut for your browser’s Bookmarks Toolbar.  We have had a few calls come in about this issue.

For most sites, the easiest way to make the shortcut is to open your browser, go to the website, then drag the icon (or lock) to left of the URL in the address bar to your bookmarks toolbar.   Unfortunately, if you do this with the mail.scls.info URL, your shortcut will end up only working temporarily.  After you go to mail.scls.info, your browser actually redirects you to a session-specific URL that only works for a short amount of time. Bookmark

Here is the correct way to make Bookmarks Toolbar shortcuts for each browser:


  1. Open Firefox
  2. Right-click an empty area of your Bookmarks Toolbar
  3. Click New Bookmark…
  4. Name it something like Office 365 Login
  5. For the location, simply enter mail.scls.info
  6. Click Add


  1. Open Chrome
  2. Right-click an empty area of your Bookmarks Toolbar
  3. Click Add Page…
  4. For the Name, delete what is already there and enter something like Office 365 Login
  5. For the URL, clear out what is there and enter mail.scls.info
  6. Click Save

Internet Explorer

  1. Open Internet Explorer
  2. Go to mail.scls.info
  3. Drag the icon to the left of the URL to your Bookmarks Toolbar
  4. Right-click the new shortcut
  5. Select Properties
  6. Delete the URL that is listed and simply enter mail.scls.info
  7. Click OK

Easy way to clear a browser's cache

Do you want a quick and easy way to clear a browser's cache?  Well here it is:

  1. With the browser open, press Ctrl+Shift+Del
  2. Select what you want to delete (i.e. cookies, cache, etc.)
  3. Click the appropriate button at the bottom of the window to confirm the delete

Now isn't that easy.  The best part is that these steps work for IE, Firefox and Chrome.

HTML5, CSS3 and You!

'<embed>' photo (c) 2007, Luis - license: http://creativecommons.org/licenses/by/2.0/

So, how is your personal relationship to HTML5 and CSS3 going? Did you even know that you had one? You do now or soon will, if your library continues to rely on Windows XP for staff or patron workstations.

Perhaps we should start with the basics. What are HTML5 and CSS3? Technically, these are website content format standards that are maturing but are still under development. They represent a large number of feature enhancements over HTML4 and CSS2; too many to get into here, and probably you don't need (or want) to care about all the details.

What's important for you to understand is that some of these new features are highly, highly desirable to website developers. This is why Google Apps (among other sites) ended their support for Internet Explorer 6 in 2010, and then ended their support for IE7 (and Firefox 3.x and other browsers) in 2011. Can you guess the fate of IE8? Hot tip: don't bet on its longevity...

Officially, Microsoft is continuing to support Windows XP SP3 and IE8 until April 8, 2014. However, there will be no new versions of IE for the XP platform; IE8 is all you get. The good news is that IE8 does support some HTML5 features. The bad news is that some sites have already dropped support for IE8 because its implementation of HTML5/CSS3 is just too primitive or incomplete.

The world is not ending, of course, at least not on account of IE8. If your budget says that XP stations will be operating in your library for some time to come, then there is always Firefox. SCLS will continue to update Firefox on XP stations for as long as we are able to, and Firefox on XP is fully capable of handling websites that demand a lot from HTML5 and CSS3. You just need to be aware that as time goes on, IE8 will become less and less useful (and in some cases impossible to use) on evolving websites.

Want to know more about what's missing from IE8 (and for that matter, from IE9 on Windows 7)? Check out the fun interactive chart at http://html5readiness.com/. Hover your mouse pointer over any spoke on the chart wheel to see the name of the new feature that it represents, and note how many spokes are missing labels indicating IE8 and IE9 support. Want to replay the "browser wars" of recent years? Dial back the chart to yesteryear by clicking on the tags above it.

Zoom, zoom, zoooooooooom

Zoom in MS Office
Did you know you can quickly zoom in or out of a document (Word), presentation (PowerPoint), or worksheet (Excel)? 


  • On the status bar in the lower right, click the Zoom slider
  • Slide to the percentage zoom setting that you want

Zoom in IE 


Want to quickly zoom in IE?
<--- There's a zoom menu on the status bar...

And if you prefer keyboard commands, don't forget

  • Ctrl +  (zoom in)
  • Ctrl -  (zoom out)
  • They work in most browsers!

    Viewing web pages in alternate browsers

    There have been previous TechBits articles that mentioned the IE View extension to Firefox. IE View is handy if you need to compare the view of a page in FF to the same view in IE, and it's essential if you use some site that (even well into the 21st century) still requires its users to have Internet Explorer. If you rely on such a site, you can configure IE View to always launch IE for links to that funky application.

    But if you're a web site developer or tester, IE View may not be all that you want. You may also want to compare the view of a web page in Chrome, Opera, and Safari (or even Amaya, Epiphany, Konqueror, Maxthon, Lobo and...). In short, you may want the Open With extension for Firefox.

    After you have installed Open With, your View menu should get populated with an "Open With <browser name>" item for each other browser that is detected on your PC. A similar menu item can optionally appear in several other contexts as well. To set up Open With for various contexts, pull down the FF Tools menu and choose Add-ons, then select Extensions and click the Options button for the Open With extension. A new tab will open showing the Open With settings that you can tune for the View menu, context menu, tabs and the tool bar.

    What about different versions of the same browser? You want to test FF 3.6 and FF 7, and IE 8 and IE 9, right? Sadly, this is often not possible without multiple PCs. Even in cases where it is possible to have two versions of the same browser on one machine, it tends to get a bit funky to manage those installations. Depending on your OS license and hardware capacity, you may benefit from running "another PC" inside a VirtualBox or another virtualization platform, but that level of complexity is far beyond what I can cover in a short blog posting.

    All about CAPTCHAs

    More stupid captchasphoto © 2010 Chris Foley | more info (via: Wylio)

    Have you ever wondered about those crazy sets of letters and numbers that some websites prompt you to enter when you fill out a form?

    That's a CAPTCHA, and MakeUseOf.com has written a lovely article covering everything you might want to know about CAPTCHAs but were afraid to ask. I learned some fascinating things that I didn't even know I wanted to know!


    I am reminded...

    Day 266 - Embarrassedphoto © 2009 Ken Wilcox | more info (via: Wylio)

    Yesterday's post included a link to an article reviewing some of the most popular URL shorteners.  Unfortunately, the site hosting the article was dishing out some nasties this morning as identified today by the antivirus software used on SCLS PCs and also by Google  (neither of these flagged the site yesterday when I was composing my post, and the site appears to be cleaned up again and Google is no longer reporting it as malicious).  

    Other than being very embarrassed about linking to a site that was clearly having some issues this morning, I am also reminded of some things by this:

    2. Sometimes even links where you know where you're going may be harmful
    3. Always be cautious when navigating the internet
    4. Consider other actions/products that may help to identify harmful websites: