Jos olet suunnittelija, joka tarvitsee hyödyllisiä työkaluja nopeuttaaksesi, tehdäksesi yhteistyötä tai tarkastaaksesi verkkokehitysprojektejasi, Chrome - laajennuksella on monia työkaluja.

Tämä luettelo sisältää joitain suosituimmista – ja jotkut väittävät tarpeellisiksi – työkaluja ja Chrome-laajennuksia^{(tools and Chrome extensions)} , jotka jokaisen suunnittelutyötä tekevän käyttäjän tulisi olla paketissaan.

1. DomFlags

DOM Flags on helppokäyttöinen Chrome - laajennus, joka tarjoaa kehittäjille uuden tavan työskennellä selaintyökalujen kanssa. Sen avulla kehittäjät voivat nopeuttaa elementtien muotoilua.

Voit lisätä navigointisi kirjanmerkkeihin käyttämällä kunkin elementin pikanäppäimiä.

Olemme kaikki kokeneet vaikeuksia tarkastaa erittäin yksityiskohtaisia ​​elementtejä, ja on helppo eksyä.

DOM-lippujen^{(DOM Flags)} avulla voit seurata tyylielementtejä ja sisältää toiminnon, joka tarkistaa komponentit tarkasti automaattisesti. Tämä puolestaan ​​auttaa nopeuttamaan DevToolsin^(DevTools) työnkulkua ja käyttöönottoa.

DOM-lippujen^{(DOM Flags)} avulla voit seurata muutoksia. Ja säilytä keskittymisesi elementteihin, joiden kanssa työskentelet.

2. Sizzy

Sizzy tarjoaa suunnittelijoille ja kehittäjille yksinkertaisen tavan testata sivustojaan useissa kuvaporteissa.

Sizzy tarjoaa yksinkertaisen tavan tarkistaa suunnittelusi reaaliajassa. Se tarjoaa interaktiivisen näkymän mistä tahansa määrästä laitteita ja näyttökokoja. Voit jopa simuloida laitteen näppäimistöä ja vaihtaa sitten vaaka- ja pystytilan välillä.

Chrome -laajennuksen asentaminen lisää työkalupalkkiisi painikkeen, jota napsauttamalla avautuu nykyinen URL - osoite Sizzy- alustalla. Laajennus estää kaikki " x-frame-options " -otsikot, joten voit katsoa mitä tahansa verkkosivustoa verkossa.

Sizzy on avoimen lähdekoodin projekti, ja näet koko koodin täältä^(here) .

3. Checkbot

Checkbot voi testata sivustosi tietoturvaongelmien varalta ja myös tarkastaa verkkosivustosi sivun latausnopeuden. Se tarjoaa suunnittelijoille keinot tunnistaa tyypilliset virheet ja suositella parannuksia sivuston tietoturvaan, hakukoneeseen ja sivuston nopeuteen.

Käyttämällä yli 50 parhaan käytännön mittaria, se tarkastaa verkkosivuston hakukoneoptimoinnin^(SEO) parhaiden käytäntöjen , rikkinäisten linkkien, päällekkäisen sisällön ja muiden varalta. Työkalu vahvistaa myös CSS :n , JS:n ja HTML :n .

Checkbot havaitsee suunnittelijoiden ja koodaajien virheet reaaliajassa, mikä säästää vaivaa, jonka joudut toistuvasti tarkistamaan työsi uudelleen.

Jos etsit laadukasta työkalua, joka korjaa rikkinäiset sivulinkit, varmistaa ainutlaatuisen sisällön ja sivujen otsikot sekä poistaa uudelleenohjausketjut, tämä työkalu on hyödyllinen.

Suunnittelijoille se voi auttaa sinua minimoimaan CSS :n ja JS:n sekä antaa suosituksia CSS :n minimoimiseen ja selaimen välimuistin hyödyntämiseen.

4. GistBox Clipper

GistBox on yksi hyödyllisimmistä Chrome -laajennuksista verkkosuunnittelijoille.

GistBox voi luoda GitHub^{(GitHub Gist)} Gistin mistä tahansa tarkastelemasi verkkosivun koodilohkosta.

Minkä tahansa koodilohkon oikeassa yläkulmassa näet pienen painikkeen, jota painettaessa avautuu ponnahdusikkuna, jonka avulla voit tallentaa koodin Gist .

Voit luoda uusia pääsisältöjä hiiren oikealla napsautuksella ja tallentaa koodilohkoja myöhempää tarkastelua ja käyttöä varten.

Integrointi GitHubin^(GitHub) kanssa antaa suunnittelijoille ja kehittäjille mahdollisuuden kerätä koodilohkoja ja käsitellä niitä tai luokitella ne myöhempää käyttöä varten. Tämä tekee siitä kätevän ja tehokkaan Chrome - laajennustyökalun.

5. ColorZilla

ColorZilla on uskomattoman hyödyllinen Chrome -laajennus hex-koodien keräämiseen, jotka voidaan merkitä, merkitä ja luokitella yksittäisiä web-suunnitteluprojekteja varten.

Sen avulla voit valita pipettityökalun, joka poimii värin miltä tahansa verkkosivulta ja tallentaa sen ColorZillan^(ColorZilla) leikepöydälle.

Sen avulla voit nopeasti kehittää väripaletteja myöhempää käyttöä varten ja varmistaaksesi, että käytät värejä johdonmukaisesti web-suunnittelussa ja -kehityksessä.

ColorZilla toimii myös värianalysaattorina ja CSS -gradienttieditorina, jotta voit muuntaa kuvan CSS -muotoon .

6. WhatFont

 Tämä Chrome^{(Chrome Extension)} -laajennus säästää todella aikaa niille, jotka haluavat käyttää suosikkikirjasimiaan ja sisällyttää ne omaan verkkosuunnitteluprojektiinsa.

WhatFont Chrome -laajennuksen avulla kehittäjät voivat nopeasti analysoida ja tunnistaa melkein minkä tahansa fontin millä tahansa verkkosivulla.

Laajennus on hyvin kehitetty, ja sen sijaan, että joutuisi avaamaan tarkistustyökaluja, laajennus toimii vain heiluttamalla hiirtä fontin päällä.

Sen lisäksi, että laajennus tunnistaa myös palvelun, jota käytetään Pages got -kirjasimen näyttämiseen , ja tukee Google Font API:ta ja Typekitiä.^{(Google Font API and Typekit.)}

7. LightShot

LightShot on nopea kuvakaappaustyökalu, jonka avulla voit kaapata koko sivun tai minkä tahansa sivun osan ja joko ladata sen tai lähettää sen kolmannelle osapuolelle.

LightShotilla^(LightShot) otettuja kuvakaappauksia voidaan käyttää ja jakaa sosiaalisessa mediassa tai tulostaa.

Voit merkitä ja lisätä tekstiä, nuolia ja muuta valittuun näytön osaan. Mutta ehkä yksi tämän yksinkertaisen web-suunnittelijoille tarkoitetun työkalun loistavimmista ominaisuuksista on se, että valitsemalla kuvan voit jatkaa Google -kuvahaun suorittamista vastaaville kuville verkossa.

LightShot voidaan määrittää useilla kielillä.

Laajennus on kirjoitettu puhtaalla JavaScriptillä^(JavaScript) ja toimii myös Windowsissa^(Windows) , Chromebookissa^(Chromebook) , Linuxissa^(Linux) ja Mac OS :ssä . Sitä voidaan käyttää myös työpöytäsovelluksena,^{(desktop application)} mikä tekee siitä erinomaisen valinnan web-suunnittelijoille, jotka ovat riippuvaisia ​​useista laitteista.

8. Mahtava kuvakaappaus

Kuten Lightshot , Awesome Screenshot on näytön ja kuvien kaappauslaajennus.

Se eroaa kuitenkin Lightshotista^(Lightshot) monella tapaa. Mahtava kuvakaappaus^{(Awesome Screenshot)} voidaan määrittää yhdistämään kaikki kuvakaappaukset Google -asemaasi.

Sen avulla voit ottaa kuvakaappauksen niistä elementeistä, jotka eivät ole näkyvissäsi, jotta voit kaapata koko sivun. Siinä on ylimääräisiä muokkaus- ja huomautustyökaluja. Pilkku mahdollistaa kuvan rajaamisen ja muokkaamisen laajennuksen sisällä tai käyttämällä muita Awesome Screenshot -sovelluksia

Voit laajentaa sen ominaisuuksia asentamalla myös Chrome - sovelluksen työpöydälle. Laajennus mahdollistaa myös videon kaappauksen ja jakamisen, jotta voit tehdä yhteistyötä muiden kehittäjien tai suunnittelijoiden kanssa työskennellessäsi missä tahansa sivustossa.

Voit lisätä kuvakaappaukseen lisäkuvia sekä sinisiä tai poistaa elementtejä, joita et halua näyttää muille.

9. Tyhjennä välimuisti

Tyhjennä välimuisti Chrome-laajennus^{(Cache Chrome Extension)} on nopea ja yksinkertainen työkalu, jonka avulla voit tyhjentää evästeet ja välimuistin tarkastelemastasi sivusta. Se poistaa tarpeen siirtyä selaimen asetussivulle muutaman yksinkertaisen sivuelementin tyhjentämiseksi.

Verkkosuunnittelijoille, jotka tekevät useita muokkauksia ja haluavat tarkastella niitä reaaliajassa, tämä on erinomainen työkalu, joka poistaa suuren osan vanhojen tietojen katseluun liittyvästä turhautumisesta.

Joskus sinun on tyhjennettävä välimuisti ja tyhjennettävä evästeet, mutta Chromen^(Chrome) asetuksiin siirtyminen on työlästä. Tyhjennä välimuisti^(Cache) -toiminnolla voit tyhjentää välimuistin sekä globaalit tai paikalliset evästeet yhdellä napin painalluksella.

Tyhjennä välimuisti -toiminnolla^(Cache) voit määrittää, mitkä elementit haluat tyhjentää sivulta. Muuttujia^(Variables) ovat Cash , lataukset, kaikki järjestelmät, lomaketiedot, Cash , hakemistotietokanta, laajennustiedot, salasanat ja paljon muuta.

10. Web Developer Google Chrome -laajennus

Web Developer Google Chrome -laajennuksen^{(Web Developer Google Chrome Extension)} avulla kehittäjät ja suunnittelijat voivat helposti tarkastaa, analysoida ja tarkistaa verkkosivuillaan mahdollisten parhaiden käytäntöjen suunnittelun, koodauksen, käytettävyyden ja hakukoneoptimoinnin rikkomuksia.

Se on loistava all-in-one-työkalu, joka ei ole raskas selata resurssejamme, mutta tarjoaa paljon hyödyllistä tietoa web-suunnittelulle. Se on myös vastuussa verkkosivuston tai sivun hakukoneoptimointielementeistä.

 Laajennus asentaa työkalupalkin useilla verkkokehittäjätyökaluilla.

Työkalu antaa sinulle tietoja sivun koosta, leveydestä ja mitoista, jotka ovat ristiriidassa useiden laitteiden parhaiden käytäntöjen kanssa. Sen avulla voit tarkistaa upotetun JavaScriptin^(JavaScript) ja tarkastella verkkosivustoasi eri laitteiden simulaation kautta.

Laajennus toimii hyvin Windowsissa^(Windows) , Linuxissa^(Linux) ja Mac OS :ssä . Koodaus- ja suunnitteluongelmien lisäksi se tarjoaa myös tietoa sisällönkuvauskenttien tiedoista, vastausotsikoista, väritiedoista ja topografisista tiedoista.

Voit tarkastella työkalun pääominaisuuksia sekä sen kaikkia ominaisuuksia kehittäjä Chris Pedericksin verkkosivustolla^{(Chris Pedericks’ website)} .

Epäilemättä on olemassa lukuisia muita korkealaatuisia ja hyödyllisiä Chrome -laajennuksia, joita verkkosuunnittelijat tai kehittäjät voivat käyttää.

Tämä luettelo esittelee muutamia suosituimpia ja hyödyllisimpiä työkaluja. Onko sinulla suosituksia työkaluista, jotka ovat mielestäsi hyödyllisempiä tai parempia kuin tässä luettelossa olevat? Kerro meille.

Top 10 Chrome Extensions and Tools for Web Designers

If you are designer in need of some useful tools to speed up, cоllabоrate or audit your web development projects, Chrome extension has a multitude 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

• 8 parasta sosiaalisen verkostoitumisen sivustoa graafisille suunnittelijoille portfolionsa esittelyyn

• Spotify Web Player: Kuinka käyttää sitä

• 7 parasta työkalua ja sovellusta oman meemin luomiseen ilmaiseksi

• Miksi Bingin käyttäminen verkkohauissa kannattaa edelleen

• 8 työkalua täydellisen kokoisten kuvien luomiseen sosiaalisen median sivustoille

• Näytön tallentaminen Chromebookilla

• 5 parasta ilmaista online-vuokaavion luomistyökalua

• 5 parasta sivustoa aikuisten ja lasten online-ohjaajien löytämiseksi

• Parhaat treffisivustot ja sovellukset kaikille vuonna 2021

• 10 parasta ilmaista kuvahosting-sivustoa vuonna 2022

• 3 Amazonin hinnanseurantatyökalua työpöydälle tai selaimelle

• 10 parasta faktantarkistussivustoa väärien tietojen torjuntaan

• Hallitse Twitter-luetteloitasi Chromessa helposti

• Kuinka rakentaa perusverkkoläsnäolo, jos sinulla ei ole koodaustaitoja

• 5 parasta tietokoneen etäkorjaussivustoa, joista saat apua nyt

• 3 parasta online-OCR-työkalua tekstin poimimiseen kuvista

• YouTube-videoiden muokkaaminen: 5 parasta käytäntöä

• 7 sivustoa, joista löydät julkista materiaalia videoprojekteihisi

• 8 parasta verkkosivustoa Python-ohjelmoinnin oppimiseen

• 7 parasta Deepfake-sovellusta ja -sivustoa