Share
Kolla in Chrome 4s fantastiska nya funktioner för utvecklare, till exempel plattformsupport, fantastisk webbinspektörintegration och praktiska nya tillägg. Det blir allt svårare att neka Chrome titeln som den nya webbläsaren för webbutvecklare. Om det inte är rätt där än, kommer det snart att bli!
Med snabba belastningstider, en snygg JavaScript-maskin, en solid WebKit-grund och stornamnssupport har Google Chrome fått en respektabel marknadsandel, och överträffar även Safari för att bli den 3: e populäraste webbläsaren i december. För utvecklare har Firefox dock blivit älskling för många på grund av dess förmåga att köra på vilket operativsystem som helst och på grund av sitt rika erbjudande av webbutvecklingstillägg, som Firebug och verktyget Web Developer. Men det är viktigt att testa JavaScript i alla webbläsare. Att ha en robust uppsättning verktyg i varje (inklusive Internet Explorer) är just vad utvecklare behöver för att få ut mesta möjliga av sin kod.
Lyckligt för oss har Google-folk arbetat hårt för att göra Chrome-plattformen, integrera WebKits fantastiska webbinspektör och lägga till tillägg, vilket gör Chrome 4 till ett otroligt användbart verktyg för webbutveckling. I den här handledningen visar jag några av de funktioner som gör Chrome 4 till ett utmärkt tillskott till webbutvecklaren.
Från och med 25 januari har Chrome 4 officiellt släppts som stabil för Windows. Mac- och Linux-användare måste dock vara lite modigare för att uppleva allt Chrome 4 har att erbjuda. Mac-användare måste ladda ner "dev" -versionen och Linux-användare "beta" -versionen, och det är mycket värt det! Kolla in följande länkar för att få en kopia av Chrome för operativsystemet som stöder allt vi diskuterar i den här artikeln:
Låt oss nu komma in i nitty gritty! I Firefox är Firebug en gudstjänst för utvecklare, som ger en debugging-konsol, HTML & CSS-manipulation, JavaScript-profilering och en hel del annan godhet. WebKit-folket tog märke till och under de senaste åren har de gjort en uppsättning verktyg som kallas Web Inspector, som erbjuder en liknande uppsättning funktioner till Firebug. Inom Chrome 4 är webinspektören märkt "Utvecklarverktyg".
Förutom Chrome 4 har webbinspektören funnits ett tag från tidigare versioner av Chrome och Safari, även om det är lite gömt. För att komma åt webbinspektören i olika webbläsare:
Om du inte har arbetat med Firebug eller Web Inspector-konsolen missar du ett bra sätt att hjälpa till att felsöka JavaScript. JavaScript-konsolen tjänar flera viktiga funktioner, till exempel att ta bort fel och presentera dem i ett användbart format, testa korta bitar av JavaScript och som ett bra ställe att logga in användbar information som variabla värden och körtider. Praktiskt taget använder jag regelbundet verktyget för att utvärdera prestanda för mina program och för att säkerställa att vissa variabler beräknas korrekt.
Förutom JavaScript-konsolen är det alltid trevligt att ha ett verktyg som gör att du snabbt kan se HTML och stilinformationen för vissa element på sidan. Panelen Web Inspector Elements ger en trädstrukturvy av Document Object Model (DOM), så att du kan borra ner i dokumentet för att välja ett objekt av intresse. Du kan också komma åt informationen för ett visst objekt genom att högerklicka på ett objekt i webbläsaren och välja "Inspektera element".
Slutligen bör jag notera att panelen Elements möjliggör mycket mer än enkel inspektion. Du kan modifiera och lägga till stilar, redigera html och i de senaste versionerna, se händelselysare bifogade till ett valt DOM-element. Dessa funktioner kan alla vara mycket praktiska när du har att göra med små quirks som du inte helt kan räkna ut.
Den sista funktionen jag vill lyfta fram i Web Inspector / Developer Tools är fliken "Resurser". Om du har arbetat med Firebugs "Net" -flik kommer du att märka flera likheter. I huvudsak ger fliken Resurser en sammanfattning av all information som utbyts mellan din webbläsare och servern, från bilderna till JavaScript till själva dokumentet. Det visar också massor av praktisk information, till exempel:
Ett elegant verktyg som möjliggör enkel inspektion av sidhastighet, fliken Resurser kan hjälpa dig att identifiera och krossa prestandaflaskhalsar. Ge det ett försök och se var din sida är för fet och smal ner dina klara bilder och kod för att ge en bättre upplevelse för dina användare!
En fullständig översikt över webbinspektören / utvecklarverktygen kan enkelt vara en handledning på egen hand, men vi har mer mark för att täcka! Jag rekommenderar starkt att du checkar ut följande resurser för att lära dig mer:
Nu, medan jag alltid har blivit bortskuren av hastigheten på Safari 4 och Chrome jämfört med Firefox, har de båda saknat en kritisk funktion: tillägg. I Chrome 4 ändras allt med tillägg av "tillägg". Du kan lägga till funktionalitet i Chrome genom att hämta och installera tillägg eller genom att använda standardverktygen i handeln: HTML, CSS och JavaScript, för att skriva egna. Extensions kan hämtas från Chrome Extensions Repository och ska vara ganska enkelt att installera. Redan har ett antal väldigt tvingande tillägg skapats som hjälper webbutveckling, från snabb validering till upplösningstestning. Låt oss ta en titt på några.
En webbutvecklare kan aldrig riktigt bli besatt av prestanda, och ju fler verktyg som identifierar trög prestanda, desto bättre. Det är bara där Speed Tracer, en Chrome-förlängning som utvecklats av Google, kommer in i spel. Speed Tracer tar panelen "Resources" till nästa nivå genom att tillhandahålla en visualisering av den tid det tar att utföra uppgifter på låg nivå, till exempel att göra CSS eller parsa HTML och JavaScript. Jag rekommenderar starkt att du tittar på en videodemonstration av Speed Tracer som sammanställts av folket på Google för att få en bättre uppfattning om hur det kan hjälpa dig att förbättra prestanda för dina applikationer.
Flytta från Firefox till Chrome, en förlängning som alla ska leta efter är en ersättning för den fantastiska webbutvecklarverktygsfältet. För dem som inte vet arbetar verktyget Webbverktyg med de uppgifter som Firebug inte var avsett att hantera, till exempel snabb validering av HTML och CSS, möjligheten att snabbt inaktivera JavaScript eller bilder och ett verktyg för att kolla länkar. Dessa funktioner hanteras alla med Pendule-stil, vilket erbjuder mycket av kärnfunktionaliteten hos Web Developer Toolbar (inte riktigt allt), samtidigt som det erbjuder några godisar av det egna, till exempel en färgplockare.
Webbutvecklare måste ofta se till att deras mönster fungerar på olika sätt. Upplösningstestet gör att utvecklare effektivt kan ändra storlek på deras webbläsarfönster till ett antal gemensamma lösningar för snabb och enkel testning. Den senaste versionen låter dig även öppna flera fönster i olika upplösningar med bara några klick. Upplösningstestet är fantastiskt för att se till att din målgrupp ser den sida du vill att de ska se.
Det finns tillfällen när det är nödvändigt att inte bara ta en skärmdump av den nuvarande synliga delen av en webbplats, utan en skärmdump av hela sidan. Du kan till exempel skriva ut en hel sida för peer-kritisk recension eller att visa i din portfölj. Jag har tidigare använt ett skrivbordsverktyg för detta, men nu gör WebScreenShot ett bra jobb med att fånga skärmbilder på helskärm med några få klick.
Stumar du någonsin på en fantastisk sida och undrar, "Vad använder de för att bygga detta?" Jag gör och ofta befinner mig att gräva igenom källkoden och försöker lista ut vem mannen bakom gardinen är. Även om det är en bra träningsövning, och en nödvändig om du verkligen vill veta vad som händer, kan Chrome Sniffer vanligtvis ge dig en bild av vilka JavaScript och PHP-ramar används för en viss sida. Till exempel navigera till NetTuts och Chrome Sniffer informerar oss om att det körs på Wordpress med hjälp av Google Analytics och jQuery.
Framtiden för webbutveckling fortsätter att se ljusare och ljusare ut! För bara några år sedan hade vi en begränsad uppsättning verktyg för debugging JavaScript, tinkering med CSS och visning av HTML, idag har vi en mängd kraftfulla alternativ. Nu när Google Chrome har blivit korsplattform, integreras fullständigt WebKit Web Inspector, och tilläggstillägg är det ett mångsidigt verktyg för att hjälpa utvecklare att förbättra sina egna sidor. Jag uppmanar er alla att ladda ner en kopia för dig själv och ge det ett skott för att se om det kan hjälpa dig att förbättra dina sidor, kom tillbaka hit och dela dina favorit plugins och verktyg med resten av oss!
Visste du att du kan tjäna upp till $ 600 för att skriva en PLUS-handledning och / eller screencast för oss? Vi letar efter djupgående och välskrivna handledning på HTML, CSS, PHP och JavaScript. Om du har förmåga, kontakta Jeffrey på [email protected].
Observera att den faktiska ersättningen kommer att vara beroende av kvaliteten på den slutliga handledningen och screencast.
Accentsconagua