Nuttige Browser extensions voor Webdevelopers

Moeilijkheidsgraad

Voor een webdesigner zijn er tal van browser extentions die het maken en/of inspecteren van een website kunnen vergemakkelijken.

De meesten onder ons kennen de "element inspector" van Chrome en Firefox, maar er zijn er nog een aantal interessante .

Hieronder bekijken we in het kort enkele hiervan.

Element inspector
Web Developer: Voegt een werkbalkknop toe met verschillende webontwikkeltools.
Klik met de rechtermuisknop op uw webpagina (specifiek op de div of het element waarvan de CSS zich misdraagt)
Selecteer Inspect Element. Deze extention is standaard in Chrome en Firefox
Het zou een venster onderaan de browser moeten openen dat er een beetje als volgt uitziet:

 

inspector
Web Developer

De Web Developer-extensie voegt verschillende webontwikkeltools toe aan een browser. De extensie is beschikbaar voor Chrome Firefox en Opera en werkt op elk platform dat deze browsers ondersteunen, inclusief Windows, macOS en Linux.

Deze extension dient u te installeren. (Chrome Firefox en Opera )

web developer

 

FontFace Ninja

Fontface Ninja is een gratis browserextensie waarmee je alle lettertypen op elke website kunt inspecteren, proberen, kopen en van een bladwijzer kunt voorzien.

Deze extension dient u te installeren. (open FontFace Ninja in uw browser en installeer).

FontFace Ninja

 

CSSViewer

CSSViewer is een eenvoudige CSS-eigenschappenviewer voor Chrome en Firefox.

Hoe te gebruiken :

Om CSSViewer in te schakelen, klikt u eenvoudig op het werkbalkpictogram en zweeft u vervolgens over elk element dat u wilt inspecteren op de huidige pagina.

Deze extension dient u te installeren. (Chrome, Firefox)

css viewer
Width and Height Display

Deze extensie geeft de binnenbreedte en hoogte van het scherm weer.

Deze extension dient u te installeren. (Chrome)

width and height display

 

Lorem Ipsum Generator

Voegt een snelle en eenvoudige manier toe om 'Lorem Ipsum' in uw klembord te genereren.
Deze extensie biedt maximaal 4 alinea's standaardtekst ("Lorem ipsum") op uw klembord.
Uitvoer kan worden ingesteld als HTML-opgemaakt of als platte tekst.

Deze extension dient u te installeren. (Chrome, Firefox)

Lorem Ipsum generator

 

Mobile/Responsive Web Design Tester


Test meerdere apparaten tegelijkertijd!
Met de extensie Mobile / Responsive Web Design Tester kunnen webontwerpers en -ontwikkelaars hun webpagina's testen op gangbare mobiele apparaten, phablet- en tabletapparaten door de user-agent en de schermresolutie te emuleren. Uitstekend voor het testen van responsieve webontwerpen. Schakel eenvoudig tussen de portret- en landschapsmodus en test meerdere mobiele apparaten tegelijkertijd!

Zeer nuttig wanneer uw site in ontwikkeling is en het testen op echte apparaten kan moeilijk zijn.

Hoewel het gebruik van functiedetectie een goede praktijk is, zijn er nog steeds situaties waarin u een user-agent voor apparaten moet detecteren. De Mobile / Responsive Web Design Tester is uniek omdat het niet alleen apparaatresolutie emuleert, maar ook de user-agent van het apparaat.

Deze extension dient u te installeren. (Chrome)

 

devices