Google er uden tvivl den mest brugte og elskede søgemaskine, og dens Chrome-browser, som kombinerer moderne teknologier og enkelt brugergrænseflade, har længe været en favorit blandt brugere for sine hurtige, enkle og sikker adgang på internettet.

Naturligvis var Firefox-browseren i mange år populær blandt webudviklere, men med stigningen i antallet af udvidelser og indbyggede værktøjer til Chrome, blev Googles browser førende og indtog sin niche i webdesignverdenen.

I den forbindelse besluttede jeg at introducere dig til nogle nyttige udvidelser, der i høj grad kan lette dit arbejde som webdesigner.

WhatFont

Med de tusindvis eller endda millioner af websteder, vi kigger på hver dag, er der altid noget, der vil fange en designers øje - en widget, en dynamisk funktion eller den fantastiske skrifttype, du gerne vil bruge i dit næste projekt, men som ikke aner hvad det hedder. Dette er situationen, hvor WhatFont-udvidelsen kommer til undsætning. Med den kan du undersøge alle skrifttyperne på siden og hurtigt identificere deres navne, så du kan begynde at søge efter dem. Derudover giver udvidelsen mulighed for at bestemme, om en skrifttype tilhører kategorien gratis eller premium skrifttyper, og om den er i databasen Google skrifttyper eller Typekit.

Font Legeplads

En anden fantastisk udvidelse til at arbejde med skrifttyper og typografi, som bliver en uundværlig assistent webdesigner. Med Font Playground kan du ændre skrifttypestil, størrelse og effekter på aktive sider uden at foretage ændringer i din kode. Udvidelsen giver dig mulighed for frit at eksperimentere med skrifttyper, se, hvordan de interagerer med hinanden, og først derefter ændre sidekoden.

User-Agent Switcher

Teknologier udvikler sig hver dag, hvilket betyder, at webdesignere skal tilpasse sig dem og overholde dem. Med denne udvidelse kan du nemt og hurtigt se, hvordan din side vil se ud ikke kun på forskellige enheder, men også i forskellige browsere. Dette vil hjælpe dig med at eksperimentere med, hvordan webstedet ser ud, når det vises på forskellige enheder, og vil derfor forbedre dit design og skabe bedre produkter.

Yslow

Hvor hurtigt din side indlæses afgør, om du vil være i stand til at fastholde brugere. Lad os se det i øjnene, få mennesker ønsker at sidde og vente, indtil de fuldt ud kan se det indhold, de har brug for. For at forhindre, at dette sker med dit websted, skal du bruge Yslow-udvidelsen, som giver dig mulighed for at kontrollere, hvor hurtigt din side indlæses og bestemme, hvilke elementer, hvis nogen, der bremser indlæsningstiden.

Tjekliste for webudviklere

En webdesigners opgave er ikke kun at skabe smukt design, men også for at lave en hjemmeside, der vil fungere perfekt og opfylde alle de nødvendige parametre. Med webudviklerens tjeklisteudvidelse kan du hurtigt og nemt tjekke dine sider for SEO-overholdelse, indlæsningshastighed, synlighed og brugervenlighed. Hvis du for eksempel under dit arbejde har glemt at sætte en metatitel, vil udvidelsen straks give dig besked om dette problem. Hvis du vil tjekke websiden mere grundigt, så er der en sektion til dette " Mere information at hjælpe”, som er placeret nederst på siden og giver en mere detaljeret tjekliste.

Responsiv webdesign tester

Flere og flere brugere foretrækker at få adgang til internettet via deres mobile enheder, hvilket betyder, at når en webdesigner opretter den næste hjemmeside, skal den være særlig opmærksom på, hvordan den vil se ud på de samme enheder. Og taget i betragtning, at der hvert år kommer flere og flere forskellige modeller, bliver det sværere for designere at leve op til dem. Men udvidelsen Responsive Web Design Tester hjælper dig med at fuldføre denne opgave meget hurtigere. Med den kan du teste dit design på forskellige enheder og skærmudvidelser for at sikre dig, at det ser lige godt ud på hver enkelt og er virkelig responsivt.

Instant Wireframe

Der er projekter, der kræver meget mere tid at perfektionere og gennemføre. Der er tidspunkter, hvor du kigger på nogle hjemmesider og tænker på, hvor godt et stykke arbejde designere og udviklere gjorde for at sikre, at resultatet blev, som det blev, og at selve hjemmesiden så perfekt og afbalanceret ud. Med Instant Wireframe-udvidelsen kan du aktivere en wireframe-visning af en side, så du kan bore ned på en side (allerede offentliggjort eller lokal), se dens struktur og derefter potentielt implementere noget lignende i dine fremtidige projekter.

PerfectPixel

Der er ikke noget værre end at skabe et fantastisk design, blot for at finde ud af efter at have oversat det til kode, at webstedet ikke helt stemmer overens med det, der oprindeligt blev oprettet. I dette tilfælde er PerfectPixel-udvidelsen et must-have for dig. Takket være det, vil du være i stand til at lave hjemmesider, der præcis matcher det, du har lavet – dit design. Ved hjælp af simple handlinger du kan placere den øverst på din side gennemsigtigt billede af dit design for at kontrollere, at de matcher ned til hver pixel.

Chrome palet

Hvor ofte sker der situationer for dig, når du finder perfekt billede til dit design, men ikke sikker på hvilken farveskema Er det bedre at bruge det, så det passer harmonisk ind i designet? Det er værd at bemærke, at dette almindeligt problem for mange designere. Men med Chrome Palette vil du løse dette problem på ingen tid. Udvidelsen vil oprette 64 til dig farvepaletter til et udvalgt billede, som du kan bruge som inspiration til dit projekt.

Sidelineal

Meget enkelt, men meget nyttig udvidelse, som er en almindelig lineal, med hvilken du nemt kan bestemme højden, bredden og placeringen af ​​ethvert element på din side.

Held og lykke med dit arbejde og flotte designs!

Der er en flok gratis udvidelser Chrome for at gøre dit liv lettere - vi har udvalgt de bedste.

Chrome DevTools- det er fantastisk, men det er muligt at tilføje endnu mere interessante muligheder ind i din browser for at gøre webdesign og udvikling meget nemmere. Vi præsenterer 32 af vores foretrukne Chrome-udvidelser.

Fremskynd din elementstylingproces radikalt med DomFlags, en virkelig episk udvidelse, der lader dig oprette tastaturgenveje til DOM-elementer! Disse er som bogmærker til at navigere i DOM og vil ændre den måde, du arbejder med DevTools på.

Her interessant måde Engager folk i diskussion: Highly Highlighter giver dig mulighed for at dele uddrag af artikler online, så du kan fremhæve de vigtigste dele af det, der er skrevet.

Booom gør Dribbble bedre ved at vise flere rammer på lister, tilføje Like og Add to Bucket-knapper, autoplaying GIF'er og gøre rulning uendelig.

Dette er en kraftfuld udvidelse til Chrome, der giver dig mulighed for at oprette et design og derefter eksportere det til CSS fil til brug på dit websted. Den understøtter lag og indeholder mange af de værktøjer, du er vant til at bruge i dit almindelige fotoredigeringsprogram.

Denne geniale udvidelse tager din kode og output snapshots til demoer og mockups. Du kan også tilføje temaer og effekter for at skabe billeder til dine salgsfremmende og online-porteføljer.

Som webudvikler skal du teste dine websider. At gentage de samme trin igen og igen kan blive en kedelig proces. iMacros er praktisk forlængelse til Chrome, som giver dig mulighed for at optage handlinger og gemme dem, så du kun skal udføre en bestemt handling én gang. Du kan derefter teste dine sider igen og igen, gentage handlinger med et klik på en knap, hvilket sparer værdifuld tid og giver dig mulighed for at fokusere på mere presserende problemer.

Hver designer og udvikler vil finde denne udvidelse uvurderlig. Font Playground giver dig mulighed for at eksperimentere med lokale skrifttyper og hele Googles skrifttypebibliotek på en webside uden at foretage egentlige ændringer. Skønheden ved denne udvidelse er, at den inkluderer alle de forskellige skrifttypestile, stilarter og teksteffekter, så du kan forhåndsvise websiden, før du implementerer ændringer.

Det her Chrome-udvidelse er et meget nyttigt værktøj, der gør præcis, hvad navnet siger - ændrer størrelsen på dit browservindue for at hjælpe dig med at oprette adaptivt design websted. Vælg fra en liste over populære skærmstørrelser, eller tilføj brugerdefinerede størrelser og opløsninger selv for øget nøjagtighed.

Hvis du nogensinde skal arbejde med et billedlayout med inline tekst, kan denne udvidelse spare dig for lidt irritation. Project Naphtha kan redde dig fra en verden af ​​mild irritation. Takket være smarte OCR-tricks giver udvidelsen dig mulighed for at fremhæve, kopiere og indsætte tekst fra ethvert billede og kan endda oversætte det for dig.

Meget nyttig udvidelse til Google Chrome, der giver udviklere og designere mulighed for at identificere de skrifttyper, der bruges på en webside. Så hvis du støder på en underligt udseende webskrifttype, som du vil bruge i et af dine fremtidige projekter, skal du bare holde markøren over den og straks finde ud af, hvilken skrifttype det er.

Dette værktøj tjekker ikke kun, hvor hurtigt dine websider indlæses, det fortæller dig også, om det bremser dem. Yslow tjekker din webside mod 23 ud af 34 regler defineret af Yahoos præstationsteam. Dette er ekstremt nyttigt værktøj at analysere websider og foreslå måder at forbedre deres effektivitet på.

Som webudvikler spørger du måske dig selv, hvordan du levede uden denne udvidelse. Det tilføjer en knap til panelet Chrome værktøjer med mange nyttige værktøjer til webudviklere. Dette er den officielle port for webudviklerudvidelsen til Firefox.

Page Ruler er et fantastisk værktøj til præcis måling elementer på enhver webside og deres efterfølgende behandling i henhold til dine krav. Tegn en lineal for at få pixeldimensioner og placering.

Dette værktøj giver dig mulighed for at kontrollere, om dine websider følger bedste praksis når det kommer til SEO, brugervenlighed, tilgængelighed og ydeevne (indlæsningshastighed). Så hvis din side for eksempel mangler et H1-tag eller ikke har nogen meta-tags, giver udvidelsen dig besked, så du hurtigt kan løse problemet. Hvis du klikker på linket "flere detaljer og hjælp" nederst i udvidelsen, finder du en mere dybdegående liste.

En sand perle for alle webudviklere, DevTools Autosave giver dig mulighed for automatisk at gemme alle ændringer, der er foretaget på en webside i CSS og JS gennem Chrome DevTools. Udvidelsen er nem at sætte op og bruge, og vil også spare dig for en masse tid.

Gør enhver webside til en wireframe med blot et enkelt klik. Denne Google Chrome-udvidelse hjælper webudviklere og designere med at se websider, uanset om de er lokale eller online, med en wireframe-overlay.

ColorZilla-udvidelsen er en avanceret pipette, farvevælger, gradientgenerator og andet nyttigt farveværktøjer, som hjælper dig med dit design - lige i dit browservindue.

Det er en multi-platform mobilmiljøemulator, der kan hjælpe dig med at teste dine webapplikationer ved hjælp af forskellige enheder og skærmopløsning. Ripple Emulator kan bruges i kombination med eksisterende udviklingsværktøjer til at udføre debugging, DOM-inspektion og automatiseret test.

Hvis du er webudvikler, har du sikkert hørt om Stack Overflow- et sted at løse eventuelle problemer og problemer relateret til udvikling. Hvis ikke, så bør du helt sikkert tjekke det ud, fællesskabet blomstrer og dækker en bred vifte af emner fra C# og Java til PHP og jQuery. Denne fantastiske udvidelse tilføjer et søgefelt direkte til din browser, så du kan søge i Stack Overflows enorme ressourcer.

Det kan være ret svært at huske hver funktion, så hvis du har været i situationer, hvor du skulle bruge timer på at søge efter en bestemt PHP funktioner på Google, så vil denne udvidelse helt sikkert fange din opmærksomhed. PHP Ninja Manual giver dig al PHP-5.5-dokumentationen med eksempler på otte sprog, alt sammen fra din browsers komfort.

Designere hader det, når de skaber et fantastisk design, der ender med ikke at matche kodningsresultatet. PerfectPixel er faktisk den perfekte udvidelse til webudviklere, der ønsker at udvikle websteder, der er nøjagtige billeder design. Denne letanvendelige udvidelse giver dig mulighed for at overlejre et gennemsigtigt billede oven på en webside og udføre pixelsammenligninger for at sikre 100 % nøjagtighed.

Dette værktøj giver dig ikke kun mulighed for at se den kildekode, du allerede arbejder med, men det fungerer også som CSS editor, hvor du kan redigere dine websider og se ændringer med det samme.

Fantastisk værktøj for at se, hvordan webstedet ser ud ved hjælp af en række forskellige brugerværktøjer såsom iPad, iPhone eller Android. Dette kan være meget nyttigt, hvis siden er blevet hacket, og på denne måde kan du se hvordan søgemaskiner se siderne.

En af de mest populære og nyttige IE-emulatorer. Det giver webudviklere mulighed for at teste websider i forskellige versioner IE direkte i Chrome-browseren.

Det er en nem at bruge, gratis online fotoeditor, der lader dig redigere websider, billeder og skærmbilleder. Men det er ikke det, der gør det godt. PicMonkey giver dig mulighed for at tage ethvert billede og tage et skærmbillede af hele siden med et klik på en knap. Når du har valgt et billede, kan du redigere det, som du vil, ved at anvende effekter for at ændre eksponeringen.

Farvesynsmangel eller farveblindhed påvirker millioner af mennesker rundt om i verden. Denne geniale udvidelse bruger en teknik, der giver dig mulighed for at skabe billeder, der er egnede til visning af personer med denne lidelse.

Udvidelsen hjælper webudvikleren med at tjekke rammebibliotekerne, CMS og JavaScript på webstedet i det øjeblik, du ser det. I adresse bar, vises et ikon, der angiver det detekterede bibliotek. Denne Chrome-udvidelse har høj vurdering og kan registrere mere end 100 populære CMS- og JS-biblioteker.

Har du afsluttet din hjemmeside, men glemt at tjekke alle links? Uanset hvor omhyggeligt du har fulgt det, er det muligt, at du er gået glip af en eller to, og det vil være noget af en opgave at gennemgå dem alle. Med denne udvidelse kan du blot lade dit websted køre, og det vil læse alle links på hver side og fremhæve de tilgængelige grøn og ødelagte - i rødt.

Det er bare en lille udvidelse, der viser populære billeder fra Fickr, hver gang du åbner vinduet. Klik på et billede for at se det på Flickr eller klik på brugernavnet for at se flere billeder fra fotografen.

Som med den tidligere udvidelse vil du i hver ny fane se mesterværker fra så store kunstnere som Van Gogh og Monet. Hvis du kan lide billedet, skal du klikke på det, og det fører dig til Google Cultural Institute-webstedet, som er fyldt med information om værket og dets skaber.

Så din sidste regning er fra mobiludbyder for Internettet var imponerende? Gå ikke i panik. Du har bare brug for denne udvidelse: den reducerer mængden af ​​data, der bruges, når du surfer på nettet. På tænder for Chrome vil bruge Google-servere at komprimere sider, før de indlæses. Der er kun én advarsel: SSL og inkognitotilstand vil ikke være aktiveret.

Uanset hvad du har hørt om Google Chrome, når det kommer til webdesign og udvikling, er Firefox stadig bedste browser med et venligt udviklingsmiljø, som du kan finde.

For helvede, Firefox har det endda specialversion en browser, der er skabt til webudviklere. Så meget bekymrer Mozilla sig om webdesignere og udviklere.

Firefox har også en enorm samling af udvidelser, der gør browseren mere kraftfuld for maksimal effekt. Her er nogle af bedste udvidelser Firefox, som du kan bruge til at gøre dit webudviklingsliv lettere.

Installer, test og brug de fleste af disse udvidelser. Når alt kommer til alt, er de alle gratis at bruge!

• Hvad det gør: Inspicerer websider

Firebug er en udvidelse, som webdesignere og udviklere simpelthen ikke kan leve uden. Denne udvidelse er som en forbedret version af den integrerede udviklerkonsol, der følger med Firefox. Firebug gør det meget nemmere for dig at inspicere elementer på websider og vise dig, hvordan tingene fungerer på tværs af forskellige websteder.

• Velegnet til: webudviklere
• Hvad det gør: klient til Firefox

FireFTP er en FTP/SFTP-klient til Firefox, der giver dig mulighed for sikkert at uploade og overføre filer mellem din computer og serveren direkte fra din browser. Med denne tilføjelse behøver du aldrig at hoppe mellem din browser og klientapplikationer FTP.

• Velegnet til: webudviklere og designere
• Hvad det gør: analysere og kontrollere websider

Det er en alt-i-en-udvidelse, der tilføjer en række nyttige værktøjer til din Firefox. Nogle af værktøjerne inkluderet i denne tilføjelse er tabelvisning og redigering CSS stilarter, deaktivering af stilarter, fejlfindingsværktøjer osv.

• Hvad det gør: Farveanalyseværktøj

ColorZilla er et fantastisk værktøj, som front-end webdesignere vil finde ganske nyttigt. Denne tilføjelse har en dropper til hurtigt valg farver på en webside, generator CSS-gradient, farveanalysator, farvepaletter og meget mere.

• Velegnet til: webudviklere
• Hvad det gør: Ændre websteder med tilpasset kode

Elsket af over en million Firefox-brugere, Greasemonkey er en udvidelse, der vil give dig uendelig sjov. Denne tilføjelse giver dig mulighed for at tilpasse populære websteder ved at redigere dem ved hjælp af egen kode JavaScript. Du kan også nyde scripts, der allerede er oprettet af andre udviklere.

• Bedst til: Interface designere
• Hvad det gør: Justerer forskydningen af ​​webelementer

Simpelt men nyttigt plugin, som giver dig mulighed for at inspicere webelementer og visuelt se, hvor mange pixels der er slukket i elementerne, hvilket skaber en komposition med gennemsigtige lag. Ved at bruge denne sammensætning kan du konfigurere din faktiske webside, så den matcher den overlejring, der skal opnås bedste resultat uden gætværk.

For eksempel, hvis et af billederne på din webside overlapper et andet objekt, kan du bruge Pixel Perfect til at bestemme, hvor mange pixels du skal justere for at få det billede på det rigtige sted.

• Velegnet til: webdesignere
• Hvad det gør: Indlæser alt fra en webside

Dette plugin lever op til sit navn ved at give dig mulighed for at downloade alt fra en webside. Med et enkelt klik kan du downloade alle billeder, links og andre data på en webside ved hjælp af denne udvidelse. Tilføjelsen har også en indbygget downloadaccelerator, der optimerer downloadhastigheden med fire gange.

• Bedst til: Interface designere
• Hvad det gør: Tjek websider ind Internet Explorer

Tro det eller ej, der er folk, der stadig bruger de gamle Internet versioner Explorer for at få adgang til internettet. Oprettelse af websteder, der fungerer godt i disse ældre browsere, er et af de problemer, som webdesignere stadig kæmper med. Dette plugin gør det nemt at tilpasse webdesign til ældre Internet browsere Explorer, skaber ny fane i IE.

• Velegnet til: webdesignere og udviklere
• Hvad det gør: Viser dig om den teknologi, der bruges på webstedet

Er du i tvivl om, hvilke teknologier der blev brugt til at oprette dine yndlingswebsteder? Så vil denne tilføjelse være nyttig for dig. BuiltWith er en udvidelse, der giver dig mulighed for at scanne hjemmesider for at finde, hvilke teknologier der bruges på siden. Et fantastisk værktøj for alle håbefulde webdesignere til at lære af færdige hjemmesider.

• Velegnet til: webudviklere
• Hvad det gør: Slår Java til eller fra

Denne tilføjelse giver dig mulighed for nemt at aktivere eller deaktivere Java i din browser. Den kan også slukke Javascript webside, Cookies, animerede billeder, Flash og mere. Dette er et nyttigt plugin, ikke kun for udviklere, men også for almindelige brugere at forbedre browsersikkerheden og reducere båndbredden.

• Bedst til: Interface designere
• Hvad det gør: Måler elementer i pixels

Funktionen af ​​denne tilføjelse er enkel, den giver dig mulighed for at tegne en virtuel lineal oven på en webside eller et element på en side for at måle bredden, højden eller pixeljusteringen af ​​elementet på websiden. MeasureIt er nyttigt for de fleste frontend-udviklere at skabe wireframes.

• Velegnet til: webdesignere
• Hvad det gør: skifter sprog i browseren

Dette er et nyttigt værktøj, der øjeblikkeligt oversætter din Firefox til et andet sprog. Alt i din browser, inklusive brugergrænsefladen, stavekontrolordbogen og webstedets indhold, vil blive oversat til det sprog, du vælger. En fantastisk funktion, som du kan bruge, når du udvikler flersprogede hjemmesider.

• Bedst til: Interface designere
• Hvad det gør: generere dummy-tekst

At skabe dummy-tekst til dine nye hjemmesidemodeller og prototyper er en kedelig opgave, som næppe vil underholde selv en enkelt designer. Denne udvidelse gør processen mindre kedelig ved at tillade dig at generere Lorem Ipsum dummy-tekst direkte fra Firefox.

• Velegnet til: webudviklere
• Hvad det gør: redigerer og opretter cookies

Denne tilføjelse administrerer ikke kun dit websteds cookies, men giver dig også mulighed for nemt at redigere og oprette nye filer. Nogle af pluginets funktioner inkluderer inline browsing cookies, muligheden for at ændre domænet, muligheden for at redigere flere cookies på én gang og meget mere.

• Bedst til: Interface designere
• Hvad det gør: Vælger farver på en webside

Et brugervenligt værktøj, der giver dig mulighed for at vælge farver fra enhver pixel på en webside og nemt kopiere farvekode RGB eller Hex til brug i dine egne projekter. Skønhed og visuel grænseflade Dette værktøj gør det meget nemmere for begyndere at lære om farver på websider.

• Velegnet til: webdesignere og udviklere
• Hvad det gør: Giver oplysninger om den software, der bruges af webstedet

I lighed med BuiltWith-tilføjelsen er Wappalyzer en anden nyttig udvidelse, der giver dig mulighed for at finde ud af, hvad software brugt på hjemmesiden. Du kan for eksempel finde ud af, hvilken type CMS siden bruger, hvilket operativsystem hjemmesideserveren understøtter og meget mere.

• Velegnet til: webudviklere
• Hvad det gør: Ændrer browserens brugeragent

Vil du vide, hvordan din hjemmeside kommer til at se ud på forskellige platforme og styresystemer? Så er dette et værktøj, der helt sikkert vil være nyttigt for dig. User-Agent Switcher giver dig mulighed for at skifte mellem forskellige platforme såsom Android, Mac, Windows og udvalgte operativsystemer for at ændre din browsers brugeragent.

• Velegnet til: webdesignere og udviklere
• Hvad det gør: Viser et eksempel på brug af browserens hukommelsesfane

Det her praktisk tilføjelse, som vil hjælpe dig med at bestemme, hvor meget af din computers ressourcer, der bruges af hver åben fane i Firefox. Du kan bruge dette værktøj til at finde ud af, hvor mange ressourcer dit websted bruger og optimere dit websted for maksimal ydeevne.

• Velegnet til: web- og grafiske designere
• Hvad det gør: Åbner billeder i Photoshop

Denne tilføjelse gør, hvad dens navn siger, åbner blot med et enkelt klik de billeder, du finder på en webside med ved hjælp af Photoshop. Ingen grund til at uploade et billede eller starte Photoshop, udvidelsen vil gøre alt, hvad du har brug for.

• Bedst til: Interface designere
• Hvad det gør: Forbedrer HTML-tabeller

Grafer, statistikker, sammenligninger, tabeller - denne tilføjelse kan det hele. Du kan bruge dette værktøj til at skabe brugervenlige og smukke HTML-tabeller og diagrammer.

• Velegnet til: webudviklere
• Hvad laver han: SSH klient til Firefox

Typisk skal du installere et program for at køre SSH-terminalen. Disse applikationer adskiller sig på én ting operativ system fra en anden. FireSSH virker dog på alle platforme, så længe du har Firefox. Udvidelsen giver dig mulighed for at starte en SSH-terminal direkte fra browseren.

• Bedst til: Interface designere
• Hvad det gør: Opdater automatisk websider

En af de irriterende ting, som webdesignere står over for, når de designer hjemmesider, er at skulle manuelt opdatere websiden efter hver ændring. lille forandring ind i kode. Automatisk opdatering er en udvidelse, der løser dette problem ved at give dig mulighed for automatisk at opdatere en eller flere faner i Firefox med intervaller, du definerer.

• Bedst til: Interface designere
• Hvad det gør: Ændrer Firefox-vinduer til bestemte skærmopløsninger

Denne tilføjelse giver dig mulighed for at ændre størrelsen på dit Firefox-vindue ved bestemte opløsninger for at se, hvordan dit websted ser ud på forskellige skærme. Du skal installere Firefox Add-On Bar for at denne udvidelse fungerer korrekt.

• Velegnet til: webdesignere og udviklere
• Hvad det gør: finder oplysninger om sidens skrifttyper og dens elementer

Font Finder - praktisk værktøj, som giver dig mulighed for at undersøge elementer på en hjemmeside for at finde ud af det vigtig information om de skrifttyper, der bruges på siden, såsom skrifttypefamilienavn, skrifttypefarve, linjeafstand, indretning og meget mere.

• Bedst til: Interface designere
• Hvad det gør: tjekker websider i forskellige browsere

Funktionen af ​​denne tilføjelse er enkel. Det giver dig mulighed for øjeblikkeligt at åbne enhver webside, du ser i Firefox, ved hjælp af en anden browser med blot et enkelt klik. Der er ingen grund til at kopiere URL'er, åbn hver browser en efter en og indsæt URL'erne for at åbne hjemmesiden.

• Velegnet til: webdesignere og udviklere
• Hvad det gør: rydder browserens cache

Denne tilføjelse rydder øjeblikkeligt cachen Firefox browser(RAM og DISK) for at reducere brugen af ​​computerressourcer. Udvidelsen giver dig mulighed for at rydde cachen ved blot at klikke på en knap eller trykke på F9-tasten på dit tastatur. Hvis du hurtigt vil se ændringer foretaget på en webside, vil denne tilføjelse være meget nyttig.

Hvis du er en udvikler, så har du brug for mere kraft fra din browser. Derfor denne artikel skabt til dig. Installer udvidelser og opgrader din browser!

Hej alle! Mit navn er Alexander Izora. Jeg laver webudvikling, kodning, og jeg er iværksætter.

Min browser er mit våben. Jeg bruger det hver dag og løser 90% af mine problemer med det. Mit liv ville ikke være så glat uden disse vidunderlige extensions. Og jeg deler dem gerne med dig.

Lignende web

Dette er en udvidelse, jeg aldrig kunne have forestillet mig. Lignende web bruger mørk magi til at vise webstedstrafik, trafikkilder, geolokalisering og en masse andre ekstremt nyttige oplysninger.

Vimium

Vimium er simpelthen en skønhed blandt alle extensions på vores liste. Vimium gør browsing superhurtigt ved at tilføje utallige nyttige tastaturgenveje.

Nøglefunktionen ved Vimium er dens driftstilstande. For eksempel, hvis du trykker på 'f'-tasten, vil du aktivere link-tilstand. Nu vil hvert link på siden have sit eget ID. Hvis du klikker på dette ID, vises et link. Nedenfor er et skærmbillede af denne mod i aktion. Ved at trykke på 'D' åbnes fanen 'Om' i en ny fane.

Forbandet hurtigt!

Men på trods af dette er Vimium ikke perfekt. Nogle AJAX-websteder fungerer ikke med denne udvidelse. Der er dog stadig for meget at lægge musen fra sig.

Grammatisk

Grammarly sørger for, at dine beskeder, dokumenter og indlæg er inde i sociale netværk er helt klare, fri for fejl og overbevisende. Udvidelsen har en klar brugergrænseflade og UX.

Jeg kan også godt lide, at Grammarly opfordrer folk til at købe pro-versionen af ​​denne udvidelse. Du skal betale for at bestemme komplekse opgaver. Store!

Info om billedstørrelse

Denne lille udvidelse gør kun én ting. Det viser billedets dimensioner.

Da Chrome ikke er en så nørd-orienteret browser som FireFox, har vi brug for denne lille udvidelse.

Google Analytics Debugger

Viser brugbar information i JavaScript-konsollen. Jeg bruger denne udvidelse, når jeg skal fejlrette tilpassede hændelser fra Google Analytics.

Tabstop

Tabstop forhindrer faner i at indlæse når starter Chrome. For at indlæse en blokeret hirsefane skal du klikke på den, og siden genindlæses automatisk.

Denne enkle udvidelse kan reducere dit Chrome-forbrug og indlæsningstid markant.

Session Buddy

Session Buddy er en must-have-udvidelse for alle, der ikke bare vil lukke alle deres faner. Denne udvidelse giver dig mulighed for at gemme sessioner, bare navngiv sessionen som du har brug for og i fremtiden bare finde den ved dette navn. Et "must have" element!

Oktotræ

Denne udvidelse viser træstrukturen af ​​et lager på GitHub og GitLab. Det er meget lettere at navigere gennem depotet, hvis dets struktur præsenteres i form af et træ.

Forhåndsvisning af vurderinger til YouTube™

En anden udvidelse fra kategorien: "Hvorfor gjorde de det ikke selv?!" Det viser en lille vurderingsbjælke under hver videominiature. Med denne udvidelse ved du på forhånd, om videoen er god eller ej.

Den Store Suspender

Denne udvidelse suspenderer ubrugte faner og frigør systemressourcer som havde travlt med dem. Store!

Papir

Personligt har jeg bare brug for en masse plads, hvor jeg kan lægge mine tanker. Evernote til strukturerede data, Telegram til alle de tanker, der kommer mens du er på farten, Notion for interaktioner, klistermærker og blot en hvid tavle til at arbejde med markører. Denne udvidelse er et andet sted, hvor jeg sætter mine tanker. Papir er simpelt tekst editor, som åbner, når du åbner en ny fane.

Fontface Ninja

Har du nogensinde spekuleret på, "Hvilken skrifttype bruges på dette websted?" Hvis du nogensinde har stillet dette spørgsmål, vil du kunne lide denne udvidelse.

Marmoset

Marmoset er faktisk ikke engang en udvidelse, men en hel applikation. Uanset hvad, så er det forbandet godt. Marmoset giver dig mulighed for at lave smukke skærmbilleder af din kode, og det gør det meget hurtigt:

Perfekt til dem, der ofte skriver pædagogiske artikler.

Fyrtårn

Sidst, men ikke mindst på vores liste, er Lighthouse et open source-værktøj. kildekode, som er designet til at forbedre ydeevnen, kvaliteten og korrektheden af ​​dine webapplikationer.

Konklusion

Jeg håber, du er tilfreds efter at have læst denne liste over udvidelser. Hvis ja, så installer hurtigt hver af dem og prøv dem i dine virkelige opgaver.

Chrome er kraftfuld, hurtig og sikker browser, og det, der gør det endnu bedre, er de mange udvidelser, der er tilgængelige for download, som vil gøre din brug af browseren endnu mere bekvem. Disse udvidelser er en virkelig nyttig ting, fordi de giver dig mulighed for at tilpasse Chrome, så den passer til dig næsten til den mindste detalje. Dette øger programmets funktionalitet og øger din produktivitet.

Der er mange udvidelser, de er ekstremt nemme at installere. Alt du skal gøre er bare at gå til Chrome Webbutik og klik på installationsknappen. Alle. Applikationen vises automatisk i din browser.

Men i dag vil vi tale om udvidelser, der vil være nyttige for en webdesigner.

MagiCSS
MagiCSS er en CSS-editor i en udvidelse, der bruges direkte inde på siden. Dette er en forhåndsvisning i realtid af CSS-ændringer, skabt af Priyank Parashar. Alt du skal gøre er at starte MagiCSS og skrive din CSS-kode, som vil blive anvendt med det samme.

CSSViewer er en fed udvidelse, der er meget nem at bruge. Du klikker blot på ikonet på panelet, og hold derefter musen over ethvert element, hvis kode du vil se.

CSS-Shack er en udvidelse, der giver dig mulighed for at oprette lagstile og eksportere dem til separate CSS/filer. Funktionsprincippet er det samme som i grafiske redaktører.

CSS Shapes Editor
CSS shapes editor er en udvidelse til realtidsredigering af CSS-objekter. Denne editor er nem at bruge og vil være nyttig i dit arbejde.

Tjekliste for webudvikler
Enhver webdesigner har brug for denne udvidelse. Tjekliste for webudviklere kontrollerer enhver side for fejl.

Tjek Mine links
Tjek mine links er en udvidelse, der vil undersøge den side, du vælger, og fremhæve aktuelle og ødelagte links. Dette er en fantastisk måde at spare tid på, hvis du har brug for at tjekke, om alle links på et websted fungerer.

Dimensions er en meget nyttig udvidelse til måling af dimensioner på skærmen. Du kan måle objektets bredde og højde, afstanden mellem dem og meget mere.

Responsiv webdesign tester
Responsiv webdesigntester er en simpel udvidelse til Chrome, der kontrollerer, om din hjemmeside er fuldt responsiv.

PerfectPixel giver udviklere mulighed for at skabe et semi-transparent billede på toppen af ​​siden for at foretage sammenligninger ned til pixlen.

Instant Wireframe
Med denne udvidelse kan du se tabellayoutet på enhver side, du er interesseret i.

SnappySnippet er en udvidelse, der udtrækker CSS og HTML fra et valgt DOM-element. Dette giver dig mulighed for at sende kode til CodePen, jsFiddle eller JS Bin med et enkelt klik.

CSS3 generator
CSS3-generator genererer automatisk den CSS-kode, du har brug for. Dette er et praktisk værktøj for alle webdesignere.

WordPress Style Editor
WordPress-stileditoren giver dig mulighed for at udforske dit WordPress-stilark og foretage ændringer direkte til CSS. Du kan foretage ændringer i typografiarket uden FTP-programmer.

Perfmap er en nyttig udvidelse, der vil skabe varmekort dit websted ved at tjekke elementer for den nødvendige indlæsningstid i browseren.

Sidelineal
Sidelineal lader dig tegne linealer på et hvilket som helst sted, du vælger, som repræsenterer bredden, højden og positionen af ​​ethvert element.

ColorZilla
ColorZilla tilføjer farveværktøjer til din browser. Du vil have en pipette, en farvevælger, en palet og en gradientgenerator.