Share
Ta en titt på Chrome 4s flotte nye funksjoner for utviklere, for eksempel støtte på tvers av plattformer, fantastisk nettinspektørintegrasjon og praktiske nye utvidelser. Det blir stadig vanskeligere å nekte Chrome tittelen som den nye nettleseren for webutviklere. Hvis det ikke er helt der ennå, blir det snart!
Med rask belastningstid, en skarp JavaScript-motor, et solid WebKit-fundament og stornavnet, har Google Chrome oppnådd en respektabel markedsandel, og overgår Safari til å bli den tredje mest populære nettleseren i desember. For utviklere, har Firefox imidlertid vært kjærligheten til mange på grunn av sin evne til å kjøre på hvilket som helst operativsystem og på grunn av sitt rike tilbud av tilleggsutviklinger for webutvikling, for eksempel Firebug og Web Developer Toolbar. Men det er viktig å teste JavaScript i alle nettlesere, og å ha et robust sett med verktøy i hver (inkludert Internet Explorer), er nettopp det som utviklere trenger for å få mest mulig ut av koden sin.
Heldig for oss har Google-folkene jobbet hardt for å lage Chrome-plattform, integrere WebKits fantastiske webinspektør, og legge til utvidelser, noe som gjør Chrome 4 til et utrolig nyttig verktøy for webutvikling. I denne opplæringen viser jeg noen av funksjonene som gjør Chrome 4 til et flott tillegg til webutviklerverktøyet.
Fra 25. januar har Chrome 4 blitt offisielt utgitt som stabil for Windows. Mac- og Linux-brukere, vi må imidlertid være litt mer modige for å oppleve alt Chrome 4 har å tilby. Mac-brukere må laste ned "dev" -versjonen, og Linux-brukere "beta" -versjonen, og det er høyt verdt det! Ta en titt på følgende koblinger for å få en kopi av Chrome for operativsystemet ditt som støtter alt vi skal diskutere i denne artikkelen:
La oss nå komme inn i det nitty gritty! I Firefox er Firebug en godsend for utviklere, som gir en feilsøkingskonsoll, HTML og CSS-manipulering, JavaScript-profilering og en hel del annen godhet. WebKit-folkene tok merke til og i løpet av de siste par årene har de gjort et sett med verktøy som heter Web Inspector, som tilbyr et lignende sett med funksjoner til Firebug. Innenfor Chrome 4 er Web inspektøren merket "Utviklerverktøy".
I tillegg til Chrome 4 har webinspektøren vært i gang for en stund fra tidligere versjoner av Chrome og Safari, selv om det er litt skjult. Å få tilgang til webinspektøren i forskjellige nettlesere:
Hvis du ikke har jobbet med Firebug eller Web Inspector-konsollen, går du glipp av en flott måte å hjelpe deg med å feilsøke JavaScript. JavaScript-konsollen tjener flere viktige funksjoner, for eksempel fange feil og presentere dem i et nyttig format, teste korte biter av JavaScript, og som et praktisk sted å logge på nyttig informasjon som variable verdier og kjøretider. Praktisk sett bruker jeg dette verktøyet regelmessig til å evaluere ytelsen til mine programmer og for å sikre at visse variabler blir beregnet riktig.
I tillegg til JavaScript-konsollen er det alltid hyggelig å ha et verktøy som lar deg raskt se HTML- og stilinformasjonen til bestemte elementer på siden. Web Inspector Elements-panelet gir en trestrukturvisning av dokumentobjektmodellen (DOM), slik at du kan bore ned i dokumentet for å velge et objekt av interesse. Du kan også få tilgang til informasjonen til et bestemt objekt ved å høyreklikke på et element i nettleseren og velge "Inspiser element".
Til slutt skal jeg merke seg at elementet panelet gir mye mer enn enkel inspeksjon. Du kan endre og legge til stiler, redigere html, og i de nyeste versjonene, se hendelseslyttere knyttet til et valgt DOM-element. Disse funksjonene kan alle komme veldig bra når du arbeider med små quirks som du ikke helt kan finne ut.
Den siste funksjonen jeg vil fremheve i Web Inspector / Developer Tools, er "Ressurser" -fanen. Hvis du har jobbet med Firebugs "Nett" -fan, vil du legge merke til flere likheter. I hovedsak gir ressurs-fanen en oversikt over all informasjon som utveksles mellom nettleseren og serveren, fra bildene til JavaScript til selve dokumentet. Det viser også massevis av hendig informasjon, for eksempel:
Et elegant verktøy som muliggjør enkel inspeksjon av sidens hastighet, kan Ressurser-fanen hjelpe deg med å identifisere og knuse prestasjonsflaskehalser. Prøv det og se hvor siden din er for fett, og smal ned dine store bilder og kode for å gi en bedre opplevelse for brukerne dine.!
En komplett oversikt over Web Inspector / Developer Tools kan enkelt være en opplæring på egen hånd, men vi har mer grunn til å dekke! Jeg anbefaler på det sterkeste å sjekke ut følgende ressurser for å lære mer:
Nå, mens jeg alltid har blitt blåst bort av hastigheten på Safari 4 og Chrome i forhold til Firefox, har de begge manglet en kritisk funksjon: tilleggsprogrammer. I Chrome 4 endres alle med tillegg av "utvidelser". Du kan legge til funksjonalitet i Chrome ved å laste ned og installere utvidelser eller ved å bruke standardverktøyene i handelen: HTML, CSS og JavaScript, for å skrive din egen. Utvidelser kan lastes ned fra Chrome Extensions Repository, og bør være ganske enkelt å installere. Allerede, en rekke svært overbevisende utvidelser er opprettet som hjelper webutvikling, fra rask validering til oppløsningstesting. La oss ta en titt på noen få.
En webutvikler kan aldri virkelig bli besatt nok med ytelse, og jo flere verktøy som identifiserer svak ytelse, desto bedre. Det er bare hvor Speed Tracer, en Chrome-utvidelse utviklet av Google, kommer inn i spill. Speed Tracer tar panelet "Ressurser" til neste nivå ved å gi en visualisering av tiden det tar å utføre oppgaver på lavt nivå, for eksempel å gjengi CSS eller parsing HTML og JavaScript. Jeg anbefaler på det sterkeste å ta en titt på en video demonstrasjon av Speed Tracer satt sammen av folkene på Google for å få en bedre ide om hvordan det kan hjelpe deg med å forbedre ytelsen til dine applikasjoner.
Flytter fra Firefox til Chrome, en utvidelse som alle skal se etter, er en erstatning for den fantastiske verktøylinjen for Webutvikler. For de som ikke vet, håndterer Web Developer Toolbar oppgavene Firebug var ikke ment å håndtere, for eksempel rask validering av HTML og CSS, muligheten til raskt å deaktivere JavaScript eller bilder, og et verktøy for å sjekke koblinger. Disse funksjonene er alle håndtert med stil av Pendule, som tilbyr mye av kjernefunksjonaliteten til Web Developer Toolbar (ikke helt alle), mens du tilbyr noen få godbiter av det eget, for eksempel en fargeplukker.
Webutviklere må ofte sørge for at deres design fungerer på en rekke oppløsninger. Oppløsningstest lar utviklere effektivt endre størrelsen på nettleservinduet til en rekke vanlige oppløsninger for rask og enkel testing. Den nyeste versjonen tillater deg å åpne flere vinduer på forskjellige oppløsninger med bare noen få klikk. Oppløsningstest er fantastisk for å sikre at målgruppen din ser siden du vil at de skal se.
Det er anledninger når det er nødvendig ikke bare å ta en skjermbilde av den nåværende synlige delen av et nettsted, men et skjermbilde av hele siden. For eksempel kan du skrive ut en full side for peer-kritisk gjennomgang eller å demonstrere i porteføljen din. Jeg har tidligere brukt et skrivebordsprogram for dette, men nå har WebSide ScreenShot en fin jobb med å fange skjermbilder på fullskjerm med noen få klikk.
Skulle du noen gang snuble over en fantastisk side og lurer på, "hva bruker de til å bygge dette?" Jeg gjør, og ofte finner jeg meg grave gjennom kildekoden, og prøver å finne ut hvem mannen bak gardinen er. Mens det er en nyttig treningsøvelse, og en nødvendig en hvis du egentlig Vil du vite hva som skjer, kan Chrome Sniffer vanligvis gi deg et øyeblikksbilde av hvilke JavaScript- og PHP-rammer er i bruk for en bestemt side. For eksempel, naviger til NetTuts og Chrome Sniffer informerer oss om at den kjøres på Wordpress ved hjelp av Google Analytics og jQuery.
Fremtiden for webutvikling fortsetter å se lysere og lysere ut! For bare noen få år siden hadde vi et begrenset sett med verktøy for feilsøking av JavaScript, tinkering med CSS og visning av HTML, i dag har vi en rekke kraftige alternativer. Nå som Google Chrome er blitt en kryssplattform, integrert fullstendig WebKit Web Inspector, og tilleggsutvidelser, er det et allsidig verktøy for å hjelpe utviklere til å forbedre sine egne sider. Jeg oppfordrer alle dere til å laste ned en kopi for deg selv og gi det et skudd for å se om det kan hjelpe deg med å forbedre sidene dine, så kom deg tilbake hit og del dine favorittplugger og verktøy med resten av oss!
Visste du at du kan tjene opp til $ 600 for å skrive en PLUS-opplæring og / eller screencast for oss? Vi leter etter dybde og velskrevne opplæringsprogrammer om HTML, CSS, PHP og JavaScript. Hvis du er i stand til å kontakte Jeffrey på [email protected].
Vær oppmerksom på at faktisk kompensasjon vil være avhengig av kvaliteten på den endelige opplæringen og screencast.
Accentsconagua