Share
Google Chrome är en av de största aktörerna på webben idag. Den är snabb, pålitlig, full av funktioner och är extremt hjälpsam, särskilt om du är en webbutvecklare. Chrome tillåter också installation av tredjepartstillägg. Vi bygger dessa tillägg med ren HTML, CSS och JavaScript. Teamet på Google gör ett underbart jobb. I den här artikeln kommer vi att se flera praktiska verktyg, i Chrome, som hjälper till med våra utvecklingsprocesser.
Idag är responsivitet överallt. Med ökningen av mobila enheter måste vi göra våra program kör på många olika upplösningar. De senaste versionerna av Chrome innehåller underbara instrument för att göra vårt arbete enklare. Låt oss börja med att definiera en enkel sida och fortsätta genom att göra det lyhört. Här är HTML-markupen:
Responsive Web Design
Responsive web design (RWD) är ett webbdesign tillvägagångssätt ...
Det finns en del grundläggande styling på sidan. CSS-reglerna flyter navigeringslänkarna och gör de två sektionerna placerade bredvid varandra. Resultatet ser ut så här:
Nu, med HTML och den grundläggande CSS på plats, kan vi börja experimentera. Låt oss placera våra mediefrågor "brytpunkter. Det är viktigt att välja dem baserat på innehållet och där innehållet börjar se dåligt ut. Att ställa upp resolutioner som 1024x768, bara för att den är populär, är inte en bra övning.
Vårt innehåll bryts och vi vill se den exakta storleken på visningsporten. Så vi måste ändra storlek på webbläsarens fönster. Under Chrome kan vi öppna utvecklingsverktygspanel och öka dess storlek där inne.
Observera att medan vi ändrar visningsportens storlek ser vi dess storlek i övre högra hörnet. Denna lilla verktygstips eliminerar behovet av manuell storlekskontroll. I vårt fall blev båda sektionerna under navigeringen alltför squashed, runt 500px. Så det är platsen för vår första mediafråga:
avsnitt float: left; bredd: 50%; @media alla och (maxbredd: 550px) avsnitt float: none; bredd: 100%;
Om vi går lite under 550px kommer vi att se att navigeringen orsakar en horisontell rullning runt 540px. En ny mediefrådsdefinition löser det problemet.
.nav list-style: none; marginal: 10px auto; vaddering: 0; bredd: 510px; .nav li float: left; marginal: 0 20px 0 0; @media alla och (maxbredd: 540px) . nav bredd: auto; .nav li float: none; marginal: 0; vaddering: 0; text-align: center;
Resultatet är en webbsida som fungerar på ett brett spektrum av skärmar. Ja, vår sida är enkel och har bara två brytpunkter, men processen med att välja dem kommer att vara densamma, även om vi har en jätte webbplats.
Ofta får vi felrapporter att vår applikation inte fungerar som den ska på en viss specifik enhet. Chrome kan simulera olika enheter för att hjälpa till att lösa detta problem. Den ställer in exakt skärmupplösningen och definierar rätt HTTP-rubriker. Så vi kan få en närmare bild av vad den verkliga användaren ser. Upptäckningen av JavaScript-webbläsaren fungerar också eftersom webbläsaren ändrar begäranhuvuden.
Låt oss säga att vi behöver simulera en iPhone5-enhet. Det finns en liten knapp som öppnar låda panel och då finns det en Tävlan flik.
Vi väljer enheten och Chrome tillämpar alla inställningar i Skärm, Användaragent och sensorer sektioner. Webbläsaren emulerar även pekevenemang.
Vår sida är nu lyhörd, men vid någon tidpunkt måste vi göra ändringar. Återigen kan vi använda Chrome som ett verktyg och se vilka stilar som tillämpas på dokumentet. Texten i den första sektionen är till exempel för stor. Vi vill ändra det och ange en ny färg.
De element panelen är också till hjälp om vi behöver se en specifik CSS-regel, men vi vet inte var definitionen av den här regeln är. Det finns en sektion på höger sida, som visar de beräknade stilar som tillämpas på det aktuella valda elementet och då kan vi ändra det.
Och senast måste vi ibland söka efter vissa CSS-stilar, men det är svårt att hitta dem eftersom det finns många definitioner. I utvecklarverktyg panel, vi har ett bra filterfält. Låt oss säga att vi vill komma åt reglerna för vårt tagg som har begrepp klass tillämpas, här är hur vi kan göra det:
Google Chrome är ett universellt verktyg. Det har instrument för att stödja designers som vi gjorde i den sista delen av denna handledning. Men det kan göra detsamma för utvecklarna, som vi kommer att se nu.
Det finns en bra JavaScript-debugger, integrerad i Chrome. Det finns också en underbar konsol och källvisare. För att illustrera hur allt fungerar, lägger vi till en liten logik i vårt exempel. Vi vill byta etikett exempel i huvudmenyn till Fantastiska exempel när vi klick på länken. Vi kommer att använda jQuery som hjälpare, så vi kan fokusera på exemplet bättre:
Accentsconagua
$ ('. nav') på ('klicka', funktion (e) var klicka = e.currentTarget; om (clicked.innerHTML === 'Exempel') clicked.innerHTML = 'Fantastiska exempel'; else console.log ('gör ingenting ...');); Du vet förmodligen redan problemet, men låt oss se hur den här koden fungerar.
Oavsett vad vi klick vi får göra ingenting… i konsolen. Så det ser ut som vårt om klausulen är alltid falsk. Låt oss ange en brytpunkt för att se vad som händer.
Felsökaren stannar vid vår brytpunkt och visar oss de lokala definierade variablerna. Variabeln klickade, pekar på navigationselementet och inte till element. Så det är innerhtml egendom är definitivt inte exempel. Det var därför vi fick göra ingenting… varje gång. För att fixa felet kunde vi helt enkelt använda .nav a istället för bara .nav.
Ovan är det traditionella tillvägagångssättet som fungerar om vi vet var exakt att ställa in brytpunkten. Men om vi arbetar med en stor kodbas och speciellt om vi måste felsöka den sammanlänkade filen blir det lite problematisk. Vi börjar placera console.log här och där och kolla på konsolen. Det kommer att fungera, men snart får vi mycket data, det blir svårt att filtrera data och hitta den information som behövs. Chrome har också en lösning för det här problemet. Vi kunde ställa utmatningen i konsolen genom att lägga till % c framför texten skickas till .logga metod. Därefter bifogar du en andra parameter som innehåller våra stilar. Till exempel:
Det finns något annat vi kan lägga till. De trösta objektet har två, inte så populära metoder - grupp och groupEnd. De ger oss möjlighet att gruppera våra loggar.
Det finns också ett bibliotek som kombinerar både styling och gruppering av utgången, Deb.js. Det enda som vi måste göra är att inkludera det på vår sida innan de andra skripten och bifoga .deb () i slutet av den funktion som vi vill inspektera. Det finns också .debc () version som skickar kollapsade grupper till konsolen.
Med det här biblioteket kan vi få argumenten som skickas till funktionen, spårets returavkastning och körningstid. Som vi nämnde ovan är meddelandena snyggt grupperade och inbäddat i varandra, så det är mycket lättare att följa programmets flöde.
En av killerfunktionerna i Googles webbläsare är förlängningens ekosystem. Det finns ett sätt för oss att skriva installerbara program som körs i webbläsaren och det finns dussintals användbara API som vi kan använda. Det viktigaste är dock att vi inte behöver lära sig ett nytt språk. Den teknik som vi använder är vanlig HTML, CSS och JavaScript. Kolla in följande introduktion till Chrome: s utvidgningsutveckling.
Det finns till och med en separat sektion i Chrome: s webbutik som heter webbutveckling. Den innehåller användbara instrument som är speciellt utformade för oss - utvecklare. Det finns en som heter Yez !. Det ger terminalfunktioner i utvecklingsverktygspanelen. Vi kan utföra skalkommandon och få sin produktion i realtid.
Utvidgningen i sig räcker inte för att utföra skalkommandon. Det beror på att vi inte har åtkomst till operativsystemet. Därför finns det en Node.js-modul som fungerar som en proxy. Yez! ansluter till löpande Node.js-appen via webbuttag. Vi kunde installera modulen via Node.js-pakethanteraren med npm installera -g yez.
Yez! har också fin Git integration och det visar oss filialen i den aktuella katalogen. Vi kan exekvera terminalkommandon och få deras produktion omedelbart.
Utbyggnaden var ursprungligen utvecklad som en arbetslöpare. Så det har ett gränssnitt för uppgiftsdefinitioner. Faktum är att det bara är en serie skalkommandon som löper efter varandra. Vi uppnår samma resultat genom att skapa skalskript.
Vi kan också se terminalens produktion i realtid. Så förlängningen är lämplig för att utveckla Node.js applikationer. Normalt måste vi starta om Node.js-processen, men nu är allt synligt i Chrome.
Som webbutvecklare händer det ofta att vi måste utföra HTTP-förfrågan till våra applikationer. Kanske utvecklade vi ett REST API, eller vi har ett PHP-skript som accepterar POST-parametrar. Det finns ett kommandoradsverktyg tillgängligt kallat cURL. Det är förmodligen det mest använda instrumentet för att fråga på webben.
Med cURL behöver vi inte hoppa till terminalen. Det finns DHC (REST HTTP API Client) tillgängligt. Det är en förlängning som ger oss fullständig kontroll över HTTP-förfrågan. Vi kunde ändra förfrågningsmetoden, rubrikerna eller GET- och POST-parametrarna. Det visar också resultatet av förfrågan, med dess rubriker. Ett mycket användbart instrument.
Vi vet alla betydelsen av att testa. Det är oerhört viktigt för oss att veta att våra program beter sig ordentligt. Ibland kan provskrivning vara utmanande. Speciellt om vi behöver testa användargränssnittet. Lyckligtvis finns det en Node.js-modul som styr vår webbläsare (Chrome) och utlöser åtgärder som att besöka en sida, klicka på en länk eller fylla i ett formulär. Det heter DalekJS. Det är enkelt att installera genom att köra:
npm installera -g dalek-cli
Låt oss göra ett kort experiment och se hur allt fungerar. I en nyskapad katalog behöver vi en package.json fil med följande innehåll:
"namn": "projekt", "beskrivning": "beskrivning", "version": "0.0.1", "devDependencies": "dalekjs": "0.0.8", "dalek-browser-chrome" "0,0.10"
Efter körning npm installera i samma katalog kommer vi att få dalekjs och Dalek-browser-krom installeras i a node_modules mapp. Vi ska placera vårt test i en fil som heter test.js. Låt oss spara det i samma mapp. Här är ett kort manus som testar sökfunktionen hos GitHub:
var url = 'https://github.com/'; module.exports = 'ska utföra sökning i GitHub': funktion (test) test .open (url) .type ('# js-kommandoramfält', 'dalek') .submit ('# top_search_form') .assert.text ('. repolist h3 a', 'dalekjs / dalek', 'Det finns en länk med label dalekjs') .click ('[href = "/ dalekjs / dalek"]') .assert.text .repository-description p ',' DalekJS Base Framework ',' Det är rätt förråd ') .done (); För att köra testet måste vi avfyra dalek ./test.js -b krom i vår konsol. Resultatet är att DalekJS lanserar en instans av Google Chrome-webbläsaren. Den öppnar sedan GitHubs webbplats, vid vilken tidpunkt du kan skriva dalek i sökfältet och det går till rätt förråd. I slutändan stänger Node.js helt enkelt det öppnade fönstret. Utgången i konsolen ser ut så här:
DalekJS stöder PhantomJS, Firefox, InternetExplorer och Safari. Det är ett användbart verktyg, och det fungerar på Windows, Linux och Mac. Dokumentationen finns tillgänglig på den officiella sidan dalekjs.com
När vi står framför datorn, spenderar vi mestadels tid i webbläsaren. Det är bra att veta att Google Chrome inte bara är ett program för webbläsning, men det är också ett kraftfullt verktyg för webbutveckling.
Nu finns det massor av användbara tillägg och ett ständigt växande samhälle, så jag uppmanar dig att prova Google Chrome om du inte redan använder den för din nästa webbapp.
