Vi byter namn till Yetric AB. Läs mer om vad det innebär på yetric.com
logotype

80 Ridge Street Media

Vi är experter på User Experience

Användaren i fokus. Effektivare appar. Bättre lönsamhet.

Foto från Revet, Jonstorp

Gömda inställningar i Chrome Developer Tools

Publicerad av   i Webbutveckling

Chrome Developer Tools tillsammans med webbramverket Flask, Compass/Sass och Grunt.js är de verktyg som besparar mig mest tid när jag utvecklar nu för tiden. För att göra utvecklingen ännu mer strömlinjeformad i Chrome så kan man göra lite extra inställningar som kan hjälpa till.

Google Chrome inställningar

För att komma igång och testa inställningarna nedan, se till att först få upp Chrome Developer Tools genom att köra CMD + ALT + I (⌥⌘I Mac) eller CTRL + Shift + I (Windows + Linux). Klicka sedan nere i högra hörnet på kugghjulet. Då får du upp Chrome Developer Tools inställningar.

 

Stäng av cachning i Chrome

Chrome Developer Tools General Settings

Under utveckling kan det vara en god idé att stänga av cachning för att ens ändringar i css:er, javascript och markup snabbt ska slå genom utan att behöva försäkra sig om att man har senaste versionen genom upprepade reloads. För att stänga av cache, klicka i Disable cache under General settings.

Stäng av JavaScript i Chrome

Ofta när man utvecklar har man lagt till en massa lull-lull med JavaScript och allt verkar fungera smutt, men hur bra fungerar din webbplats om man inte har JavaScript påslaget, detta är ett bra sätt att testa att du inte har missat några viktiga formulärvalideringar på serversidan, se hur sajten kommer fungera när sökmotorer eller andra klienter som inte är beroende av JavaScript accessar din webbplats. För att stänga av JavaScript, klicka i Disable JavaScript under General Settings.

Ändra User-agent sträng i Chrome

Kanske gör du något trix beroende på vilken klient som kommer till din webbplats (om det är bra eller inte är en annan fråga). Ett bra sätt att testa detta kan då vara att ändra så kallad User-agent sträng. Det betyder att du säger åt Chrome att identifiera sig som en annan webbläsare via User-agent-strängen. Detta kan du göra genom att klicka i User Agent under fliken Overrides. Där kan du välja mellan olika fördefinerade klient-strängar eller lägga till en egen.

Ställ in storlek på viewporten i Chrome

Om du utvecklar mobil webb eller mobil hemsida kan det vara smutt att ställa in viewporten till en storlek som gäller för just den storlek av telefon som du just nu utvecklare eller buggfixar för. Denna inställning är väldigt bra när du jobbar med responsiv webbdesign och vill fokusera på att få en specifik storlek perfekt. Du slipper resiza fönstret och får istället en exakt storlek så du kan fixa till de flesta renderingsglitchar som finns innan du testar sajten på riktigt i en mobil eller ipad. För att ställa in detta klickar du in på Overrides och klickar i Device Metrics och fyller i den storlek som gäller för den mobil du ska utveckla för.

Flytta Chrome Developer Tools till sidan

Ett sista tips är att du kan flytta på Chrome Developer Tools. I General Settings kan du klicka i Dock to Right. Jag tycker det är bra om man jobbar på en laptop exempelvis, risken är annars att Developer Tools tar upp för mycket skärmyta om man har den nedtill.

 

Kategorier

Nyckelord

Kommentarer

  • av Henrik

    Hej Mattias,
    wow vad du skriver enkelt om svåra saker! Tack för det.

Vill du lära dig mer om User Experience?

Anmäl dig till vår nyhetslista så får du tips direkt till din e-post.

Vill du lära dig mer om User Experience?

Anmäl dig till vår nyhetslista så får du tips direkt till din e-post.

Några av våra kunder


Senaste på bloggen

På vår blogg kan du läsa våra tankar kring User Experience.


80 Ridge Street Media AB

Bättre och mer effektiv webb och appar med fokus på User Experience, Product Management, SEO, Webbutveckling. Knivsta, Uppsala.

Åsgatan 80
74145 Knivsta, Uppsala
Telefon 0735-336699
E-post info@ridgestreet.se
Webb
Facebook ridgestreet
Twitter @80ridgestreet
Google Plus Google+