Useful Browser extensions for Web developers

Rating

For a web designer there are numerous browser extentions that can facilitate the creation and / or inspection of a website.

Most of us know the "element inspector" from Chrome and Firefox, but there are still some interesting ones.

Below we briefly review some of these.

Element inspector
Web Developer: Adds a toolbar button with various web developer tools.
Right-click on your webpage (specifically on the div or element that the CSS misbehaves)
Select Inspect Element. This extension is standard in Chrome and Firefox
It should open a window at the bottom of the browser that looks a bit like this:

 

inspector
Web Developer

The Web Developer extension adds various web development tools to a browser. The extension is available for Chrome, Firefox and Opera and works on every platform that these browsers support, including Windows, macOS and Linux.

You must install this extension.
(Chrome Firefox en Opera )

web developer

 

FontFace Ninja

Fontface Ninja is a free browser extension that allows you to inspect, try, buy and bookmark all fonts on each website.

You must install this extension.
(open FontFace Ninja in your browser and install ).

FontFace Ninja

 

CSSViewer

CSSViewer  is a simple CSS property viewer for Chrome and Firefox.
How to use :
To enable CSSViewer, simply click on the toolbar icon and then hover over each element that you want to inspect on the current page.
You must install this extension.
(Chrome, Firefox)

css viewer
Width and Height Display

 

This extension displays the inside width and height of the screen.

You must install this extension.
(Chrome)
width and height display

 

Lorem Ipsum Generator

Adds a quick and easy way to generate 'Lorem Ipsum' in your clipboard.
This extension provides a maximum of 4 paragraphs of standard text ("Lorem ipsum") on your clipboard.
Output can be set as HTML formatted or as plain text.

You must install this extension.
(Chrome, Firefox)

Lorem Ipsum generator

 

Mobile/Responsive Web Design Tester


Test multiple devices simultaneously!
With the extension Mobile / Responsive Web Design Tester, web designers and developers can test their web pages on common mobile devices, phablet and tablet devices by emulating the user agent and screen resolution. Excellent for testing responsive web designs. Easily switch between portrait and landscape mode and test multiple mobile devices simultaneously!

Very useful when your site is under development and testing on real devices can be difficult.

Although the use of function detection is a good practice, there are still situations where you need to detect a device user agent. The Mobile / Responsive Web Design Tester is unique because it not only emulates device resolution, but also the user agent of the device.

You must install this extension.
(Chrome)

 

devices