Viktiga Chrome-tillägg för webbdesign och webbutveckling

0 Shares

År sedan, den typiska webbläsaren för webbutvecklare var Firefox. Den här webbläsaren hade en rad verktyg och tillägg tack vare vilka det var möjligt att designa och felsöka webbar effektivt och enkelt. Men framgången med Googles webbläsare gjorde att utvecklare föredrar att skapa sina sidor framför den mest använda webbläsaren. Och därför har vi inte bara en samling exceptionella verktyg i den, utan vi kan också hitta en stor samling tillägg som hjälper oss att programmera webbplatser mer exakt och effektivt.

Viktiga Chrome-tillägg för webbdesign och webbutveckling

Chrome Developer Console

Google Chrome har sina egna utvecklarverktyg inbyggda i webbläsaren. Dessa verktyg är vad vi känner som “utvecklingskonsol” och vi kan starta den när som helst genom att trycka på F12-tangenten på vårt tangentbord. Även från Alternativ> Fler verktyg> Avsnittet för utvecklarverktyg .

Som vi kan se erbjuder denna konsol för utvecklare oss en rad verktyg som kan vara användbara när du testar och felsöker vilken webbplats som helst, oavsett om den är vår eller publicerad på nätverket. Vi kan hitta 9 verktyg, separerade i flikar, i det här avsnittet:

  • Trösta – En konsol som automatiskt upptäcker fel på webben så att vi snabbt kan åtgärda dem.
  • Element : visar HTML och CSS för sidan och låter oss ändra det direkt.
  • Källor : visar oss en tabell med alla resurser som har laddats på sidan.
  • Nätverk : en flik från vilken vi kommer att se alla anslutningar som sidan gör till servern, alla resurser den laddar ner och hur lång tid det tar att ladda var och en.
  • Prestanda – Ett prestationstest för webben.
  • Minne : låter dig dumpa minne för analys.
  • Ansökan : låter oss se alla filer som skapats av webben lokalt på vår PC.
  • säkerhet : låter oss granska säkerheten på webbsidan.
  • Fyr – Används för att identifiera och åtgärda problem med prestanda, tillgänglighet och användarupplevelse.

Det är en av de mest kompletta utvecklarkonsolerna vi kan hitta. Men också svårt att bemästra, eftersom, eftersom data är rå, måste vi gräva djupare för att göra ändringar och grundläggande tester. Och därför finns det tillägg.

Tillägg för att underlätta webbdesign

Även om vi med Chromes utvecklarverktyg kan göra nästan allt, finns det vissa uppgifter som är komplicerade och tar längre tid än de borde. Därför, om vi vill förenkla denna uppgift, kan vi ta till följande tillägg. Alla, naturligtvis, totalt free.

Window Resizer: testa webben på olika skärmstorlekar

När vi gör en webbsida är det väldigt viktigt att den är anpassad till alla typer av skärmar och upplösningar. Oavsett om vi kommer åt den via en smartphone, en surfplatta, en ultrabred skärm eller en liten bärbar dator måste alla element justeras korrekt. Eftersom vi med största sannolikhet inte har så många skärmar till hands, så är det bästa vi kan göra att ta till Fönster Resizer förlängning.

Detta tillägg gör att vi enkelt kan ändra storlek på webbläsarfönstret för att simulera olika upplösningar, både vertikala och horisontella. Vi kan välja de upplösningar som kommer som standard, eller skapa våra egna. Vi kan till och med ändra det med enkla kortkommandon.

Wappalyzer: känner på djupet till tekniken på vilken webbplats som helst

Webbplatser skrivs inte längre bara i HTML och CSS. Numera har sidorna andra språk (som JavaScript eller PHP) som gör att vi kan skapa dynamiska webbsidor med alla typer av innehåll. Dessutom brukar de också ha ett CMS och en rad tredjepartsskript och API:er som hjälper oss att forma det.

Om vi ​​har kunskap om programmering kan vi enkelt ta reda på all information genom att analysera rubrikerna. Men om vi inte vill komplicera det kan vi göra det med ett klick tack vare Wappalyzer . Detta tillägg låter oss känna till ramarna som en webbplats använder, CMS och till och med servern den körs på.

Library Sniffer: The Simple Alternative to Wappalyzer

Bibliotek Sniffer är en förlängning mycket lik den tidigare, så det finns inte mycket av det att lyfta fram. Tack vare det kommer vi enkelt att kunna känna till tekniken som en webbsida använder, men vi kommer att göra det på ett mycket mer förtäckt sätt: från själva adressfältet. Till höger om URL:en kan vi se en ikon som indikerar vilket CMS som används, och även ramverk och tredjepartstjänster som ingår.

Vilket typsnitt: Gillar du ett typsnitt? ta reda på vad det är

Ett av stilmärkena på varje webbplats är typsnitten, typsnittet. Källorna. En webbsida kan låta webbläsaren använda standardteckensnittet eller, om du vill ha en specifik typsnittstyp, kan du ange det i koden. Om vi ​​analyserar koden för en webbplats kan vi se om den har en specificerad källa eller inte. Men om vi inte vill komplicera oss själva är det enklaste att installera Vilken typsnitt , ett tillägg som tar hand om det automatiskt.

Webbutvecklare: ett allt-i-ett-verktygsfält för webbdesign

Ofta behöver en webbutvecklare ha tillgång till alla möjliga funktioner och verktyg för att till exempel kunna aktivera eller inaktivera skript, eller visa eller dölja alla bilder. Tack vare Webbutvecklare vi kommer att kunna lägga till en utvecklingsfält överst på vilken webbplats som helst.

Från det här fältet kommer vi att kunna göra on-the-fly ändringar av sidans HTML- och CSS-kod. Vi kan till exempel ändra storleken på bilderna, skärmens upplösning och till och med avaktivera element och tjänster, som JavaScript, aviseringar och till och med cookies. Viktigt att kontrollera hur sidan beter sig under alla möjliga omständigheter.

Code Cola, ändra CSS “i farten”

Stor, liten, röd, svart, vit, centrerad, justerad… hur ser bokstäverna och andra delar av en webbplats bättre ut? Vi kan alltid använda Chromes utvecklarverktyg för att testa Tack vare Kod Cola vi kommer att kunna se “i farten”, i realtid, stilen för alla element på en sida.

Detta tillägg gör att vi kan ändra bland annat teckensnitt, färg, stil och till och med orienteringen och storleken på både texten och alla element som har laddats på webben. Och allt från en mycket enkel meny tack vare vilken vi inte behöver ändra någon kod i redigeraren.

Checklista för webbutvecklare: analysera din webbplats för att följa god praxis

Att skapa en webbplats är ett ganska långt och komplicerat jobb, och det är lätt att göra ett misstag i processen. Även om vi kontrollerar flera gånger att allt är bra kan något förbises. Tack vare Checklista för webbutvecklare vi kommer att kunna lägga till en enkel checklista till vår webbläsare, tack vare vilken vi kan se till att var och en av de viktiga punkterna i webbläsaren uppfylls.

Vi kommer att se från grundläggande praxis, som att kontrollera länkar till optimering och SEO-uppgifter för Google. Vi kan markera alla uppgifter som vi utför en efter en och därmed kommer vi inte att missa någonting.

Kontrollera mina länkar: länkar nere? fixa det

Google gillar inte webbplatser med tappade länkar. Och det är en av de vanligaste positioneringsstraffen. Om vår webbplats har många länkar, och vi har ett CMS, kan vi använda det för att kontrollera allt och ta reda på vilka som fungerar eller vilka som är nere. Men om vi inte arbetar med ett CMS blir det väldigt komplicerat.

Tack vare Kolla Mina länkar förlängning kommer vi att kunna se, med ett ögonkast, vilka länkar som är nere eller har slutat fungera. Således kan vi redigera sidan för att korrigera dem, eller bättre, ta bort dem och undvika motsvarande sanktion från Google.

0 Shares