Share
Het is noodzakelijk voor webontwikkelaars om browserontwikkelaarstools te begrijpen en te kennen, en in deze zelfstudie zal ik u kennis laten maken met de Chrome-ontwikkelaarstools. Je zult enkele basisprincipes leren, beginnend met het markeren en stylen van een webpagina.
Een snelle notitie voor bestaande gebruikers van ontwikkelgereedschappen: Het doel van deze zelfstudie is om een relatief eenvoudige inleiding te geven bij de ontwikkeltools van Chrome. Als u de ontwikkeltool van een browser, zoals Firebug in Firefox of IE's ontwikkeltools, gebruikt, dan zult u merken dat u al veel van de informatie kent die in deze specifieke tutorial aan bod komt.
Browser-ontwikkelingstools stellen u in staat om naar een webpagina te gaan en zo ongeveer alles op de pagina te inspecteren. U kunt bijvoorbeeld:
Voordat ik inga op de ontwikkelaarstools van Chrome, wil ik u een korte blik werpen op de ontwikkelingshulpmiddelen die door de grote browsers worden geboden. Merk op dat dit geen alomvattende kijk is op deze hulpmiddelen en hun kenmerken, maar ik voorzie wel basisinformatie voor elk hulpmiddel.
U kunt de ontwikkelaarstools gebruiken in Chrome, Chrome Canary en zelfs Chromium.
Safari gebruikt code uit de Web Inspector-repository; Het is echter mogelijk dat het programma niet zo vaak wordt bijgewerkt als Chrome.
Firebug
Firefox komt nu met zijn eigen set ontwikkelaarstools die een mooie focus heeft op de visuele kant van dingen. Voor degenen die gewend zijn aan Firebug, is dat nog steeds beschikbaar als een add-on.
Opmerking: deze tutorial maakt gebruik van de Canary-versie van Chrome. Daarom zijn sommige functies in dit artikel mogelijk wel of niet beschikbaar in de bètaversie of stabiele releases.
Voordat u de inhoud van de site bekijkt Elements paneel, laten we enige tijd nemen om de kleine bedieningsknoppen aan de boven- en onderkant te begrijpen. Raadpleeg de genummerde lijst onder de volgende afbeelding waarin de verschillende UI-elementen in het toolvenster worden uitgelegd.
Het is goed om een lay-out te kiezen waarmee u vertrouwd bent. Klik eenmaal in de linkerbenedenhoek en merk op hoe het deelvenster met ontwikkelaarshulpmiddelen zichzelf losmaakt van het hoofdvenster - perfect voor installaties met meerdere monitoren. Door op het pictogram links onderaan te klikken en vast te houden, kunt u naar rechts dokken, zoals hieronder:
De Elements paneel geeft de opmaak van de pagina weer zoals deze in de browser wordt weergegeven. Elke wijziging die via JavaScript in de DOM is aangebracht, wordt weerspiegeld in de elementen in dit venster.
Laten we bekend raken met dit panel. Zoals eerder, refereer je naar de lijst items onder de volgende screenshot die de verschillende delen van de Elements paneel.
De kracht die de dev-tools ons geven, is niets minder dan geweldig.
Accentsconagua
In het gedeelte Lettertype worden alleen de lettertypen weergegeven die de browser heeft moeten downloaden.
De DOM aanpassen binnen de Elements panel is een redelijk eenvoudig proces. Als u een knooppunt wilt verwijderen, klikt u er met de rechtermuisknop op en selecteert u Knoop verwijderen. Zoals je zou verwachten, verwijdert het verwijderen van een bovenliggend knooppunt ook de onderliggende items. Handige tip: U kunt ook op de delete-toets op uw toetsenbord drukken om het geselecteerde knooppunt te verwijderen.
Het wijzigen van het type van een element is mogelijk door te dubbelklikken op de elementnaam zelf. Bijvoorbeeld: de p gedeelte op een alinealabel. Natuurlijk verandert het veranderen van een element van het ene type naar het andere zowel de openingstags als de sluitingstags.
Het bekijken van de bronnen van de pagina is essentieel voor het debuggen.
Kenmerken toevoegen kan worden bereikt door met de rechtermuisknop op het element te klikken en te selecteren Attribuut toevoegen. De cursor positioneert zichzelf onmiddellijk waar je hem zou verwachten, en je kunt beginnen met het typen van de attributen die je aan het element wilt toevoegen. Bijvoorbeeld: class = "title". Door op de tabtoets op uw toetsenbord te drukken, plaatst u de cursor in de volgende attribuutpositie.
Attributen bewerken lijkt op het toevoegen ervan. Zoek het attribuut dat u wilt bewerken en dubbelklik op de attribuutnaam of de waarde ervan. De eerste markeert de attribuutnaam en de laatste accentueert de waarde.
Onbewerkte HTML-bewerking wordt ingeschakeld door met de rechtermuisknop op een element te klikken en te selecteren Bewerken als HTML.
De ontwikkelaarshulpmiddelen bieden een paar nuttige technieken voor het vinden van elementen in het document. Zweven over elementen in de Elements venster zorgt ervoor dat de overeenkomende gerenderde elementen op de pagina worden gemarkeerd. Dit is een geweldige manier om te vinden welk element in overeenkomsten voor ontwikkelaarstools overeenkomt met het element op de pagina.
Vanzelfsprekend zien we geen elementen buiten het browservenster van de browser worden gemarkeerd wanneer deze over de corresponderende elementen in de. Zweven Elements ruit. Gelukkig zien we wel een tooltip die de richting van het element out-of-viewport aangeeft. De kers op de taart is echter de Scroll in beeld functie gevonden in het contextmenu van een element. Het doet precies wat het zegt: het scrollt het element in beeld.
De ontwikkelaarstools heeft ook een zoekfunctie. Terwijl het deelvenster dev-gereedschappen focus heeft, drukt u op Control + f om het zoekvak te openen. Dit is een eenvoudig tekstzoekvak; dus typ "body" om het eerste exemplaar van de tekst "body" in het document te vinden.
Voordat we bij de stijlruiten (de rechterkant) van de Elements tab, kunnen we rechtstreeks toegang krijgen tot bepaalde stijlinformatie van een element als alle marges, opvullingen en randen zijn opgegeven in het stylesheet. Als je je over een van deze elementen beweegt, krijg je een idee van het doosmodel, zoals dit:
Wanneer u zich afvraagt waarom sommige elementen met een drijvende functie zich niet gedragen zoals verwacht, kunt u door de marge- / opvulinformatie te bekijken, het probleem vaststellen. U kunt bijvoorbeeld merken dat een element breder is dan wat u verwachtte vanwege extra opvulling.
Laten we, terwijl we het hebben over marges / paddings / grenzen, overgaan naar het stijlengebied van de Elements paneel en bekijk het deelvenster "Metrieken".
Dit stelt u in staat om een analyse uit te voeren en mogelijke problemen te identificeren met betrekking tot de reden waarom een element wordt weergegeven zoals het doet. Het is ook een geweldige leermethode; als je het CSS Box Model niet hebt begrepen, dan is het metriek diagram is een geweldig visueel hulpmiddel.
De metriek paneel laat u elementafmetingen, opvulling, randen en marges bekijken. Merk op hoe u over elk afzonderlijk gedeelte kunt markeren om een visuele weergave te krijgen van hoe het in de browser wordt weergegeven. De metriek diagram geeft ook pixelgebaseerde metingen voor elk deel van het element, b.v. een stijlregel van opvulling: 10px 5px (10px aan de boven- en onderkant, 5px rechts en links) toont de exacte metingen voor elke zijde van het element.
Stijlinformatie bekijken is leuk, maar direct sleutelen aan de stijl van elke pagina staat veel hoger op de 'ol fun meter'. Of het nu gaat om onszelf op te voeden, te experimenteren met een ontwerp of zelfs ideeën te communiceren met onze collega's, de kracht die de dev-tools ons geven is niets minder dan geweldig.
Zorg ervoor dat de stijlen paneel is uitgevouwen en klik net rechts van de openstaande accolade. U zult merken dat een cursor zichzelf automatisch positioneert, zodat u een stijleigenschap kunt schrijven. Typ een eigenschapsnaam, druk op tab om de cursor naar het waardegedeelte te verplaatsen en typ de waarde. Ik voeg de volgende CSS toe:
rand: 1px effen groen
De Elements paneel geeft de opmaak van de pagina weer zoals deze in de browser wordt weergegeven.
Wanneer u de eigenschapsnaam begint te typen, geeft Chrome suggesties, waardoor u het voordeel van automatische aanvulling krijgt. Geweldig! Op het tabblad drukken selecteert de beste overeenkomst met wat u hebt getypt en verplaatst de cursor naar de waardepositie. Het drukken op de pijl naar rechts zorgt ervoor dat de cursor in het eigenschapsgedeelte blijft, maar vult de dichtstbijzijnde overeenkomst in met wat u hebt getypt.
Automatische aanvulling werkt ook met eigenschapswaarden. Als u bijvoorbeeld "pos" * tab * "fi" * -tabblad typt, wordt een stijleigenschap van gemaakt positie: vast. Bij het invoeren van op pixels / percentages gebaseerde waarden, zoals 15% of 10 px, kunnen we die waarden verhogen en verlagen met behulp van de pijltoetsen omhoog en omlaag. Gebruik de toets Shift + Pijl-omhoog om met 10 te verhogen.
Het aanpassen van kleurwaarden is een fluitje van een cent dankzij de kleurenkiezer. Nadat u een kleurwaarde hebt ingevoerd, klikt u één keer op het kleine, gekleurde vierkant links van de waarde om het hulpmiddel voor de kleurkiezer te openen. Je kunt ook schakelen tussen kleurwaardeformaten door te shift + klikken op het kleine gekleurde vierkantje.
U kunt een nieuwe stijlregel maken door op het kleine + pictogram in het stijlenpaneel te klikken. Opmaak die eruit ziet als:
Hallo
Genereert automatisch de volgende stijlregel:
#iets
Opmaak die eruit ziet als:
Hallo
Genereert automatisch het volgende:
.wat klasse
Opmaak die eruit ziet als:
Hallo
genereert:
.h1
Opmaak die eruit ziet als:
Hallo daar
Genereert automatisch:
.class1.class2.class3
Uiteraard kunnen stijlregels naar wens worden aangepast.
De Elements paneel geeft je veel power met de structuur en stijl van de pagina, maar de dev-tools geven ons veel meer tools die essentieel zijn voor ons werk.
De Middelen paneel laat zien welke bronnen een pagina gebruikt. Laten we eens kijken naar wat het biedt.
De metriek paneel laat u elementafmetingen, opvulling, randen en marges bekijken.
lokale opslag.sessionStorage.De ontwikkelaarstools heeft ook een zoekfunctie.
lokale opslag, cookies of enig ander mechanisme voor gegevensopslag. Bovendien zijn bepaalde bronnen, zoals lokale opslag kan worden gewijzigd via de ontwikkelaarstools.Ondanks het gebrek aan framesgebruik op de websites van vandaag, is het een waardevolle vaardigheid om te begrijpen hoe u een pagina met meerdere frames kunt inspecteren. In de volgende schermafbeelding ziet u een kolompagina waarop elke kolom een ander frame vertegenwoordigt:
U kunt een bron op uw computer opslaan
Elk frame wordt in zijn eigen map geplaatst. Elke map bevat de items van elke pagina en u kunt op elke pagina klikken om de inhoud ervan weer te geven. Het is nuttig om de inhoud van een HTML-pagina te bekijken, maar we kunnen dieper ingaan op elke pagina en de bijbehorende bronnen bekijken. JavaScript, CSS, afbeeldingen en zelfs lettertypen kunnen worden bekeken! Activa die code bevatten, worden weergegeven in de codeviewer van ontwikkelaarstools, die wordt geleverd met accentuering van syntaxis en regelnummers.
Het is belangrijk op te merken dat systeemlettertypen, zoals Arial of Helvetica, niet worden vermeld onder Lettertypen; het gedeelte Lettertype geeft alleen de lettertypen weer die de browser heeft moeten downloaden.
Het lettertype wordt zodanig geschaald dat het binnen het gebied met de inhoud van de bron kan passen; daarom wordt de grootte van het item gewijzigd door het formaat van de broninhoud aan te passen!
Het is duidelijk dat er wat nagedacht is in de gebruikersinterface voor het bekijken van afbeeldingen.
Met de ontwikkelaarstools wordt de afbeelding in het inhoudsgebied weergegeven en wordt de afbeelding geschaald volgens de grootte van het inhoudsgebied. Afbeeldingen met transparantie (zoals die in de bovenstaande schermafbeelding) worden weergegeven met een dambord op de achtergrond, waardoor het gemakkelijker wordt om de afbeelding te bekijken. Andere nuttige informatie, zoals de afmetingen, bestandsgrootte en MIME-type, worden onder de afbeelding weergegeven.
JavaScript! Als u op een scriptbestand klikt, wordt de inhoud ervan weergegeven, maar niet veel anders.
Maar wanhoop niet; activa bekijken is eenvoudig dat: activa bekijken. In een toekomstige zelfstudie bekijken we de JavaScript-ondersteuning en -mogelijkheden van de dev-tools.
U kunt de verschillende stylesheets bekijken die de browser voor de webpagina heeft geladen.
Net als bij JavaScript-bestanden kunt u niet veel doen met de stylesheet-items.
Af en toe kan de browser een bepaalde bron niet laden vanwege netwerkproblemen of ontwikkelaarsfouten.
Wanneer dit gebeurt, verschijnt een kleine rode melding aan de rechterkant van het item. Het aantal geeft aan hoeveel fouten zich hebben voorgedaan en het inhoudspaneel geeft meer informatie over de fout.
Elke bron heeft een contextmenu; gewoon rechts klikken op een resource toont een menu dat er ongeveer zo uitziet:
U kunt een resource op uw computer opslaan, een resource op een nieuw tabblad openen en vele andere taken uitvoeren. Dubbelklikken op de resource opent het item in een nieuw tabblad.
Zoals ik eerder al zei, kunt u cookie-informatie bekijken voor een bepaalde website. Als u bijvoorbeeld naar Twitter navigeert terwijl u bent aangemeld, wordt mogelijk soortgelijke informatie weergegeven als in deze schermafbeelding:
Hier zien we:
Wanneer u zich afvraagt waarom sommige elementen met een drijvende functie zich niet gedragen zoals verwacht, kunt u door de marge- / opvulinformatie te bekijken, het probleem vaststellen.
.twitter.com staat voor elk subdomein op twitter.com toe.U kunt een cookie verwijderen door met de rechtermuisknop op een cookie te klikken en te selecteren Verwijder vanuit het contextmenu.
Het is interessant om te weten hoe browsers cookie-informatie gebruiken om te bepalen of u een geverifieerde gebruiker bent. Wanneer u bij Twitter bent ingelogd en de "auth_token" en "_twitter_sess" cookies verwijdert, vragen wij u om in te loggen na het vernieuwen van de pagina. Twitter slaat waarschijnlijk onze ingelogde status en andere gevoelige informatie in die cookies op.
Opslaan en bekijken van sleutel- / waardeparen in lokale opslag is vrij eenvoudig. In plaats van onze eigen sleutels op te slaan, gebruiken we een bestaande website als voorbeeld. De volgende schermafbeelding toont de weergave lokale opslag van een Kitchen Sink Example-app gemaakt met het mobiele webapplicatiekader Sencha Touch.
Bij het bekijken van de pagina vraagt de browser een CSS-bestand aan. Het verversen van de pagina voelt veel sneller omdat Sencha de CSS in lokale opslag heeft opgeslagen. De gootsteen-app heeft enkele interessante sleutel / waarde-paren. Een sleutel ziet er bijvoorbeeld als volgt uit:
3a867610-670a-11e1-a90e-4318029d18bb-http: //dev.sencha.com/deploy/touch/examples/production/kitchensink/resources/css/app.css
De waarde voor die sleutel begint met dit:
/ * 45e6f4ffe818855b26f3dcbfc156025eca58e4f5 * / code, pre, pre * font-family: Menlo, Monaco, Courier, monospace
Steve Souders schreef over het opslaan van activa in lokale opslag; het is een interessant en opwindend gebruik van lokale opslag die de prestaties kan verbeteren, vooral op mobiele apparaten.
De toepassingscache vertelt de browser welke bronnen moeten worden gecached, en de Application Cache categorie laat ons zien wat in de cache is opgeslagen.
Er zijn drie kolommen met deze weergave:
Raadpleeg deze zelfstudie als u niet bekend bent met de cache van HTML5-toepassingen.
We zijn net begonnen. In deel twee bekijken we meer panels met een lichte focus op prestaties, zodat we een betere gebruikerservaring kunnen bieden.
