10 Handy Chrome Extensions for Web Designers and Developers
Johnny Lee
|
|
Google Chrome is one of the best and most popular web browsers out there. It’s quick and easy to start up from your desktop, loads web pages in a snap, and runs even the most complex web applications fast. Chrome has a clean, simple, and streamlined browser window. It also comes with a number of web developer and web designer friendly extensions, catering to the needs of those who want to give Chrome a shot.
In today’s roundup, we’re going to highlight some of the best and most useful Chrome extensions that are especially made with web developers and designers in mind. These tools will simplify the workflow and will aid you in your development and design tasks without too much hassle.
Enjoy!
Chrome Logger
Chrome Logger is a Chrome extension for debugging server-side applications in the Chrome console.
Speed Tracer (by Google)
This Chrome extension is a tool that will help you identify and fix performance problems in your web apps. It visualizes metrics that are taken from low-level instrumentation points inside the browser, and analyze them as your app runs. With this tool, you can also get a better picture of where time is being spent in your app.
CSS Shapes Editor
CSS Shapes Editor is an extension for Google Chrome. It’s an interactive editor for creating and adjusting CSS Shapes, and for overlapping the selected element.
Event Spy
This Chrome extension allows you to spy on the events that are listed in the application code, allowing you to easily dissect large web apps.
Zoom
Zoom, as the name suggests, allows you to zoom in or out on web content using the zoom button, for a more comfortable reading experience.
Snoopy
This bookmarklet is used for “snooping” on web pages, hence the name. It’s ideal for mobile browsers (i.e. Mobile Safari on the iPad), where you can’t view-source to poke around under the hood of websites to see how they’re built. You’ll find it useful for your desktop browser, as well. Additionally, it provides an overlay that features information that the bookmarklet can “sniff” out of the page, like the doc type, what JavaScript libraries are used in the page, what analytics, what font embedding technique is used, and more. It also gives you the ability to view the raw and/or generated source of the page.
Dimensions
Dimensions is a Chrome extension that’s ideal for those who are looking to measure screen dimensions. With it, you can measure between elements like images, input fields, buttons, videos, GIFs, text, and icons. For the best experience, you can set a keyboard shortcut in the Chrome setting at the end of the extensions list so you can quickly enable and disable Dimensions.
ruul.Screen Ruler
This incredibly simple on-screen ruler is ideal for lining up and measuring type, line height, strokes, and just about anything on the Web.
Resizer
Resizer lets you quickly change the dimensions of a web page to test for responsiveness. It enables you to change a website to common dimensions, like in mobile devices, tablets, and desktop computers.
DomFlags
This Chrome extension offers a whole new way to interact with the DevTools. Now, you can create keyboard shortcuts to DOM elements! This extension are like bookmarks for navigating the DOM tree. They help you track and navigate to important elements, so styling is easy. It comes with auto-inspect features that will help you re-engage elements with pinpoint accuracy to speed your DevTools flow
