Whether you prefer to use Chrome or not, building anything for the web requires you to consider it. There are other browsers available, but Google Chrome is still used by a lot of the people you are building for. So, whether it’s a website, a web app, or something else, it’s a good idea to make sure you’re taking performance and user experience on Chrome into account as a web developer. Here are a few useful Chrome extensions for web developers to consider:
- Web Developer by Chris Pederick
- Chrome Developer Tools For Page Rulers
- Measure It
- ColorZilla
- WhatFont
- WAVE Evaluation Tool
- Talend API Tester
- Lorem Ipsum Generator
1. Web Developer by Chris Pederick
The Web Developer extension will add a toolbar button to your Chrome browser with various web developer tools. It is a good place to start if you don’t already have your preferred suite of tools and extensions for Chrome. And, if you love the Web Developer extension for Firefox, then you definitely need this one. It’s the same thing and built by the same person, except it’s built to work on Chrome.
2. Chrome Developer Tools For Page Rulers
Although not technically an extension, you don’t want to ignore the Developer Tools built into Chrome. Between page speed and performance testing with Lighthouse and all the other built-in tools available, you can do a lot natively within Chrome.
When determining the pixel height and width of an element, you have a few native options in Chrome. You can always right-click and Inspect to inspect the element to see pixel height and width. You can also use the built-in Chrome Developer Tools to see rulers via the Command Menu, Settings Menu, and Device Mode.
Showing Rulers via the Command Menu
The fastest way to show rulers in Chrome is to use the Command Menu:
- Press F12 while in a Chrome browser to open Developer Tools.
- Press Ctrl+Shift+P on PC or Cmd+Shift+P on Mac to bring up the Command Menu.
- Type Show rulers on hover.
- Press Enter or click Show rulers on hover in the drop-down with suggested commands.
Showing Rulers via the Settings Menu
You can also adjust your preferences in the Developer Tools Settings Menu to show page rulers:
- Open Developer Tools.
- Click on the Gear Icon to enter Settings in the top-right of the console.
- Go to Preferences.
- Under Elements, check the box for Show rulers on hover.
Showing Rulers in Device Mode
You can also show rulers in Device Mode:
- When using the Device Toolbar, open the options menu by clicking the three dots in the upper-right corner.
- Select Show rulers.
3. Measure It
If you aren’t getting what you want from the built-in Developer Tools in Chrome and want to explore another option for measuring pixel widths and heights, distances, and positions for elements on web pages, consider trying the Measure It extension.
With easy click and drag selection for pixel-perfect measurement, you can get sizing and positioning where you need it to be, and edit your CSS less in order to get there. In distance measurement mode, you can see measurements for distance, offset, and angle between two points on a web page. You can also use built-in keyboard shortcuts to easily switch between box and distance measurement modes.
4. ColorZilla
If you want to try an eye dropper and color picker tool aside from what is built into Chrome Developer Tools, consider playing around with ColorZilla. Equipped with an easy-to-use color picker along with a suite of other color-related tools, you can get a color reading from any point in the browser, play around with hues, saturations, and values, identify a color palette for a website, and more.
5. WhatFont
Want to easily identify a font on a web page without having to dig into the code? Or, just love typography? The WhatFont Chrome extension can help you. Simply hover over text to see the font name label pop up. You can also click on an element to see the styles that are applied. This can help you discover fonts and styles you like on other web pages and use fonts effectively in web design in your own creations.
6. WAVE Evaluation Tool
Accessibility matters to anything you’re making publicly available on the web. The WAVE Evaluation Tool makes it easy for you to test overall accessibility and the accessibility of specific web content. You can use this tool to make sure what’s on the web complies with current accessibility standards per Web Accessibility Guidelines, ADA, and Section 508 compliance. You can also use it to identify ways to further improve accessibility on your website or web app beyond the minimum requirements for a better user experience.
7. Talend API Tester
Effective communication and connection between platforms or software are the foundations of a solid integration. APIs are the keys to achieving that, and being able to test API integrations is important. The Talend API Tester Chrome extension can help you there. Talend AI Tester used to be known as Restlet Client, and it’s like having Postman in your browser for testing APIs. Even with the free edition, you can visually interact with and test SOAP, REST, and HTTP APIs.
You can also get granular with sending and inspecting requests and validating responses. Handling complex HTTP requests is not an issue. Plus, security and authentication are fully supported. You can also insert variables to make requests dynamic. There are a lot of ways to customize tests to achieve what you need. You can even use environment variables to make your tests more reusable.
8. Lorem Ipsum Generator
Lorem ipsum is the dummy text used as a placeholder. It’s originally from the printing and typesetting industry and has been around since the 1500s. Even though there are plenty of ways to play with it, lorem ipsum is still a web standard for placeholder text. A fantastic lorem ipsum generator is https://lipsum.com/.
It’s a website and not a Chrome extension, but it’s well worth bookmarking and makes adding another extension to your browser unnecessary. Using this site, you can generate lorem ipsum starting with the standard “Lorem ipsum dolor sit amet…” or not, designate how much you want to generate, and choose the format you want, including:
- Paragraphs
- Words
- Bytes
- Lists
These are just a few useful Chrome extensions for web developers. The mix of tools that are right for you will depend on what you’re doing, what you need, and the specific functions and user experiences you prefer.