Developer

Customize Chrome with these four web development extensions

Ryan Boudreaux shares four of the Chrome extensions he uses in his web development work, and offers tips on managing extensions.

Google Chrome extensions add extra features and functionality to your favorite browser. In this article, I provide a brief explanation about what extensions are, what makes them run, and how to add and manage them. I also highlight extensions that assist me in my web development on a regular basis and that I like to use in my Chrome installation.

What are extensions?

Chrome extensions are tiny applications that modify the way Chrome runs on your desktop, and are typically written with web technologies such as HTML, HTML5, JavaScript, and CSS3. Extensions allow you to customize your Chrome browser with features you like and omit those that you have little or no interest in using.

You can download extensions from the Chrome Web Store through the Extensions gallery. Extensions range in topics from categories such as Accessibility, News and Weather, Productivity, Search Tools, and Sports. 

Managing your extensions

There are several ways to manage your installed extensions, including organizing them in the browser toolbar, adjusting your extensions options, and disabling extensions depending on your browsing activity or projects.

To open the Extensions page from Chrome, click the Chrome menu bar on the top right of the browser toolbar, select Tools, and then select Extensions (Figure A).

Figure A

ChromeExtensions_FigA_092313.gif

The Extensions page is now displayed. Figure B shows an example from my implementation.

Figure B

ChromeExtensions_FigB_092313.gif

See an enlarged view of Figure B.

You can also sync your extensions across multiple computers; however, this requires you to log in to your Google account. This practice is not recommended for public or untrusted computers since a copy of your Google data is stored locally and can be accessed by other people using the same computer. One workaround for this security concern is to delete your user from the computer once you're finished; the instructions for this task are part of the how-to for managing multiple users on Chrome.

Four Chrome extensions I use for web development

Responsive Inspector allows you to inspect any media queries that are included in the web page in the current browsing tab. For more details, read my TechRepublic article, Chrome add-on Responsive Inspector lets you preview media queries (Figure C).

Figure C

ChromeExtensions_FigC_092313.gif

Web Developer adds a toolbar button and is the official Web Developer extension for Firefox. The extension allows you to analyze web pages, layouts, disable functions, change cookie settings, disable and modify CSS settings, and more (Figure D).

Figure D

ChromeExtensions_FigD_092313.gif

PerfectPixel allows you to put semi-transparent layered image overlays over the top of the developed HTML and perform per pixel comparisons between the layers and the live web page. The sample screen capture below displays an image set as a layer and being dragged into place for a pixel comparison (Figure E).

Figure E

ChromeExtensions_FigE_092313.gif

Adobe Edge Inspect CC allows you to view web pages from your desktop and share it while synced across multiple mobile devices. It is especially useful for testing web pages on various devices from one browser tab in Chrome (Figure F). (Read: Test your website on mobile devices with Adobe Edge Inspect CC and Use the Adobe Edge Inspect CC testing tool)

Figure F

ChromeExtensions_FigF_092313.gif

Tell us in the discussion which Chrome extensions are your favorites.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks