Haddii aad tahay naqshadeeye u baahan qalab waxtar leh si aad u dedejiso, u wada-shaqayso ama u xisaabiso mashaariicda horumarinta shabakadaada, kordhinta Chrome waxay leedahay qalab fara badan.

Liiskani wuxuu ka kooban yahay qaar ka mid ah kuwa ugu caansan - qaarna waxay ku doodi doonaan lagama maarmaan - qalabyada iyo kordhinta Chrome-^{(tools and Chrome extensions)} ka ee isticmaale kasta oo samaynaya shaqada naqshadeynta waa inuu ku hayaa boorsada xirmada.

1. DomFlags

Calamada DOM^{(DOM Flags)} waa sahlan tahay in la isticmaalo kordhinta Chrome taasoo bixisa hab cusub oo horumariyayaashu ay ku shaqeeyaan aaladaha browserka. Waxay u ogolaataa horumariyayaashu inay dedejiyaan hawsha habaynta walxaha.

Isticmaalka furaha kiiboodhka shay kasta waxaad calaamadayn kartaa socodkaaga.

Dhammaanteen waxaan la kulannay dhibka ah in aan hubinno walxaha aad u faahfaahsan, wayna fududahay in la lumiyo.

Calannada DOM waxay^{(DOM Flags)} awood kuu siinayaan inaad la socoto walxaha habaynta waxaa ka mid ah sifa si toos ah loogu baadho qaybaha. Tani, iyaduna, waxay gacan ka geysan doontaa dedejinta socodka shaqada iyo hirgelinta DevTools .

Calamada DOM waxay^{(DOM Flags)} awood kuu siinaysaa inaad la socoto isbeddelada Oo aad diirada saarto waxyaabaha aad la shaqaynayso.

2. Sizzy

Sizzy wuxuu siinayaa naqshadeeyayaasha iyo horumariyeyaasha hab fudud oo ay ku tijaabiyaan goobahooda meelo badan oo daawasho ah.

Sizzy waxay ku siinaysaa hab fudud oo lagu hubinayo nashqadaada wakhtiga dhabta ah. Waxay bixisaa aragti is-dhexgal ah oo ah tiro kasta oo qalab ah iyo cabbirrada shaashadda. Xitaa waxaad ku ekaan kartaa kiiboodhka aaladda ka dibna waxaad u kala beddeli kartaa muuqaalka muuqaalka iyo qaababka sawirka.

Ku rakibida kordhinta Chrome waxay ku dari doontaa badhanka aaladdaada, kaas oo, marka la riixo furi doona URL -ka hadda ee goobta Sizzy . Kordhinta ayaa xannibi doonta dhammaan madaxyada " x-frame-options " si aad awood ugu yeelatid inaad eegto shabakad kasta oo onlayn ah.

Sizzy waa mashruuc il furan, waxaadna arki kartaa dhammaan koodka halkan^(here) .

3. Checkbot

Checkbot waxa ay ka tijaabin kartaa goobtaada arimaha amaanka waxa kale oo ay xisaabin kartaa xawaaraha soo rarista boggaga mareegaha. Waxay siin doontaa naqshadeeyayaasha hab lagu garto khaladaadka caadiga ah waxayna ku talinayaan hagaajinta amniga goobta, mashiinka raadinta, iyo xawaaraha goobta.

Isticmaalka in ka badan 50 mitirka dhaqanka ugu wanaagsan, waxay xisaabin doontaa degelka shaqada ugu fiican SEO , xiriirinta jaban, waxyaabaha nuqul ka ah iyo wax ka badan. Qalabku wuxuu sidoo kale ansixin doonaa CSS , JS, iyo HTML .

Checkbot waxa ay soo qaadaa khaladaadka naqshadeeyaha iyo codbixiyayaasha wakhtiga dhabta ah ee kaa badbaadinaya dhibaatada ah in aad dib u laabato oo aad dib u hubiso shaqadaada si isdaba joog ah.

Haddii aad raadinayso qalab tayo wanaagsan oo hagaajin doona isku xirka bogga jaban, hubi nuxurka gaarka ah iyo cinwaanada bogga oo tirtir silsiladaha wareejinta qalabkani wuxuu noqon lahaa mid faa'iido leh.

Nashqadeeyayaasha, waxay kaa caawin kartaa inaad yareyso CSS -gaaga iyo sidoo kale bixinta talooyin ku saabsan sida loo yareeyo CSS -gaaga iyo ka faa'iidaysiga kaydinta browserka.

4. GistBox Clipper

GistBox waa mid ka mid ah kordhinta ^(GistBox)Chrome -ka ugu waxtarka badan ee naqshadeeyayaasha shabakada.

GistBox waxa ay ka abuuri kartaa GitHub Gist meel kasta oo kood ah oo ku yaal bogga aad arkayso.

Dhinaca geeska midig ee sare ee xannibaadda koodka, waxaad arki doontaa badhan yar, kaas oo marka la riixo, u oggolaan doona inuu soo baxo kaas oo awood kuu siinaya inaad kaydiso koodka Gist .

Waxaad ku abuuri kartaa Gists cusub adigoo isticmaalaya mouse-ka midigta oo waxaad kaydisaa blocks koodka kormeerka dambe iyo isticmaalka.

Ku biirista GitHub waxay awood u siinaysaa naqshadeeyayaasha iyo horumariyayaashu inay ururiyaan baloogyada koodka oo ay maamushaan ama u kala saaraan isticmaalka dambe. Tani waxay ka dhigaysaa qalab fidinta Chrome ku habboon oo hufan.^(Chrome)

5. ColorZilla

ColorZilla Waa kordhin cajiib ah oo faa'iido leh Chrome si loo ururiyo koodh hex kaas oo lagu calaamadin karo, lagu calaamadin karo oo loo kala saari karo mashaariicda naqshadeynta shabakadda.

Waxa ay awood ku siinaysa in aad doorato qalab il-dhicis ah kaas oo midabka ka soo saari doona bog kasta oo shabakad ah oo ku kaydin doona sanduuqa ColorZilla^(ColorZilla) .

Iyada oo leh, waxaad si dhakhso ah u horumarin kartaa palette midabka midabka si aad u isticmaasho dambe iyo hab lagu hubinayo inaad si joogto ah u isticmaalayso midabka naqshadaynta iyo horumarinta shabakada.

ColorZilla sidoo kale waxay u shaqeysaa sidii falanqeeye midabka iyo tifaftiraha gradient CSS si aad ugu beddeli karto sawirka CSS .

6. WhatFont

 Kordhinta Chrome-^{(Chrome Extension)} kan waa kaydiye dhab ah oo loogu talagalay kuwa doonaya inay ka faa'iidaystaan ​​xarfaha ay jecel yihiin oo ay ku daraan mashruuca naqshadaynta shabakadooda.

WhatFont Chrome kordhinta waxay u ogolaataa horumariyeyaasha inay si dhakhso leh u falanqeeyaan oo ay gartaan ku dhawaad ​​far kasta oo ku yaal bog kasta oo shabakad ah.

Kordhinta si wanaagsan ayaa loo horumariyay oo halkii laga lahaa in la furo qalabka kormeerka kordhintu waxay shaqeysaa iyadoo kaliya lagu ruxayo jiirka farta.

Ma aha taas oo keliya, laakiin kordhintu waxay sidoo kale aqoonsan doontaa adeegga loo isticmaalo in loogu adeego farta boggaga^(Pages) waxayna taageeri doontaa Google Font API iyo Typekit.^{(Google Font API and Typekit.)}

7. LightShot

LightShot waa qalab sawir qaadasho degdeg ah kaas oo awood kuu siinaya inaad qabsato dhammaan, ama qayb ka mid ah bog kasta oo aad geliso ama soo dejiso ama u dirto meel qolo saddexaad u socoto.

Sawirada ay qaaday LightShot waa la isticmaali karaa oo lagu wadaagi karaa warbaahinta bulshada ama la daabacan karaa.

Waxaad sharaxi kartaa oo ku dari kartaa qoraal, fallaadho iyo wax ka badan qaybta la doortay ee shaashadda. Laakiin waxaa laga yaabaa in mid ka mid ah sifooyinka ugu quruxda badan ee qalabkan fudud ee naqshadeeyayaasha webka waa in adiga oo dooranaya sawir aad ka dib u sii wadi karto raadinta sawirka Google oo buuxa ee sawirada la midka ah ee internetka.

LightShot waxaa lagu habeyn karaa luqado badan.

Kordhinta waxay ku qoran tahay JavaScript saafi ah waxayna sidoo kale u shaqayn doontaa Windows , Chromebook , Linux iyo Mac OS . Waxa kale oo loo heli karaa codsi desktop ah^{(desktop application)} taasoo ka dhigaysa doorasho aad u fiican naqshadeeyayaasha shabakada kuwaas oo ku tiirsan aalado badan.

8. Sawir qaade cajiib ah

Sida Lightshot , Screenshot Awesome^{(Awesome Screenshot)} waa shaashad iyo sawir qaadid fidin.

Way ka duwan tahay Lightshot , si kastaba ha ahaatee, siyaabo dhowr ah. Screenshot Cajiib^{(Awesome Screenshot)} ah ayaa loo habayn karaa si uu ugu xidho dhamaan sawiradaada Google Drive-kaaga.

Waxay kuu ogolaanaysaa inaad sawirto walxaha ka baxsan aragtidaada si aad u qabsato bogga oo dhan. Waxay haysataa qalab tafatir iyo tafatir dheeri ah oo comma u oggolaanaya goosashada iyo tafatirka sawirka dhammaan kordhinta dhexdeeda.

Waxaad kordhin kartaa sifooyinkeeda adiga oo ku rakibaya codsiga Chrome ee desktop-ka sidoo kale. ^(Chrome)Kordhinta ayaa sidoo kale u oggolaanaysa qabashada fiidiyooga iyo wadaagista si aad ula shaqayn karto horumariyeyaasha kale ama naqshadeeyayaasha marka aad ka shaqaynayso goob kasta.

Waxaad ku dari kartaa sawiro dheeraad ah shaashadda iyo sidoo kale buluug ama tirtir walxaha aadan doorbidin inaad tusin kuwa kale.

9. Nadiifi Cache

The Clear Cache Chrome Extension waa qalab degdeg ah oo fudud oo awood kuu siinaya inaad nadiifiso cookies iyo cache ee bogga aad eegayso. Waxay meesha ka saaraysaa baahida loo qabo in loo socdo bogga dejinta ee biraawsarkaaga si aad u nadiifiso bogag bog yar oo fudud.

Nashqadayaasha shabakadaha kuwaas oo samaynaya tafatir badan oo doonaya in ay daawadaan wakhtiga dhabta ah, tani waa qalab aad u fiican oo meesha ka saari doona wax badan oo ka mid ah niyad-jabka ee fiirinta xogta hore.

Waxaa jira waqtiyo aad u baahan tahay inaad nadiifiso kaydkaaga iyo cookies-kaaga, laakiin u socoshada goobaha Chrome waa caajis. Nadiifi Cache -gaaga ayaa kuu ogolaanaya inaad tirtirto kaydkaaga iyo sidoo kale cookies-ka caalamiga ah ama kuwa maxalliga ah markaad gujiso badhanka.

Nadiifi Cache waxay kuu ogolaaneysaa inaad habeyso waxyaabaha aad rabto inaad ka nadiifiso bogga. Kala duwanaanshiyaha^(Variables) waxaa ka mid ah Lacag caddaan^(Cash) ah , soo dejin, dhammaan nidaamyada, xogta qaab-qaabaysan, lacag caddaan^(Cash) ah, xog-ururin, xogta plugin, ereyada sirta ah iyo in ka badan.

10. Horumarinta Shabakadda Google Chrome Extension

Horumarinta Shabakadda Google Chrome Extension^{(Web Developer Google Chrome Extension)} waxay u ogolaataa horumariyeyaasha iyo naqshadeeyayaasha inay si fudud u xisaabiyaan, u falanqeeyaan oo u hubiyaan bogaggooda shabakad kasta xadgudubyada qaabaynta ugu fiican, kood samaynta, isticmaalka, iyo hagaajinta mashiinka raadinta.

Waa qalab dhan-in-mid weyn oo aan ku cuslan sahaminta kheyraadkayaga weli waxay siisaa tiro macluumaad ah oo faa'iido u leh naqshadeynta shabakadda sidoo kale waxay mas'uul ka tahay walxaha hagaajinta mashiinka raadinta gudaha mareegaha ama bogga.

 Kordhinta ayaa ku rakibta aaladda aaladaha horumariyaha shabakadda ee badan.

Qalabku wuxuu ku siin doonaa tilmaamo ku saabsan cabbirka bogga, ballaca, iyo cabbirrada kuwaas oo khilaaf ka dhigaya isticmaalka ugu wanaagsan ee aaladaha badan. Waxay kuu oggolaaneysaa inaad hubiso JavaScript -ka ku duugan oo aad ku aragto mareegahaaga adoo isticmaalaya jilitaan qalab kala duwan.

Kordhintu waxay si fiican ugu shaqeysaa Windows , Linux iyo Mac OS . Marka lagu daro kood-samaynta iyo arrimaha naqshadaynta, waxa ay sidoo kale ku siin doontaa aragtiyo ku saabsan macluumaadka summada meta, madax-jawaabeedka, macluumaadka midabka, iyo macluumaadka goobta.

Waxaad dib u eegi kartaa sifooyinka ugu muhiimsan ee qalabka iyo sidoo kale awood buuxda ee horumarinta Chris Pedericks' website .

Shaki kuma jiro in ay jiraan tiro badan oo tayo sare leh oo faa'iido leh Chrome kordhinta kuwaas oo naqshadeeye shabakad ama horumariye isticmaali karo.

Liiskani waxa uu soo bandhigayaa dhawr ka mid ah qalabka ugu caansan uguna waxtarka badan. Ma haysaa wax talobixin ah oo ku saabsan aaladaha aad u malaynayso inaan ka faa'iido badanahay ama ka sarreeyo kuwa liiskan ku jira? Aan ogaano.

Top 10 Chrome Extensions and Tools for Web Designers

Іf you are dеsigner 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

• 8-da Goobood ee ugu Wanaagsan ee Isku xirka Bulshada ee Nashqadaha Sawir-qaadayaasha si ay u soo Bandhigaan Bootfiliyooyinkooda

• Spotify Web Player: Sida loo galo oo loo isticmaalo

• 7 Qalabka ugu Fiican iyo Apps si aad u abuurto Meme adiga kuu gaar ah oo bilaash ah

• Waa maxay sababta ay weli ugu habboon tahay u adeegsiga Bing raadintaada Shabakadda

• 8 Aaladaha loogu Sameynayo Sawirro Si Wanaagsan u Leh Goobaha Warbaahinta Bulshada

• 120Hz TV-yada iyo Taleefanka ayaa halkan jooga: Ma u baahan tahay?

• Shabakadda Shukaansiga ugu Fiican iyo Apps qof walba 2021

• 8-Siyaasadeed Hoos-u-dhac Siyaasadeed oo loogu talagalay Dood-Siyaasadeed Deggan

• 12-ka Shabakadood ee ugu Faa'iido La'aanta ah ee waqtiga lagu dilo laguna raaxaysto

• 6 Goobaha Lagu Ciyaaro Ciyaaraha Retro Online Lacag La'aan

• 6 Qalab Wadaag Shaashad Online ah oo Bilaash ah

• 10ka Aaladaha Muhiimka ah ee Reer Guuraaga Dijital ah

• 30-ka ugu Wanaagsan ee Is-horumarin Hoosaadka ee Reddit

• 3-da Aaladaha OCR ee khadka tooska ah ee ugu Wanaagsan ee Laga Soo Saaro Qoraalka Sawirada

• Sida loo baadho buuga Chrome ka

• 5-ta Shabakadood ee Dayactir Kumbuyuutarka Fog ee ugu Wanaagsan si aad Hadda Caawinaad u Hesho

• 10ka Goobood ee ugu Wanaagsan ee lagu Tijaabi karo Xawaarahaaga Wax Qorista

• 5-ta Goobood iyo App-ka ugu Wanaagsan ee lagu Barto Gitaarka

• 5-ta Goobood ee ugu Wanaagsan ee laga Helo Macallin Online ah oo loogu talagalay dadka waaweyn iyo carruurta

• 6-TumbleUpon Beddelka ugu Fiican