Share
Google Chrome er en av de største aktørene på nettet i dag. Den er rask, pålitelig, full av funksjoner, og er ekstremt nyttig, spesielt hvis du er en webutvikler. Chrome tillater også installasjon av tredjepartsutvidelser. Vi bygger disse utvidelsene med ren HTML, CSS og JavaScript. Teamet på Google gjør en fantastisk jobb. I denne artikkelen vil vi se flere praktiske verktøy, i Chrome, som hjelper med våre utviklingsprosesser.
I dag er lydhør overalt. Med veksten av mobilenheter må vi gjøre programmene våre løpende på mange forskjellige oppløsninger. De nyeste versjonene av Chrome inneholder fantastiske instrumenter for å gjøre arbeidet enklere. La oss begynne med å definere en enkel side og fortsette å gjøre det responsivt. Her er HTML-oppslaget:
Responsivt webdesign
Responsive webdesign (RWD) er en webdesign tilnærming ...
Det er noen grunnleggende styling på siden. CSS-reglene, flyter navigasjonens koblinger og gjør de to seksjonene plassert ved siden av hverandre. Resultatet ser slik ut:
Nå, når vi har HTML og grunnleggende CSS på plass, kan vi begynne å eksperimentere. La oss stille spørsmålene til våre medieforespørsler. Det er viktig å velge dem basert på innholdet og hvor innholdet begynner å se dårlig ut. Innstilling av resolusjoner som 1024x768, bare fordi den er populær, er ikke en god praksis.
Våre innholdsbrudd og vi vil se den eksakte størrelsen på visningsporten. Så vi må endre størrelsen på nettleserens vindu. Under Chrome kan vi åpne utviklerverktøyspanelet og øke størrelsen der inne.
Legg merke til at mens vi endrer visningsportens størrelse, ser vi størrelsen i øverste høyre hjørne. Denne lille verktøytips eliminerer behovet for manuell størrelseskontroll. I vårt tilfelle ble begge delene under navigasjonen for squashed, rundt 500px. Så det er stedet for vår første medieforespørsel:
del float: left; bredde: 50%; @media alle og (maksimal bredde: 550px) section float: none; bredde: 100%;
Hvis vi går litt under 550px, ser vi at navigasjonen fører til en horisontal rulle rundt 540px. En ny mediesøkningsdefinisjon løser dette problemet.
.nav listestil: none; margin: 10px auto; polstring: 0; bredde: 510px; .nav li float: left; margin: 0 20px 0 0; @media alle og (maksimal bredde: 540px) .nav bredde: auto; .nav li float: none; margin: 0; polstring: 0; tekst-align: center;
Resultatet er en nettside som fungerer på et bredt spekter av skjermer. Ja, siden vår er enkel og har bare to brytpunkter, men prosessen med å velge dem vil være den samme, selv om vi har en gigantisk nettside.
Ofte mottar vi feilrapporter at vår søknad ikke fungerer som den skal på en bestemt enhet. Chrome kan simulere ulike enheter for å løse dette problemet. Den setter den nøyaktige skjermoppløsningen og definerer de riktige HTTP-overskriftene. Så, vi er i stand til å få et nært bilde av hva den virkelige brukeren ser. JavaScript-nettleserdeteksjonen fungerer også fordi nettleseren endrer forespørselhodene.
La oss si at vi må simulere en iPhone5-enhet. Det er en liten knapp som åpner skuff panelet og så er det en emulering tab.
Vi velger enheten, og Chrome bruker alle innstillingene i Skjerm, Bruker agent og sensorer seksjoner. Nettleseren emulerer til og med berøringshendelser.
Vår side er nå responsiv, men på et tidspunkt må vi gjøre endringer. Igjen kan vi bruke Chrome som et verktøy og se hvilke stiler som brukes på dokumentet. For eksempel er teksten i den første delen for stor. Vi ønsker å endre det og sette en ny farge.
De Elements panelet er også nyttig hvis vi trenger å se spesifikk CSS-regel, men vi vet ikke hvor definisjonen av den regelen er. Det er en del på høyre side som viser de beregnede stilene som er brukt på det valgte elementet, og da kan vi endre det.
Og til slutt, noen ganger må vi lete etter bestemte CSS-stiler, men det er vanskelig å finne dem fordi det er mange definisjoner. I utviklerverktøy panel, vi har et fint filterfelt. La oss si at vi ønsker å få tilgang til reglene for våre tag som har konsept klasse anvendt, her er hvordan vi kunne gjøre det:
Google Chrome er et universelt verktøy. Den har instrumenter for å støtte designere som vi gjorde i den siste delen av denne opplæringen. Men det kan gjøre det samme for utviklerne, som vi vil se nå.
Det er en fin JavaScript-debugger, integrert i Chrome. Det er også en fantastisk konsoll og kildevisning. For å illustrere hvordan alt fungerer, legger vi til litt logikk i vårt eksempel. Vi ønsker å endre etiketten eksempler i hovedmenyen til Fantastiske eksempler når vi klikk på lenken. Vi vil bruke jQuery som en hjelper, så vi kan fokusere på eksemplet bedre:
Accentsconagua
$ ('. nav') på ('klikk', funksjon (e) var klikket = e.currentTarget; hvis (clicked.innerHTML === 'Eksempler') clicked.innerHTML = 'Awesome eksempler'; else console.log ('gjør ingenting ...');); Du kjenner sikkert allerede problemet, men la oss se hvordan koden ovenfor virker.
Uansett hva vi klikk vi får gjør ingenting… i konsollen. Så, det ser ut som vår hvis Klausulen er alltid feil. La oss sette et brytepunkt for å se hva som skjer.
Feilsøkeren stopper ved vårt bruddpunkt og viser oss de lokale definerte variablene. Variabelen klikket, peker på navigasjonselementet og ikke til element. Så det er innerhtml eiendom er definitivt ikke eksempler. Det er derfor vi fikk gjør ingenting… hver gang. For å fikse feilen, kunne vi bare bruke .nav a i stedet for bare .nav.
Ovenfor er den tradisjonelle tilnærmingen som fungerer hvis vi vet hvor nøyaktig det er å sette brytpunktet. Men hvis vi jobber med en stor kodebase og spesielt hvis vi må feilsøke den sammenkoblede filen, blir det litt problematisk. Vi begynner å plassere console.log her og der og sjekk konsollen. Det vil fungere, men snart vil vi ha mye data, det vil være vanskelig å filtrere dataene og finne den nødvendige informasjonen. Chrome har også en løsning på dette problemet. Vi kunne stille utgangen i konsollen ved å legge til % c foran teksten, passert til .Logg metode. Deretter legger du til en andre parameter som inneholder våre stiler. For eksempel:
Det er noe annet vi kan legge til. De konsoll objektet har to, ikke så populære metoder - gruppe og groupEnd. De gir oss muligheten til å gruppere våre logger.
Det er også et bibliotek som kombinerer både styling og gruppering av produksjonen, Deb.js. Det eneste vi må gjøre er å inkludere det på vår side før de andre skriptene og vedlegg .deb () på slutten av funksjonen som vi vil inspisere. Det er også .debc () versjon som sender kollapsede grupper til konsollen.
Med dette biblioteket kan vi få argumentene overført til funksjonen, stakkesporens returverdi og kjøretid. Som nevnt ovenfor er meldingene pent gruppert og nestet inn i hverandre, så det er mye lettere å følge programmets strømning.
En av killerfunksjonene i Googles nettleser, er utvidelsens økosystem. Det er en måte for oss å skrive installerbare programmer som kjører i nettleseren, og det finnes dusinvis av nyttige APIer som vi kan bruke. Det viktigste er imidlertid at vi ikke trenger å lære et nytt språk. Teknologiene som vi skal bruke er vanlige HTML, CSS og JavaScript. Sjekk ut følgende introduksjon til Chromes utvidelsesutvikling.
Det er enda en egen seksjon i Chrome's nettbutikk som heter webutvikling. Den inneholder nyttige instrumenter laget spesielt for oss - utviklere. Det er en som heter Yez !. Det bringer terminale funksjoner i verktøylinjen Developer Tools. Vi er i stand til å utføre shell kommandoer og få sin produksjon i sanntid.
Utvidelsen selv er ikke nok til å utføre shell kommandoer. Det er fordi vi ikke har tilgang til operativsystemet. Derfor er det en Node.js-modul som fungerer som en proxy. Yez! kobles til løpende Node.js-app via nettkontakter. Vi kunne installere modulen via Node.js pakkebehandling ved hjelp av npm installere -g yez.
Yez! har også fin Git integrasjon og det viser oss grenen i den nåværende katalogen. Vi er i stand til å utføre terminalkommandoer og få deres produksjon umiddelbart.
Utvidelsen ble opprinnelig utviklet som en oppgaveløper. Så det har et grensesnitt for oppgavedefinisjoner. Faktisk er det bare en serie shell kommandoer som kjører etter hverandre. Vi oppnår de samme resultatene ved å lage shell-skript.
Vi kan også se terminalens produksjon i sanntid. Så utvidelsen er egnet for å utvikle Node.js applikasjoner. Normalt må vi starte prosessen Node.js, men nå er alt synlig i Chrome.
Som webutviklere skjer det ofte at vi må utføre HTTP-forespørsel til våre applikasjoner. Kanskje vi utviklet en REST API, eller vi har et PHP-skript som aksepterer POST-parametere. Det finnes et kommandolinjeverktøy som kalles cURL. Det er sannsynligvis det mest brukte instrumentet for å spørre på nettet.
Med cURL trenger vi ikke å hoppe til terminalen. Det er DHC (REST HTTP API Client) tilgjengelig. Det er en utvidelse som gir oss full kontroll over HTTP-forespørselen. Vi kunne endre forespørselsmetoden, overskriftene, eller GET og POST-parametrene. Det viser også resultatet av forespørselen, med overskriftene. Et veldig nyttig instrument.
Vi vet alle viktigheten av å teste. Det er ekstremt viktig for oss å vite at våre programmer oppfører oss riktig. Noen ganger kan skriving av tester være utfordrende. Spesielt hvis vi må teste brukergrensesnittet. Heldigvis finnes det en Node.js-modul som styrer nettleseren vår (Chrome) og utløser handlinger som å besøke en side, klikke på en lenke eller fylle ut et skjema. Det kalles DalekJS. Det er enkelt å installere ved å kjøre:
npm installere -g dalek-cli
La oss lage et kort eksperiment og se hvordan alt fungerer. I en nyopprettet katalog trenger vi en package.json fil med følgende innhold:
"navn": "prosjekt", "beskrivelse": "beskrivelse", "versjon": "0.0.1", "devDependencies": "dalekjs": "0.0.8", "dalek-browser-chrome" "0.0.10"
Etter å ha kjørt npm installasjon i samme katalog, vil vi få dalekjs og dalek-browser-krom installert i a node_modules mappe. Vi legger inn testen vår i en fil som heter test.js. La oss lagre det i samme mappe. Her er et kort skript som tester søkefunksjonaliteten til GitHub:
var url = 'https://github.com/'; module.exports = 'skal utføre søk i GitHub': funksjon (test) test .open (url) .type ('# js-kommandolinjefelt', 'dalek') .submit ('# top_search_form') .assert.text ('. repolist h3 a', 'dalekjs / dalek', 'Det er en link med label dalekjs') .click ('[href = "/ dalekjs / dalek'] ') .assert.text .repository-beskrivelse p ',' DalekJS Base-rammeverket ',' Det er riktig lagringsplass ') .done (); For å kjøre testen må vi brenne dalek ./test.js -b krom i konsollen vår. Resultatet er at DalekJS lanserer en forekomst av Google Chrome-nettleseren. Den åpner deretter GitHubs nettsted, hvor du kan skrive dalek i søkefeltet og det går til riktig lager. Til slutt lukker Node.js det åpne vinduet. Utgangen i konsollen ser slik ut:
DalekJS støtter PhantomJS, Firefox, InternetExplorer og Safari. Det er et nyttig verktøy, og det fungerer på Windows, Linux og Mac. Dokumentasjonen er tilgjengelig på den offisielle siden dalekjs.com
Når vi er foran datamaskinen, bruker vi mesteparten av tiden i nettleseren. Det er godt å vite at Google Chrome ikke bare er et program for å surfe på nettet, men det er også et kraftig verktøy for webutvikling.
Nå er det mange nyttige utvidelser og et stadig voksende fellesskap, så jeg oppfordrer deg til å prøve Google Chrome, hvis du ikke allerede bruker den til din neste web-app.
