Share
Google Chrome is vandaag een van de grootste spelers op het internet. Het is snel, betrouwbaar, boordevol functies en uiterst nuttig, vooral als u een webontwikkelaar bent. Chrome biedt ook de mogelijkheid om extensies van derden te installeren. We bouwen deze uitbreidingen met pure HTML, CSS en JavaScript. Het team van Google doet geweldig werk. In dit artikel zullen we verschillende handige hulpmiddelen in Chrome zien die helpen bij onze ontwikkelingsprocessen.
Tegenwoordig is responsiviteit overal. Met de opkomst van mobiele apparaten moeten we onze applicaties op veel verschillende resoluties laten werken. De nieuwste versies van Chrome bevatten prachtige instrumenten om ons werk gemakkelijker te maken. Laten we beginnen met het definiëren van een eenvoudige pagina en doorgaan door deze responsive te maken. Dit is de HTML-opmaak:
Responsive Web Design
Responsive web design (RWD) is een webontwerpaanpak ...
Er is een basisstijl op de pagina. De CSS-regels zweven de koppelingen van de navigatie en zorgen ervoor dat de twee secties naast elkaar staan. Het resultaat ziet er als volgt uit:
Nu we de HTML en de basis-CSS hebben, kunnen we beginnen met experimenteren. Laten we de breekpunten van onze mediaquery's plaatsen. Het is belangrijk om ze te kiezen op basis van de inhoud en waar die inhoud slecht begint te zien. Het instellen van resoluties zoals 1024x768, alleen omdat het populair is, is geen goede gewoonte.
Onze inhoud breekt en we willen de exacte grootte van de viewport zien. Dus we moeten de grootte van het browservenster aanpassen. Onder Chrome kunnen we het openen ontwikkelaarstools paneel en vergroot daarbinnen.
Merk op dat terwijl we de grootte van de viewport veranderen, we de grootte ervan zien in de rechterbovenhoek. Deze kleine tooltip elimineert de noodzaak van een handmatige formaatcontrole. In ons geval werden beide secties onder de navigatie te platgedrukt, rond de 500 px. Dus dat is de plek voor onze eerste media-query:
gedeelte float: links; breedte: 50%; @media all en (max-width: 550px) section float: none; breedte: 100%;
Als we iets onder 550px gaan, zullen we zien dat de navigatie een horizontale scroll veroorzaakt rond 540px. Een nieuwe media-querydefinitie lost dat probleem op.
.nav lijststijl: geen; marge: 10px auto; opvulling: 0; breedte: 510 px; .nav li float: left; marge: 0 20px 0 0; @media all en (max-width: 540px) .nav width: auto; .nav li float: none; marge: 0; opvulling: 0; text-align: center;
Het resultaat is een webpagina die op een groot aantal schermen werkt. Ja, onze pagina is eenvoudig en heeft slechts twee breekpunten, maar het proces om ze te kiezen zal hetzelfde zijn, zelfs als we een gigantische website hebben.
Vaak ontvangen we bugrapporten dat onze applicatie niet correct werkt op een specifiek apparaat. Chrome kan verschillende apparaten simuleren om dit probleem op te lossen. Het stelt de exacte schermresolutie in en definieert de juiste HTTP-headers. We kunnen dus een goed beeld krijgen van wat de echte gebruiker ziet. De JavaScript-browserdetectie werkt ook omdat de browser de verzoekheaders aanpast.
Laten we zeggen dat we een iPhone5-apparaat moeten simuleren. Er is een kleine knop waarmee de lade paneel en dan is er een wedijver tab.
We kiezen het apparaat en Chrome past alle instellingen toe Scherm, User agent en sensoren secties. De browser emuleert zelfs aanraakgebeurtenissen.
Onze pagina is nu responsief, maar op een gegeven moment moeten we wijzigingen aanbrengen. Nogmaals, we kunnen Chrome gebruiken als een hulpmiddel en zien welke stijlen op het document worden toegepast. De tekst in het eerste gedeelte is bijvoorbeeld te groot. We willen dat veranderen en een nieuwe kleur instellen.
De Elements panel is ook nuttig als we een specifieke CSS-regel moeten zien, maar we weten niet waar de definitie van die regel is. Er is een sectie aan de rechterkant, die de berekende stijlen toont toegepast op het momenteel geselecteerde element en dan kunnen we het aanpassen.
En tot slot, soms moeten we bepaalde CSS-stijlen zoeken, maar het is moeilijk om ze te vinden omdat er veel definities zijn. In de ontwikkelaars tools paneel, we hebben een leuk filterveld. Laten we zeggen dat we toegang willen hebben tot de regels voor onze tag die de concept klasse toegepast, hier is hoe we dat zouden kunnen doen:
Google Chrome is een universele tool. Het heeft instrumenten om ontwerpers te ondersteunen zoals we in het laatste deel van deze tutorial deden. Maar het kan hetzelfde doen voor de ontwikkelaars, zoals we nu zullen zien.
Er is een mooie JavaScript-foutopsporing, geïntegreerd in Chrome. Er is ook een geweldige console en bronviewer. Om te illustreren hoe alles werkt, voegen we een beetje logica toe aan ons voorbeeld. We willen het label veranderen Voorbeelden in het hoofdmenu naar Geweldige voorbeelden wanneer we Klik op de link. We zullen jQuery als hulp gebruiken, zodat we ons beter op het voorbeeld kunnen richten:
Accentsconagua
$ ('. nav'). on ('klik', functie (e) var geklikt = e.currentTarget; if (clicked.innerHTML === 'Examples') clicked.innerHTML = 'Awesome examples'; else console.log ('niets doen ...');); U kent het probleem waarschijnlijk al, maar laten we eens kijken hoe de bovenstaande code werkt.
Wat we ook doen Klik we krijgen niets doen… in de console. Dus het lijkt op ons als clausule is altijd fout. Laten we een breekpunt instellen om te zien wat er aan de hand is.
De foutopsporing stopt bij ons breekpunt en toont ons de lokaal gedefinieerde variabelen. De variabele geklikt, wijst naar het navigatie-element en niet naar het element. Dus het is innerHTML eigendom is absoluut niet Voorbeelden. Dat is waarom we hebben niets doen… elke keer. Om de bug op te lossen, kunnen we gewoon gebruiken .nav a in plaats van gewoon .nav.
Hierboven is de traditionele aanpak die werkt als we precies weten waar het breekpunt moet worden ingesteld. Maar als we met een grote codebasis werken en vooral als we het samengevoegde bestand moeten debuggen, wordt het een beetje problematisch. We beginnen met plaatsen console.log hier en daar en controleer de console. Het zal werken, maar binnenkort zullen we veel gegevens hebben, het zal moeilijk zijn om de gegevens te filteren en de benodigde informatie te vinden. Chrome heeft ook een oplossing voor dat probleem. We kunnen de uitvoer in de console stylen door deze toe te voegen % c voor de tekst, doorgegeven aan de .logboek methode. Voeg daarna een tweede parameter bij die onze stijlen bevat. Bijvoorbeeld:
Er is nog iets dat we kunnen toevoegen. De troosten object heeft twee, niet zo populaire methoden - groep en groupEnd. Ze geven ons de mogelijkheid om onze logs te groeperen.
Er is ook een bibliotheek die zowel de vormgeving als de groepering van de uitvoer combineert, Deb.js. Het enige dat we moeten doen, is om het in onze pagina vóór de andere scripts op te nemen en bij te voegen .deb () aan het einde van de functie die we willen inspecteren. Er is ook .debc () versie die samengevouwen groepen naar de console verzendt.
Met deze bibliotheek kunnen we de argumenten doorgeven aan de functie, de stack trace return-waarde en uitvoeringstijd. Zoals we hierboven vermeldden, zijn de berichten mooi gegroepeerd en in elkaar genest, dus het is veel gemakkelijker om de stroom van de applicatie te volgen.
Een van de killer-functies van de browser van Google is het ecosysteem van de extensie. Er is een manier voor ons om installeerbare programma's te schrijven die in de browser worden uitgevoerd en er zijn tientallen nuttige API's die we kunnen gebruiken. Het belangrijkste is echter dat we geen nieuwe taal hoeven te leren. De technologieën die we zullen gebruiken, zijn de gebruikelijke HTML, CSS en JavaScript. Lees de volgende inleiding tot de ontwikkeling van de extensie van Chrome.
Er is zelfs een apart gedeelte in de Chrome-webwinkel genoemd webontwikkeling. Het bevat nuttige instrumenten die speciaal voor ons zijn gemaakt - ontwikkelaars. Er is er een genaamd Yez !. Het brengt terminalachtige functionaliteiten naar het paneel Developer Tools. We zijn in staat om shell-commando's uit te voeren en hun uitvoer in realtime te krijgen.
De extensie zelf is niet voldoende om shell-opdrachten uit te voeren. Dat komt omdat we geen toegang hebben tot het besturingssysteem. Daarom is er een Node.js-module die als een proxy fungeert. Yez! maakt via webbussen verbinding met de actieve Node.js-app. We kunnen de module via de pakketbeheerder van Node.js installeren met behulp van npm install -g yez.
Yez! heeft ook een goede Git-integratie en toont ons de branch in de huidige directory. We zijn in staat terminalopdrachten uit te voeren en direct hun output te krijgen.
De extensie is oorspronkelijk ontwikkeld als een taakloper. Het heeft dus een interface voor taakdefinities. In feite is dat slechts een reeks shell-commando's die achter elkaar worden uitgevoerd. We bereiken dezelfde resultaten door shellscripts te maken.
We kunnen ook de uitvoer van de terminal in realtime bekijken. De extensie is dus geschikt voor het ontwikkelen van Node.js-applicaties. Normaal gesproken moeten we het proces Node.js opnieuw starten, maar nu is alles zichtbaar in Chrome.
Als webontwikkelaars gebeurt het vaak dat we een HTTP-verzoek moeten uitvoeren voor onze applicaties. Misschien hebben we een REST API ontwikkeld, of hebben we een PHP-script dat POST-parameters accepteert. Er is een commandoregeltool beschikbaar die cURL wordt genoemd. Het is waarschijnlijk het meest gebruikte instrument om op internet te zoeken.
Met cURL hoeven we niet naar de terminal te springen. Er is DHC (REST HTTP API Client) beschikbaar. Het is een extensie die ons de volledige controle over het HTTP-verzoek geeft. We kunnen de aanvraagmethode, de headers of de GET- en POST-parameters wijzigen. Het toont ook het resultaat van het verzoek, met de koppen. Een zeer nuttig instrument.
We kennen allemaal het belang van testen. Het is uiterst belangrijk voor ons om te weten dat onze programma's zich correct gedragen. Soms kan het schrijven van tests een uitdaging zijn. Vooral als we de gebruikersinterface moeten testen. Gelukkig is er een Node.js-module die onze browser (Chrome) bestuurt en acties start zoals het bezoeken van een pagina, het klikken op een link of het invullen van een formulier. Het wordt DalekJS genoemd. Het is eenvoudig te installeren door te draaien:
npm install -g dalek-cli
Laten we een kort experiment uitvoeren en zien hoe alles werkt. In een nieuw aangemaakte directory hebben we een package.json bestand met de volgende inhoud:
"naam": "project", "description": "description", "version": "0.0.1", "devDependencies": "dalekjs": "0.0.8", "dalek-browser-chrome": "0.0.10"
Na het rennen npm installeren in dezelfde map zullen we krijgen dalekjs en dalek-browser-chroom geïnstalleerd in een node_modules map. We plaatsen onze test in een bestand met de naam test.js. Laten we het opslaan in dezelfde map. Hier is een kort script dat de zoekfunctionaliteit van GitHub test:
var url = 'https://github.com/'; module.exports = 'moet zoeken in GitHub' uitvoeren: functie (test) test .open (url) .type ('# js-command-bar-field', 'dalek') .submit ('# top_search_form') .assert.text ('. repolist h3 a', 'dalekjs / dalek', 'Er is een link met label dalekjs') .click ('[href = "/ dalekjs / dalek"]') .assert.text (' .repository-beschrijving p ',' DalekJS Base framework ',' Het is de juiste repository ') .done (); Om de test uit te voeren, moeten we schieten dalek ./test.js -b chrome in onze console. Het resultaat is dat DalekJS een exemplaar van de Google Chrome-browser lanceert. Vervolgens wordt de GitHub-site geopend, waarna u kunt typen dalek in het zoekveld en het gaat naar de juiste repository. Uiteindelijk sluit Node.js simpelweg het geopende venster. De uitvoer in de console ziet er als volgt uit:
DalekJS ondersteunt PhantomJS, Firefox, InternetExplorer en Safari. Het is een handige tool en het werkt op Windows, Linux en Mac. De documentatie is beschikbaar op de officiële pagina dalekjs.com
Wanneer we voor onze computer staan, brengen we het grootste deel van die tijd door in de browser. Het is goed om te weten dat Google Chrome niet alleen een programma is voor surfen op internet, maar ook een krachtig instrument is voor webontwikkeling.
Er zijn nu heel veel nuttige extensies en een constant groeiende community, dus ik raad u aan Google Chrome te proberen, als u dit nog niet gebruikt voor uw volgende webapp.
