Als u een ontwerper bent die een aantal handige tools nodig heeft om uw webontwikkelingsprojecten te versnellen, samen te werken of te controleren, heeft de Chrome - extensie een groot aantal tools.

Deze lijst bevat enkele van de meest populaire - en sommigen beweren noodzakelijke - tools en Chrome-extensies^{(tools and Chrome extensions)} die elke gebruiker die ontwerpwerk doet, in zijn uitrustingstas zou moeten hebben.

1. DomVlaggen

DOM Flags is een eenvoudig te gebruiken Chrome- extensie die ontwikkelaars een nieuwe manier biedt om met browsertools te werken. Hiermee kunnen ontwikkelaars de taak van stylingelementen versnellen.

Met behulp van sneltoetsen voor elk element kunt u een bladwijzer maken voor uw navigatie.

We hebben allemaal de moeilijkheid ervaren bij het inspecteren van zeer gedetailleerde elementen, en het is gemakkelijk om te verdwalen.

Met DOM-vlaggen^{(DOM Flags)} kunt u stijlelementen volgen, inclusief een functie om componenten automatisch nauwkeurig te inspecteren. Dit zal op zijn beurt de workflow en implementatie van DevTools helpen versnellen.^(DevTools)

Met DOM Flags^{(DOM Flags)} kunt u wijzigingen volgen. En blijf gefocust op de elementen waarmee u werkt.

2. Sizzy

Sizzy geeft ontwerpers en ontwikkelaars een eenvoudige manier om hun sites in meerdere viewports te testen.

Sizzy biedt een eenvoudige manier om uw ontwerp in realtime te controleren. Het biedt een interactieve weergave van een willekeurig aantal apparaten en schermformaten. U kunt zelfs het toetsenbord van een apparaat simuleren en vervolgens schakelen tussen liggende en staande modus.

Als u een Chrome-^(Chrome) extensie installeert , wordt een knop aan uw werkbalk toegevoegd die, wanneer erop wordt geklikt, de huidige URL in het Sizzy- platform opent. De extensie blokkeert alle " x-frame-options "-headers, zodat u elke website online kunt bekijken.

Sizzy is een open source-project en je kunt de volledige code hier^(here) bekijken .

3. Controlebot

Checkbot kan uw site testen op beveiligingsproblemen en ook de laadsnelheid van uw webpagina controleren. Het zal ontwerpers een middel bieden om typische fouten te identificeren en verbeteringen aan te bevelen in sitebeveiliging, zoekmachine en sitesnelheid.

Met behulp van meer dan 50 best-practice-statistieken, zal het een website controleren op best-practice SEO , verbroken links, dubbele inhoud en meer. De tool valideert ook CSS , JS en HTML .

Checkbot pikt ontwerp- en codeerfouten in realtime op en bespaart u de moeite om terug te gaan en uw werk herhaaldelijk opnieuw te controleren.

Als u op zoek bent naar een tool van goede kwaliteit die kapotte paginalinks repareert, unieke inhoud en paginatitels garandeert en omleidingsketens elimineert, zou deze tool nuttig zijn.

Voor ontwerpers kan het u helpen uw CSS en JS te minimaliseren en aanbevelingen te geven over hoe u uw CSS kunt verkleinen en browsercaching kunt benutten.

4. GistBox Clipper

GistBox is een van de handigste Chrome -extensies voor webontwerpers.

GistBox kan een GitHub Gist maken van elk codeblok op de webpagina die u bekijkt.

In de rechterbovenhoek van een codeblok ziet u een kleine knop die, wanneer u erop drukt, een pop-up opent waarmee u de code in de Gist kunt opslaan .

U kunt met een rechter muisklik nieuwe Gists maken en codeblokken opslaan voor latere inspectie en gebruik.

Integratie met GitHub stelt ontwerpers en ontwikkelaars in staat codeblokken te verzamelen en te manipuleren of te categoriseren voor later gebruik. Dit maakt het een handige en efficiënte Chrome -extensietool.

5. ColorZilla

ColorZilla is een ongelooflijk handige Chrome - extensie voor het verzamelen van hexadecimale codes die kunnen worden getagd, gelabeld en gecategoriseerd voor individuele webontwerpprojecten.

Hiermee kunt u een pipettool selecteren die de kleur van elke webpagina extraheert en deze op het ColorZilla- klembord opslaat.

Hiermee kunt u snel kleurenpaletten ontwikkelen voor later gebruik en om ervoor te zorgen dat u consistent kleur gebruikt in webdesign en -ontwikkeling.

ColorZilla fungeert ook als een kleuranalysator en CSS - verloopbewerker, zodat u een afbeelding naar CSS kunt converteren .

6. Welk lettertype?

 Deze Chrome-extensie^{(Chrome Extension)} is een echte tijdsbesparing voor diegenen die hun favoriete lettertypen willen gebruiken en deze in hun eigen webontwerpproject willen opnemen.

Met de WhatFont Chrome-^{(WhatFont Chrome)} extensie kunnen ontwikkelaars bijna elk lettertype op elke webpagina snel analyseren en identificeren.

De extensie is goed ontwikkeld en in plaats van inspectietools te openen, werkt de extensie door met de muis over het lettertype te zwaaien.

Niet alleen dat, de extensie identificeert ook de service die wordt gebruikt om een ​​Pages went-lettertype aan te bieden en ondersteunt Google Font API en Typekit.^{(Google Font API and Typekit.)}

7. LightShot

LightShot is een snelle screenshot-tool waarmee u de hele of een deel van een pagina kunt vastleggen en deze kunt uploaden of downloaden of naar een externe bestemming kunt sturen.

Screenshots gemaakt door LightShot kunnen worden gebruikt en gedeeld op sociale media of worden afgedrukt.

U kunt aantekeningen maken en tekst, pijlen en meer toevoegen aan het geselecteerde gedeelte van het scherm. Maar misschien is een van de meest briljante kenmerken van deze eenvoudige tool voor webontwerpers dat door een afbeelding te selecteren, u vervolgens kunt doorgaan met een volledige Google -zoekopdracht voor vergelijkbare afbeeldingen online.

LightShot kan in meerdere talen worden geconfigureerd.

De extensie is geschreven in puur JavaScript en werkt ook voor Windows , Chromebook , Linux en Mac OS . Het is ook toegankelijk als desktoptoepassing,^{(desktop application)} waardoor het een uitstekende keuze is voor webontwerpers die afhankelijk zijn van meerdere apparaten.

8. Geweldige screenshot

Net als Lightshot is Awesome Screenshot een extensie voor het vastleggen van schermen en afbeeldingen.

Het verschilt echter op een aantal manieren van Lightshot . Awesome Screenshot kan worden geconfigureerd om al je screenshots te verbinden met je Google -drive.

Hiermee kunt u een screenshot maken van die elementen die u niet kunt zien om de hele pagina vast te leggen. Het heeft extra bewerkings- en annotatietools, komma's maken het mogelijk om bij te snijden en afbeeldingen te bewerken, allemaal binnen de extensie ... of met het gebruik van extra Awesome Screenshot-applicaties

U kunt de functies uitbreiden door ook de Chrome -toepassing voor desktop te installeren. De extensie maakt het ook mogelijk om video's vast te leggen en te delen, zodat u kunt samenwerken met andere ontwikkelaars of ontwerpers wanneer u aan een site werkt.

U kunt extra afbeeldingen aan een screenshot toevoegen, evenals blauwe of wissen van elementen die u liever niet aan anderen laat zien.

9. Cache wissen

De Chrome-extensie^{(Cache Chrome Extension)} Clear Cache is een snelle en eenvoudige tool waarmee u cookies en cache kunt wissen van de pagina die u bekijkt. Het maakt het niet meer nodig om naar de instellingenpagina van uw browser te navigeren om een ​​paar eenvoudige pagina-elementen te wissen.

Voor webontwerpers die meerdere bewerkingen uitvoeren en deze in realtime willen bekijken, is dit een uitstekende tool die veel van de frustratie van het kijken naar oude gegevens wegneemt.

Soms moet u uw cachegeheugen en cookies wissen, maar navigeren naar de Chrome- instellingen is vervelend. Met Clear Cache kunt u met één druk op de knop uw cache wissen, evenals algemene of lokale cookies.

Met Cache^(Cache) wissen kunt u configureren welke elementen u van de pagina wilt wissen. Variabelen^(Variables) zijn onder meer Cash , downloads, alle systemen, formuliergegevens, at Cash , indexdatabase, plug-ingegevens, wachtwoorden en meer.

10. Webontwikkelaar Google Chrome-extensie

Met de Google Chrome-extensie voor webontwikkelaars^{(Web Developer Google Chrome Extension)} kunnen ontwikkelaars en ontwerpers hun webpagina's eenvoudig controleren, analyseren en controleren op eventuele schendingen van best practice-ontwerp, codering, bruikbaarheid en zoekmachineoptimalisatie.

Het is een geweldige alles-in-één tool die niet zwaar is om door onze bronnen te bladeren, maar toch een heleboel informatie biedt die nuttig is voor webdesign en die ook verantwoordelijk is voor zoekmachineoptimalisatie-elementen binnen een website of pagina.

 De extensie installeert de werkbalk met meerdere hulpprogramma's voor webontwikkelaars.

De tool geeft u indicaties over paginagrootte, -breedte en -afmetingen die in strijd zijn met best practice-gebruik op meerdere apparaten. Hiermee kunt u embedded JavaScript controleren en uw website bekijken via een simulatie van verschillende apparaten.

De extensie werkt goed op Windows , Linux en Mac OS . Naast codeer- en ontwerpproblemen, biedt het ook inzicht in metatag-informatie, responsheaders, kleurinformatie en topografische informatie.

U kunt de belangrijkste functies van de tool en de volledige mogelijkheden ervan bekijken op de website van ontwikkelaar Chris Pedericks^{(Chris Pedericks’ website)} .

Er is ongetwijfeld een overvloed aan andere hoogwaardige en nuttige Chrome -extensies die webdesigner of ontwikkelaar zou kunnen gebruiken.

Deze lijst toont enkele van de meest populaire en handige tools. Heb je aanbevelingen voor tools waarvan je denkt dat ik ze nuttiger of beter vind dan de tools in deze lijst? Laat het ons weten.

Top 10 Chrome Extensions and Tools for Web Designers

If уou are designer in need of some useful tools to speed up, collaborate or audit your web development projects, Chrome extension has a multіtude of tools.

This list comprises some of the most popular – and some would argue necessary – tools and Chrome extensions that every user doing design work should have in their kit bag.

1. DomFlags

DOM Flags is a simple to use Chrome extension that provides a new way for developers to work with browser tools. It allows developers to speed up the task of styling elements.

Using keyboard shortcuts for each element you can bookmark your navigation.

We’ve all experienced the difficulty in inspecting highly detailed elements, and it’s easy to get lost.

DOM Flags enable you to track styling elements includes a feature to inspect components with accuracy automatically. This, in turn, will help speed up DevTools workflow and implementation.

DOM Flags enables you to track changes. And maintain your focus on the elements you’re working with.

2. Sizzy

Sizzy gives designers and developers a simple way to test their sites in multiple viewports.

Sizzy provides a simple way to check your design in real-time. It offers an interactive view of any number of devices and screen sizes. You can even simulate a device keyboard and then switch between landscape and portrait modes.

Installing a Chrome extension will add a button to your toolbar, which, when clicked is going to open the current URL in the Sizzy platform. The extension will block all “x-frame-options” headers so you will be able to take a look at any website online.

Sizzy is an open source project, and you can see the entire code here.

3. Checkbot

Checkbot can test your site for security issues and also audit your website page loading speed. It will provide designers with a means of identifying typical errors and recommend improvements in site security, search engine, and site speed.

Using more than 50 best practice metrics, it will audit a website for best practice SEO, broken links, duplicate content and more. The tool will also validate CSS, JS, and HTML.

Checkbot picks up on designer and coder errors in real time saving you the trouble of having to go back and recheck your work repeatedly.

If you’re looking for a good quality tool that will fix broken page links, ensure unique content and page titles and eliminate redirect chains this tool would be useful.

For designers, it can help you minimize your CSS and JS as well as provide recommendations on how to minify your CSS and leverage browser caching.

4. GistBox Clipper

GistBox is one of the most helpful Chrome extensions for web designers.

GistBox can create a GitHub Gist from any code block on the webpage you are viewing.

At the top right-hand corner of any code block, you’ll see a small button, which when pressed, will allow a pop-up that enables you to save the code to the Gist.

You can create new Gists with a right mouse click and save blocks of code for later inspection and use.

Integrating with GitHub enables designers and developers to collect code blocks and manipulate them or categorize them for later use. This makes it a convenient and efficient Chrome extension tool.

5. ColorZilla

ColorZilla Is an incredibly useful Chrome extension for gathering hex codes which can be tagged, labeled and categorized for individual web design projects.

It enables you to select an eye-dropper tool that will extract the color from any web page and save it to the ColorZilla clipboard.

With it, you can quickly develop color palettes for later use and as a way of ensuring you are using color consistently in web design and development.

ColorZilla also acts as a color analyzer and CSS gradient editor so that you can convert an image to CSS.

6. WhatFont

 This Chrome Extension is a real time-saver for those wanting to utilize their favorite fonts  And incorporate them into their own web design project.

WhatFont Chrome extension allows developers to quickly analyze and identify almost any font on any web page.

The extension is well developed and rather than having to open up inspection tools the extension works by merely waving the mouse over the font.

Not only that but the extension will also identify the service that’s being used to serve up a Pages went font and will support Google Font API and Typekit.

7. LightShot

LightShot is a quick screenshot tool that enables you to capture the entire, or part of any page and either upload it or download it or send it to a third party destination.

Screenshots taken by LightShot can be used and shared on social media or printed.

You can annotate and add text, arrows and more to the selected portion of the screen. But perhaps one of the most brilliant features of this simple tool for web designers is that by selecting an image you can then proceed to do a full Google image search for similar images online.

LightShot can be configured in multiple languages.

The extension is written in pure JavaScript and will also work for Windows, Chromebook, Linux and Mac OS. It can also be accessed as a desktop application making it an excellent choice for web designers who are dependent on multiple devices.

8. Awesome Screenshot

Like Lightshot, Awesome Screenshot is a screen and image capturing extension.

It does differ from Lightshot, however, in a number of ways. Awesome Screenshot can be configured to connect all your screenshots with your Google drive.

It allows you to screenshot those elements which are beyond your view in order to capture the entire page. It has additional editing and annotation tools comma allows for cropping and image editing all within the extension.. or with the use of additional Awesome Screenshot applications

You can extend its features by installing the Chrome application for desktop as well. The extension also allows for video capturing and sharing so that you can collaborate with other developers or designers when working on any site.

You can add additional images to a screenshot as well as blue or erase elements that you would rather not show to others.

9. Clear Cache

The Clear Cache Chrome Extension Is a fast and simple tool that enables you to clear cookies and cache of the page you’re looking at. It removes the need to navigate to the settings page of your browser in order to clear a few simple page elements.

For web designers who are making multiple edits and want to view them in real time, this is an excellent tool that will eliminate much of the frustration of looking at old data.

There are times you need to clear your cache and cookies, but navigating to Chrome settings is tedious. Clear Cache lets you erase your cache as well as global or local cookies at the click of a button.

Clear Cache will allow you to configure which elements you want to clear from the page. Variables include Cash, downloads, all systems, form-data, at Cash, index database, plugin data, passwords and more.

10. Web Developer Google Chrome Extension

The Web Developer Google Chrome Extension allows developers and designers to easily audit, analyze and check their web pages for any violations of best practice design, coding, usability, and search engine optimization.

It’s a great all-in-one tool that is not heavy on browse our resources yet provides a ton of information useful to web design is also responsible for search engine optimization elements within a website or page.

 The extension installs the toolbar with multiple web developer tools.

The tool will give you indications on page size, width, and dimensions which make conflict with best practice use on multiple devices. It allows you to check embedded JavaScript and view your website through a simulation of various devices.

The extension functions well on Windows, Linux and Mac OS. In addition to coding and design issues, it will also provide insights into meta tag information, response headers, color information, and topographic information.

You can review the main features of the tool as well as it’s full capabilities on developer Chris Pedericks’ website.

No doubt there are a plethora of other high quality and useful Chrome extensions that are web designer or developer could use.

This list showcases a few of the most popular and useful tools. Do you have any recommendations for tools which you think I’m more useful or superior to the ones in this list? Let us know.

Related posts

• De 8 beste sociale netwerksites voor grafisch ontwerpers om hun portfolio's te laten zien

• Spotify Web Player: toegang tot en gebruik ervan

• 7 beste tools en apps om gratis je eigen meme te maken

• Waarom het de moeite waard is om nog steeds Bing te gebruiken voor uw zoekopdrachten op internet

• 8 hulpmiddelen voor het maken van afbeeldingen van perfect formaat voor sociale-mediasites

• 6 gratis tools voor het online delen van schermen

• 5 beste externe computerreparatiewebsites om nu hulp te krijgen

• De 12 meest zinloze websites om de tijd te doden en plezier te hebben

• De 5 beste sites om een ​​online tutor voor volwassenen en kinderen te vinden

• De 10 beste sites om uw typesnelheid te testen

• De beste hulpmiddelen om uzelf een taal te leren

• Hoe YouTube-video's te bewerken: 5 praktische tips

• De 5 beste gratis online tools voor het maken van stroomdiagrammen

• 54 Beste alternatieven voor Amazon voor online winkelen

• Beheer uw Twitter-lijsten in Chrome op de gemakkelijke manier

• De 6 beste websites om nieuwe filmreleases te bekijken

• 8 beste sites om manga gratis online te lezen

• 3 Amazon-tools voor het volgen van prijzen voor de desktop of browser

• Waar is veganistisch eten bij mij in de buurt? 6 beste sites om in uw regio te zoeken

• 10 educatieve bronnen voor gratis PDF-lesmateriaal en hulpmiddelen