Ha Ön tervező, akinek hasznos eszközökre van szüksége webfejlesztési projektjei felgyorsításához, együttműködéséhez vagy auditálásához, a Chrome - bővítmény számos eszközzel rendelkezik.

Ez a lista tartalmazza a legnépszerűbb – és néhányan szükségesnek mondható – eszközöket és Chrome-bővítményeket^{(tools and Chrome extensions)} , amelyeket minden tervezési munkát végző felhasználónak a készletében kell tartania.

1. DomFlags

A DOM Flags^{(DOM Flags)} egy egyszerűen használható Chrome - bővítmény, amely új módot biztosít a fejlesztők számára a böngészőeszközökkel való munkavégzéshez. Lehetővé teszi a fejlesztők számára, hogy felgyorsítsák a stíluselemek elkészítését.

Az egyes elemekhez tartozó billentyűparancsok használatával könyvjelzők közé helyezheti a navigációt.

Mindannyian tapasztaltuk már, hogy milyen nehézségekbe ütközik a rendkívül részletes elemek ellenőrzése, és könnyű eltévedni.

A DOM Flags^{(DOM Flags)} lehetővé teszi a stíluselemek nyomon követését, és egy olyan funkciót is tartalmaz, amely automatikusan pontosan ellenőrzi az összetevőket. Ez viszont felgyorsítja a DevTools munkafolyamatát és megvalósítását.

A DOM Flags^{(DOM Flags)} lehetővé teszi a változások nyomon követését. És továbbra is összpontosítson azokra az elemekre, amelyekkel dolgozik.

2. Sizzy

A Sizzy^(Sizzy) egyszerű módot ad a tervezőknek és a fejlesztőknek webhelyeik tesztelésére több nézetablakban.

A Sizzy^(Sizzy) egyszerű módot biztosít a terv valós idejű ellenőrzésére. Interaktív nézetet kínál tetszőleges számú eszközről és képernyőméretről. Még az eszköz billentyűzetét is szimulálhatja, majd válthat fekvő és álló mód között.

A Chrome -bővítmény telepítése hozzáad egy gombot az eszköztárhoz, amelyre kattintva megnyílik az aktuális URL a Sizzy platformon. A kiterjesztés blokkolja az összes „ x-frame-options ” fejlécet, így bármelyik webhelyet megtekintheti online.

A Sizzy^(Sizzy) egy nyílt forráskódú projekt, és a teljes kódot itt^(here) tekintheti meg .

3. Checkbot

A Checkbot^(Checkbot) tesztelheti webhelyét biztonsági problémák szempontjából, és ellenőrizheti a webhely oldalainak betöltési sebességét is. Eszközt biztosít a tervezőknek a tipikus hibák azonosítására, és javasolja a webhely biztonságának, a keresőmotornak és a webhely sebességének javítását.

Több mint 50 bevált gyakorlati mérőszám felhasználásával auditálja a webhelyet a SEO bevált gyakorlatai , a hibás hivatkozások, a duplikált tartalom és egyebek tekintetében. Az eszköz a CSS^(CSS) -t , a JS-t és a HTML - t is érvényesíti .

A Checkbot valós időben észleli a tervezői és kódolói hibákat, így megkíméli Önt attól a fáradságtól, hogy ismételten vissza kelljen ellenőriznie a munkáját.

Ha olyan jó minőségű eszközt keres, amely kijavítja a hibás oldalhivatkozásokat, egyedi tartalmat és oldalcímeket biztosít, és megszünteti az átirányítási láncokat, akkor ez az eszköz hasznos lehet.

A tervezők számára segíthet minimalizálni a CSS -t és a JS-t, valamint javaslatokat tehet a CSS minimalizálására és a böngésző gyorsítótárának kihasználására.

4. GistBox Clipper

A GistBox^(GistBox) az egyik leghasznosabb Chrome -bővítmény webes tervezők számára.

A GistBox a megtekintett weboldal bármely kódblokkjából létrehozhat egy GitHub Gist -et.^{(GitHub Gist)}

Bármely kódblokk jobb felső sarkában megjelenik egy kis gomb, amelyet megnyomva előugró ablak jelenik meg, amely lehetővé teszi a kód elmentését a Gist -be .

Jobb egérkattintással létrehozhat új Gist-eket, és elmentheti a kódblokkokat későbbi ellenőrzés és felhasználás céljából.

A GitHubbal^(GitHub) való integráció lehetővé teszi a tervezők és a fejlesztők számára, hogy kódblokkokat gyűjtsenek és kezeljenek vagy kategorizáljanak későbbi felhasználás céljából. Ez kényelmes és hatékony Chrome - bővítő eszközzé teszi.

5. ColorZilla

A ColorZilla^(ColorZilla) egy hihetetlenül hasznos Chrome -bővítmény hexadecimális kódok összegyűjtésére, amelyek címkézhetők, címkézhetők és kategorizálhatók az egyes webtervezési projektekhez.

Lehetővé teszi egy szemcseppentő eszköz kiválasztását, amely bármely weboldalról kivonja a színt, és elmenti a ColorZilla vágólapjára.

Segítségével gyorsan fejleszthet színpalettákat későbbi használatra, és így biztosíthatja a színek következetes használatát a webdesign és -fejlesztés során.

A ColorZilla^(ColorZilla) színelemzőként és CSS -gradiens-szerkesztőként is működik, így a képeket ^(CSS)CSS -vé alakíthatja .

6. WhatFont

 Ez a Chrome^{(Chrome Extension)} -bővítmény valós időt takarít meg azok számára, akik kedvenc betűtípusaikat szeretnék használni, és beépíteni őket saját webdesign projektjükbe.

A WhatFont Chrome-^{(WhatFont Chrome)} bővítmény lehetővé teszi a fejlesztők számára, hogy gyorsan elemezzenek és azonosítsanak szinte bármilyen betűtípust bármely weboldalon.

A kiterjesztés jól kidolgozott, és ahelyett, hogy meg kellene nyitnia az ellenőrző eszközöket, a bővítmény úgy működik, hogy az egeret a betűtípus fölé viszi.

Nem csak ez, hanem a kiterjesztés azonosítja azt a szolgáltatást is, amelyet a Pages go betűtípus megjelenítésére használnak, és támogatja a Google Font API-t és a Typekit-et.^{(Google Font API and Typekit.)}

7. LightShot

A LightShot^(LightShot) egy gyors képernyőképes eszköz, amely lehetővé teszi az oldal egészének vagy egy részének rögzítését, és feltöltheti vagy letöltheti, vagy elküldheti egy harmadik félnek.

A LightShot^(LightShot) által készített képernyőképek felhasználhatók és megoszthatók a közösségi médiában vagy nyomtathatók.

A képernyő kiválasztott részére megjegyzéseket fűzhet, és szöveget, nyilakat és egyebeket adhat hozzá. Ennek az egyszerű eszköznek a webdesignerek számára talán az egyik legzseniálisabb tulajdonsága, hogy egy kép kiválasztásával folytathatja a teljes Google képkeresést hasonló képek után az interneten.

A LightShot^(LightShot) több nyelven is konfigurálható.

A kiterjesztés tisztán JavaScript^(JavaScript) nyelven íródott, és Windows , Chromebook , Linux és Mac OS rendszeren^{(Mac OS)} is működik . Asztali alkalmazásként^{(desktop application)} is elérhető, így kiváló választás a több eszköztől függő webdesignerek számára.

8. Félelmetes képernyőkép

A Lightshothoz^(Lightshot) hasonlóan az Awesome Screenshot is egy képernyő- és képrögzítő bővítmény.

Ez azonban több szempontból is különbözik a Lightshottól^(Lightshot) . Az Awesome Screenshot^{(Awesome Screenshot)} beállítható úgy, hogy az összes képernyőképet összekapcsolja a Google meghajtóval.

Lehetővé teszi, hogy képernyőképet készítsen azokról az elemekről, amelyek kívül esnek a látószögén, hogy a teljes oldalt rögzítse. További szerkesztő- és annotációs eszközökkel rendelkezik. A vessző lehetővé teszi a kivágást és a képszerkesztést a bővítményen belül, vagy további Awesome Screenshot alkalmazások használatával

Kibővítheti funkcióit, ha telepíti az asztali Chrome alkalmazást is. A bővítmény videórögzítést és megosztást is lehetővé tesz, így bármilyen webhelyen dolgozva együttműködhet más fejlesztőkkel vagy tervezőkkel.

Hozzáadhat további képeket a képernyőképekhez, valamint kék színeket vagy törölhet olyan elemeket, amelyeket nem szeretne másoknak megjeleníteni.

9. Törölje a gyorsítótárat

A Gyorsítótár törlése Chrome-bővítmény^{(Cache Chrome Extension)} egy gyors és egyszerű eszköz, amely lehetővé teszi a cookie-k és a megtekintett oldal gyorsítótárának törlését. Megszünteti annak szükségességét, hogy a böngésző beállítási oldalára lépjen néhány egyszerű oldalelem törléséhez.

Azoknak a webes tervezőknek, akik több szerkesztést végeznek, és valós időben szeretnék megtekinteni azokat, ez egy kiváló eszköz, amely kiküszöböli a régi adatok nézegetésével járó frusztráció nagy részét.

Előfordulhat, hogy törölnie kell a gyorsítótárat és a cookie-kat, de a Chrome beállításaihoz való navigálás fárasztó. A gyorsítótár^(Cache) törlésével egyetlen gombnyomással törölheti a gyorsítótárat, valamint a globális vagy helyi cookie-kat.

A gyorsítótár^(Cache) törlése segítségével beállíthatja, hogy mely elemeket kívánja törölni az oldalról. A változók^(Variables) közé tartozik a Cash , a letöltések, az összes rendszer, az űrlapadatok, a Cashnél^(Cash) , az index adatbázis, a beépülő modulok adatai, a jelszavak és egyebek.

10. Webfejlesztő Google Chrome bővítmény

A Web Developer Google Chrome bővítmény^{(Web Developer Google Chrome Extension)} lehetővé teszi a fejlesztők és a tervezők számára, hogy egyszerűen auditálják, elemezzék és ellenőrizzék weboldalaikat a tervezés, a kódolás, a használhatóság és a keresőoptimalizálás bevált gyakorlatának megsértésére.

Ez egy nagyszerű minden az egyben eszköz, amely nem nehéz a forrásaink böngészéséhez, mégis rengeteg hasznos információt nyújt a webdesign számára, valamint a webhelyen vagy oldalon belüli keresőoptimalizálási elemekért is felelős.

 A bővítmény több webfejlesztő eszközzel telepíti az eszköztárat.

Az eszköz jelzéseket ad az oldalméretről, szélességről és méretekről, amelyek ellentétesek a több eszközön történő bevált gyakorlattal. Lehetővé teszi a beágyazott JavaScript ellenőrzését és webhelyének megtekintését különféle eszközök szimulációján keresztül.

A kiterjesztés jól működik Windows , Linux és Mac OS rendszeren^{(Mac OS)} . A kódolási és tervezési problémákon kívül betekintést nyújt a metacímke-információkba, a válaszfejlécekbe, a színinformációkba és a topográfiai információkba is.

Chris Pedericks^{(Chris Pedericks’ website)} fejlesztő webhelyén áttekintheti az eszköz főbb funkcióit, valamint a teljes képességeit .

Kétségtelen, hogy rengeteg más kiváló minőségű és hasznos Chrome - bővítmény létezik, amelyeket webtervezők vagy fejlesztők használhatnak.

Ez a lista a legnépszerűbb és leghasznosabb eszközöket mutatja be. Van valami javaslata azokra az eszközökre, amelyekről úgy gondolja, hogy hasznosabbak vagy jobbak a listán szereplőknél? Tudasd velünk.

Top 10 Chrome Extensions and Tools for Web Designers

If you arе designer in need of ѕome useful tools to sрeed up, collaborate 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

• A 8 legjobb közösségi oldal grafikus tervezők számára portfóliójuk bemutatására

• Spotify Web Player: Hogyan lehet elérni és használni

• 7 legjobb eszköz és alkalmazás saját mém létrehozásához ingyenesen

• Miért érdemes továbbra is a Binget használni internetes kereséseihez?

• 8 eszköz a tökéletes méretű képek létrehozásához közösségi oldalakon

• Hol van a közelemben vegán étel? 6 legjobb webhely a környék kereséséhez

• Az 5 legjobb webhely, ahol online oktatót találhat felnőtteknek és gyerekeknek

• Hogyan hallgathat online rádióállomásokat ingyen

• 10 legjobb webhely Sankey-diagram létrehozásához

• Az 5 legjobb ingyenes online folyamatábra-készítő eszköz

• Az 5 legjobb távoli számítógép-javítási webhely, ahol most segítséget kaphat

• A legjobb társkereső webhelyek és alkalmazások mindenki számára 2021-ben

• 8 legjobb YouTube-csatorna fotó- és videóleckékhez

• 5 legjobb utólagos fizetési alternatíva a vásárláshoz és a későbbi fizetéshez

• 8 legjobb webhely, ahol ingyenesen olvashat online mangákat

• 3 Amazon árkövető eszköz az asztali számítógéphez vagy a böngészőhöz

• 5 legjobb webhely és alkalmazás a gitártanuláshoz

• A 16 legjobb webhely ingyenes hangoskönyvek online keresésére

• 8 Political Subreddits a nyugodt politikai vitához

• A 6 legjobb webhely, ahol új filmeket nézhet meg