Chrome Inspector (addons etc.)

https://premium.wpmudev.org/blog/the-17-best-google-chrome-extensions-for-web-developers/

The 17 Best Google Chrome Extensions for Web Developers

– January 23, 2018

Though it may seem like forever, Google Chrome has only been around since 2008. Regardless, in its 10 short years, Google Chrome has become the most used and most popular web browser of all web browsers available.

Although Chrome hasn’t ever matched (or bested) the same popularity Internet Explorer (IE) once enjoyed in the early days of the internet (IE had an upwards of 90% market share then, Chrome has 53.9%), it still beats out most of the other browsers on the market by a mile. And even those who once hitched their (digital) wagons to IE have since switched to Google Chrome because it is fast, simple to use, and chock full of features and add-ons like extensions and themes.

As a web developer, you want to be sure that what you’ve designed is able to adapt to any device or browser. As a start, Google Chrome (the most used browser), should be at the top of that list. But besides using Chrome as part of your browser testing, it’s also helpful in terms of the tools (or extensions) that were specifically created for web developers.

Here are some of the best Google Chrome extensions for web developers.

General Tool: Web Developer

With almost a million users and a 4.5-star rating, it’s safe to say that Web Developer is one of Google Chrome’s best extensions for web developers. Developed by Chris Pedrick, this extension adds a little toolbar with various web developer tools pertaining to images, information, resizing, forms, and much more.

Tech Stacks: Wappalyzer

A tool developed by Elbert Alias in 2009, Wappalyzer is a Google Chrome extension that allows the developer to identify the various technologies that make up the back end of a website.

Wappalyzer is an open-source and cross-platform utility that is able to detect over 1000 technologies, including content management systems, ecommerce platforms, web frameworks, server software, analytics tools and more.

Responsive Design: Window Resizer

Thanks to Google’s mobile-first index initiative, it’s more important now than ever for developers to test websites for responsive design—this is where Window Resizer Google Chrome extension comes in.

This Google Chrome extension resizes the browser window so that you can test your responsive design based on various resolutions. The most common screen sizes are available (for laptop, desktop, and mobile), but you can also enter in your own customized window sizes.

Page/Element Dimensions: Page Ruler

The Page Ruler Google Chrome extension renders a ruler on the web page, providing you with the width, height, and position (top, bottom, left, and right) of any page element you want to measure. You can drag the edges of the ruler to resize it, or use the arrow keys to move or resize it.

Wireframing: Instant Wireframe

The Instant Wireframe tool allows you to view web pages (either local or online) in a different perspective, by putting a wireframe overlay on top of them. It’s an excellent way to break down page elements more simplistically when looking for design inspiration for a new project.

Code Snapshots: Marmoset

The Marmoset Google Chrome extension makes it possible to create beautiful code snapshots, in just seconds. Though it may seem a little goofy compared to some of the other options on this list, it’s useful for creating graphical representations of your work for use on social media, in your portfolio, and so on.

Broken Links: Check My Links

This Google Chrome extension saves you the effort of manually sorting through your links to find those that are broken. This extension works by automatically finding all the links on a given web page and checks them for you, highlighting which ones are valid and which ones are broken.

Before installing another Chrome extension, note that this functionality may already be included as part of an SEO tool or WordPress plugin you already use.

Font Identification: WhatFont

The WhatFont Google Chrome extension helps developers easily identify fonts used on a webpage. Once installed, users only have to hover over the font to determine what it is, unlike other similar programs (like WhatTheFont) that can be slightly more complicated to use.

Color Picker: ColorZilla

With over 5 million downloads and 1.3 million users, ColorZilla is one of the most popular Google Chrome extensions available. In essence, it’s just like the aforementioned WhatFont (but for color)—all you have to do is hover over the color to generate a color code. ColorZilla features a multitude of color tools for just about any needs you may have, including: an eyedropper, color picker, palette viewer, and a gradient generator.

Best Practices Audit: Web Developer Checklist

One of the most helpful tools for developers, the Web Developer Google Chrome extension analyses and checks your webpage for any major violations of web design best practices in terms of SEO, usability, accessibility, and performance (page speed)—among others.

View Source Code: Code Cola

Code Cola allows you to view the source code of the project you’re working on, at the same time, functioning as a CSS editor so that you can easily edit and share CSS properties.

CSS Properties Viewer: CSSViewer

Created by Nicolas Huon, CSSViewer is a simple CSS properties viewer that provides the CSS information a web developer needs, quickly. The tool provides a floating panel that reports on the identity of the section that the mouse hovers over, including font, text, color, background, box, positioning, and effects attributes.

Check JSON Code: JSONView

The JSONView Google Chrome extension allows developers to view documents on the web browser (similar to XML files) instead of being downloaded or rendered as text. The document is formatted and highlighted. Arrays and objects can be collapsed or expanded.

This tool allows you to check JSON code on both your site and others on the web, and includes the ability to click on links and complete basic validation. Although it was originally created for Firefox, it has been made to work with Google Chrome.

Google Analytics Debugger

This Google Chrome extension provides useful information regarding the JavaScript console by enabling the debug version of the Google Analytics Javascript. The resulting messages include error messages and warnings that can tell you if your analytics tracking code is set up incorrectly, providing a detailed breakdown of each tracking beacon sent to Google Analytics.

Managing MySQL Databases: MySQL Admin

Clockwork provides a set of development tools for PHP developers. It provides a new panel with all required information for debugging and profiling PHP scripts, including request data, application log, database queries, routes, and the visualization of application runtime.

Clockwork uses a server-side component that gathers all relevant data and easily integrates with any PHP project. It includes support for Laravel, Slim 2, and CodeIgniter 2.1 based applications.

PHP Debugging: XDebug Helper

This Google Chrome extension helps with debugging, profiling, and tracing PHP code instead of struggling with POST/GET variables or cookies.

Best Google Chrome Extensions for Web Developers

Google Chrome is the preferred browser for most internet users nowadays because of its speed, simplicity, flexibility, and the availability of tools that include extensions and themes. Chrome developers have also done their part to come up with tools for web developers—ranging from the most basic and general design and development tools to more specific tools for HTML, PHP, CSS, and more.

WordPress developers, check out the top WordPress Google Chrome extensions for even more Chrome extension options. The hardest part will be paring them down to only the most important so that they don’t take over your entire Google Chrome browser bar!

Free Video
Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch)
Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.