Hoe Web Browser Developer Tools te gebruiken

Naast de meeste browsermakers die zich richten op de dagelijkse gebruiker die op internet wil surfen, richten ze zich ook op de webontwikkelaars, ontwerpers en kwaliteitsbewakingsprofessionals die helpen bij het bouwen van de apps en sites waartoe deze gebruikers toegang hebben door krachtige tools rechtstreeks in de browsers te integreren. zich.

Voorbij zijn de dagen dat de enige programmeer- en testtools in een browser je in staat stelden om de broncode van een pagina te bekijken en niets meer. De browsers van vandaag laten je een veel diepere duik maken door dingen te doen zoals het uitvoeren en debuggen van JavaScript-fragmenten, het inspecteren en bewerken van DOM-elementen, het monitoren van real-time netwerkverkeer terwijl je app of pagina laadt om knelpunten te identificeren, CSS-prestaties te analyseren en ervoor te zorgen dat je code is niet te veel geheugen gebruiken of te veel CPU-cycli, en nog veel meer. Vanuit een testperspectief kunt u reproduceren hoe een app of webpagina in verschillende browsers en op verschillende apparaten en platforms wordt weergegeven door de magie van responsief ontwerp en ingebouwde simulators. Het beste deel is dat je dit allemaal kunt doen zonder je browser te verlaten!

In de onderstaande tutorials leest u hoe u toegang krijgt tot deze ontwikkelaarstools in verschillende populaire webbrowsers.

Google Chrome

Met de ontwikkelaarstools van Chrome kunt u code bewerken en debuggen, afzonderlijke componenten controleren om prestatieproblemen op te sporen, verschillende apparaatschermen simuleren, inclusief apparaten met Android of iOS, en verschillende andere handige functies uitvoeren.

1. Klik op de hoofdmenuknop van Chrome, gemarkeerd met drie horizontale lijnen en in de rechterbovenhoek van de browser.
2. Wanneer het vervolgkeuzemenu wordt weergegeven, plaatst u de muisaanwijzer op de Meer tools keuze.
3. Er zou nu een submenu moeten verschijnen. Selecteer de optie met het label Ontwikkelaarstools . U kunt ook de volgende sneltoets gebruiken in plaats van dit menu-item: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + Command + I )
4. De Chrome-interface voor ontwikkelaarstools zou nu moeten worden weergegeven, zoals te zien is in de schermafbeelding van dit voorbeeld. Afhankelijk van uw versie van Chrome, kan de eerste lay-out die u ziet enigszins afwijken van de hier weergegeven lay-out. De belangrijkste hub van de ontwikkelaarstools, meestal aan de onderkant of rechterkant van het scherm, bevat de volgende tabbladen.elementen: Biedt de mogelijkheid om CSS- en HTML-code te inspecteren en tegelijkertijd CSS te bewerken en de effecten van uw wijzigingen in realtime te bekijken.Troosten: De JavaScript-console van Chrome zorgt voor directe opdrachtinvoer en diagnostische foutopsporing.bronnen: Hiermee kunt u JavaScript-code debuggen via een krachtige grafische interface.Netwerk: Categoriseert en toont gedetailleerde informatie over elke gerelateerde bewerking op de actieve toepassing of pagina, inclusief volledige aanvraag- en antwoordheaders, evenals geavanceerde timingmetingen.Tijdlijn: Maakt een grondige analyse van elke activiteit die plaatsvindt in de browser mogelijk zodra een pagina- of app-laadaanvraag wordt gestart.
5. Naast deze secties hebt u ook via de knop toegang tot de volgende hulpprogramma's >> pictogram, gelegen aan de rechterkant van de Tijdlijn tab.Profiel: Opgedeeld in CPU-profiler en Heap profiler secties, biedt uitgebreid geheugengebruik en de algehele uitvoeringstijd van de actieve toepassing of pagina.Veiligheid: Markeert problemen met certificaten en andere beveiligingsproblemen met de actieve pagina of applicatie.Middelen: Hier kunt u cookies, lokale opslag, app-cache en andere lokale gegevensbronnen die door de huidige webpagina of toepassing worden gebruikt, inspecteren.audits: Biedt manieren om de laadtijd en algemene prestaties van een pagina of toepassing te optimaliseren.
6. Apparaatmodus kunt u de actieve pagina bekijken in een simulator die deze bijna precies weergeeft zoals deze zou verschijnen op een van de meer dan twaalf apparaten, waaronder verschillende bekende Android- en iOS-modellen zoals de iPad, iPhone en Samsung Galaxy. U krijgt ook de mogelijkheid om aangepaste schermresoluties te emuleren om aan uw specifieke ontwikkelings- of testbehoeften te voldoen. Tokkelen Apparaatmodus aan en uit, selecteer het pictogram van de mobiele telefoon direct links van de Elements tab.
7. U kunt ook het uiterlijk van uw ontwikkelaarstools aanpassen door eerst op de menuknop te klikken die wordt weergegeven door drie verticaal geplaatste stippen en die zich uiterst rechts van de hiervoor genoemde tabbladen bevinden. Vanuit dit vervolgkeuzemenu kunt u het dock verplaatsen, verschillende hulpprogramma's weergeven of verbergen en meer geavanceerde items starten, zoals een apparaatinspector. U zult merken dat de interface van dev-tools zelf in hoge mate aanpasbaar is via de instellingen in deze sectie.

Mozilla Firefox

De sectie Webontwikkelaar van Firefox bevat tools voor ontwerpers, ontwikkelaars en testers, zoals een stijleditor en pixel-targeting pipet.

Aanbevolen door Lifewire:De beste 25 Greasemonkey en Tampermonkey gebruikersscripts

1. Klik op Firefox's hoofdmenuknop, weergegeven door drie horizontale lijnen en in de rechterbovenhoek van het browservenster.
2. Wanneer het vervolgkeuzemenu wordt weergegeven, selecteert u het pictogram met het label Ontwikkelaar . De Webontwikkelaar menu moet nu worden weergegeven, met de volgende opties.U zult merken dat de meeste menu-items met sneltoetsen geassocieerd zijn.Toggle Tools: Hiermee wordt de interface voor ontwikkelaarstools weergegeven of verborgen, meestal onder aan het browservenster. Sneltoets: Mac OS X ( ALT (OPTION) + Command + I ), Ramen ( CTRL + SHIFT + I )Inspecteur: Hiermee kunt u CSS en HTML-code op de actieve pagina en op een draagbaar apparaat controleren en / of aanpassen via debugging op afstand. Sneltoets: Mac OS X ( ALT (OPTIONEEL) + COMMAND + C ), Ramen ( CTRL + SHIFT + C )Web Console: Hiermee kunt u JavaScript-uitdrukkingen uitvoeren op de actieve pagina en een diverse set geregistreerde gegevens bekijken, waaronder beveiligingswaarschuwingen, netwerkverzoeken, CSS-berichten en meer. Sneltoets: Mac OS X ( ALT (OPTIONEEL) + COMMAND + K ), Ramen ( CTRL + SHIFT + K )Debugger: De JavaScript-foutopsporing laat u defecten opsporen en verhelpen door onderbrekingspunten in te stellen, DOM-knooppunten te inspecteren, externe bronnen in black boxing en nog veel meer. Zoals het geval is met de Inspecteur , deze functie ondersteunt ook debugging op afstand. Sneltoets: Mac OS X ( ALT (OPTIONEEL) + COMMAND + S ), Ramen ( CTRL + SHIFT + S) Stijl-editor: Hiermee kunt u nieuwe stylesheets maken en deze opnemen in de actieve webpagina, of bestaande bladen bewerken en testen hoe uw wijzigingen in een browser worden weergegeven met slechts één klik. Sneltoets: Mac OS X, Windows ( SHIFT + F7 )Prestatie: Geeft een gedetailleerd overzicht van de netwerkprestaties, framesnelheidgegevens, JavaScript-uitvoeringstijd en -status, verfflitsen en nog veel meer. Sneltoets: Mac OS X, Windows ( SHIFT + F5 )Netwerk: Geeft een overzicht van elk netwerkverzoek dat door de browser is gestart, samen met de bijbehorende methode, het oorspronkelijke domein, het type, de grootte en de verstreken tijd. Sneltoets: Mac OS X ( ALT (OPTIONEEL) + COMMAND + Q ), Ramen ( CTRL + SHIFT + Q )Developer Toolbar: Opent een interactieve opdrachtregelinterpreter. invoeren helpen in de interpreter voor een lijst met alle beschikbare opdrachten en hun juiste syntaxis. Sneltoets: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Biedt de mogelijkheid om webapps te maken en uit te voeren via een daadwerkelijk apparaat met Firefox OS of via de Firefox OS-simulator. Sneltoets: Mac OS X, Windows ( SHIFT + F8 )Browserconsole: Biedt dezelfde functionaliteit als de Web Console (zie hierboven). Alle geretourneerde gegevens zijn echter voor de hele Firefox-toepassing (inclusief extensies en browserniveau-functies) in tegenstelling tot alleen de actieve webpagina. Sneltoets: Mac OS X ( SHIFT + Command + J ), Ramen ( CTRL + SHIFT + J )Responsieve ontwerpweergave: Hiermee kunt u direct een webpagina bekijken met verschillende resoluties, lay-outs en schermformaten om meerdere apparaten na te bootsen, waaronder tablets en smartphones. Sneltoets: Mac OS X ( ALT (OPTIONEEL) + COMMAND + M ), Ramen ( CTRL + SHIFT + M )Pipet: Geeft de hex-kleurcode weer voor individueel geselecteerde pixels.Kladblok: Hiermee kunt u fragmenten van JavaScript-code schrijven, bewerken, integreren en uitvoeren vanuit een pop-out Firefox-venster. Sneltoets: Mac OS X, Windows ( SHIFT + F4 )Pagina bron: De originele browsergebaseerde ontwikkelaarstool, deze optie toont eenvoudig de beschikbare broncode voor de actieve pagina. Sneltoets: Mac OS X ( COMMAND + U ), Ramen ( CTRL + U )Meer hulpmiddelen ophalen: Opent de Web Developer's Toolbox verzameling op de officiële add-on-site van Mozilla, met ongeveer een dozijn populaire extensies zoals Firebug en Greasemonkey.

Microsoft Edge / Internet Explorer

Meestal aangeduid als de F12 Developer Tools , een eerbetoon aan de sneltoets die de interface sinds eerdere versies van Internet Explorer heeft gelanceerd, de dev-toolset in IE11 en Microsoft Edge heeft een lange weg afgelegd sinds de oprichting ervan door een zeer handige groep monitoren, debuggers, emulators en -hoge compilers.

1. Klik op de Meer acties menu, weergegeven door drie punten en te vinden in de rechterbovenhoek van het browservenster. Wanneer het vervolgkeuzemenu wordt weergegeven, selecteert u de optie met het label F12 Developer Tools . Zoals ik al zei, kunt u de tools ook openen via de F12 Toetsenbord sneltoets.
2. De ontwikkelinterface moet nu worden weergegeven, meestal onder aan het browservenster. De volgende hulpmiddelen zijn beschikbaar, elk toegankelijk door te klikken op hun respectieve tabbladkop of met behulp van de bijbehorende sneltoets.DOM Explorer: Hiermee kunt u stylesheets en HTML bewerken op de actieve pagina, zodat de gewijzigde resultaten worden weergegeven. Gebruikt de IntelliSense-functionaliteit om, waar van toepassing, de code automatisch aan te vullen. Toetsenbord sneltoets: (CTRL + 1) Troosten: Biedt de mogelijkheid om foutopsporingsinformatie inclusief tellers, timers, traces en aangepaste berichten in te dienen via een geïntegreerde API. Ook kunt u code in een actieve webpagina injecteren en de waarden die aan individuele variabelen zijn toegewezen in realtime wijzigen. Toetsenbord sneltoets: (CTRL + 2) Debugger: Hiermee kunt u onderbrekingspunten instellen en uw code debuggen terwijl deze wordt uitgevoerd, indien nodig regel voor regel. Toetsenbord sneltoets: (CTRL + 3) Netwerk: Geeft een overzicht van elk netwerkverzoek dat door de browser is gestart tijdens het laden en uitvoeren van de pagina, inclusief protocoldetails, inhoudstype, bandbreedtegebruik en nog veel meer. Toetsenbord sneltoets: (CTRL + 4) Prestatie: Details van framesnelheden, CPU-gebruik en andere prestatiegerelateerde meetwaarden helpen u om laadtijden van pagina's en andere activiteiten te versnellen. Toetsenbord sneltoets: (CTRL + 5) Geheugen: Helpt u potentiële geheugenlekken op de huidige webpagina te isoleren en te corrigeren door een geheugengebruiktijdlijn weer te geven samen met snapshots uit verschillende tijdsintervallen. Toetsenbord sneltoets: (CTRL + 6) emulatie: Toont hoe de actieve pagina in verschillende resoluties en schermformaten rendert, waarbij smartphones, tablets en andere apparaten worden geëmuleerd. Biedt ook de mogelijkheid om de user-agent en de pagina-oriëntatie aan te passen en verschillende geolocaties te simuleren door een breedtegraad en lengtegraad in te voeren. Toetsenbord sneltoets: (CTRL + 7)
3. Om de Troosten terwijl u in een van de andere gereedschappen op de vierkante knop klikt met een rechter haakje erin, in de rechterbovenhoek van de interface voor ontwikkelingshulpmiddelen.
4. Als u de interface van ontwikkelaarstools wilt ontkoppelen, klikt u op de knop die wordt weergegeven door twee rechthoekige rechthoeken of gebruikt u de volgende sneltoets: CTRL + P . U kunt de gereedschappen terug op hun oorspronkelijke locatie plaatsen door op te drukken CTRL + P een tweede keer.

Apple Safari (alleen OS X)

Safari's diverse dev-toolset weerspiegelt de grote ontwikkelaarscommunity die een Mac gebruikt voor hun ontwerp- en programmeerbehoeften. Naast een krachtige console en traditionele logboek- en foutopsporingsfuncties zijn ook een gebruiksvriendelijke responsieve ontwerpmodus en een hulpmiddel voor het maken van uw eigen browserextensies beschikbaar.

1. Klik op Safari in het browsermenu, bovenaan het scherm. Wanneer het vervolgkeuzemenu verschijnt, selecteert u voorkeuren . U kunt ook de volgende sneltoets gebruiken in plaats van dit menu-item: COMMAND + komma (,)
2. Safari's voorkeuren interface moet nu worden weergegeven, overlappend in uw browservenster. Klik op de gevorderd pictogram, uiterst rechts op de koptekst.
3. De gevorderd voorkeuren moeten nu zichtbaar zijn. Onderaan dit scherm staat een optie met het label Toon Ontwikkelingsmenu in menubalk , vergezeld van een selectievakje. Als er geen vinkje in het vak staat, klik er dan eenmaal op om er een te plaatsen.
4. Sluit de voorkeuren interface door te klikken op de rode 'x' in de linkerbovenhoek.
5. U zou nu een nieuwe optie moeten opmerken in het browser-menu met de naam Ontwikkelen , gelegen tussen bladwijzers en Venster . Klik op dit menu-item. Nu moet een vervolgkeuzemenu worden weergegeven met de volgende opties.Open pagina met: Hiermee kunt u de actieve webpagina openen in een van de andere browsers die momenteel op uw Mac zijn geïnstalleerd.User Agent: Hiermee kunt u kiezen uit meer dan een dozijn vooraf gedefinieerde waarden voor gebruikersagenten, waaronder verschillende versies van Chrome, Firefox en Internet Explorer, evenals uw eigen aangepaste tekenreeks definiëren.Ga naar Responsive Design Mode: Hiermee wordt de huidige pagina weergegeven zoals deze op verschillende apparaten en op verschillende schermresoluties zou verschijnen.Show Web Inspector: Lanceert de hoofdinterface voor Safari's dev-tools, meestal onderaan het scherm van je browser en bevat de volgende secties: Elements , Netwerk , Middelen , tijdlijnen , Debugger , opslagruimte , Troosten .Show Error Console: Lanceert ook de dev tools interface, rechtstreeks naar de Troosten tabblad met fouten, waarschuwingen en andere doorzoekbare loggegevens.Toon paginabron: Opent de Middelen tabblad, dat de broncode voor de actieve pagina weergeeft, gecategoriseerd per document.Toon paginabronnen: Voert dezelfde functie uit als de Toon paginabron keuze.Show Snippet Editor: Opent een nieuw venster waarin u CSS- en HTML-code kunt invoeren, terwijl u de uitvoer direct kunt bekijken.Toon extensiebouwer: Biedt de mogelijkheid om Safari-extensies te maken of te bewerken met CSS, HTML en JavaScript.Tijdlijnopname weergeven: Opent de tijdlijnen tabblad en begint met het weergeven van netwerkverzoeken, lay-out- en renderinformatie en realtime JavaScript-uitvoering.Lege caches: Verwijdert de gehele cache die momenteel wordt opgeslagen op uw harde schijf.Caches uitschakelen: Stopt Safari tegen caching, zodat bij het laden van elke pagina alle inhoud van de server wordt opgehaald.Afbeeldingen uitschakelen: Voorkomt dat afbeeldingen worden weergegeven op alle webpagina's.Deactiveer stijlen: CSS-eigenschappen worden genegeerd wanneer een pagina is geladen.Schakel JavaScript uit: Beperkt JavaScript-uitvoering op alle pagina's.Schakel extensies uit: Verbiedt dat alle geïnstalleerde extensies in de browser worden uitgevoerd.Schakel site-specifieke hacks uit: Als Safari is gewijzigd om expliciet de kwestie (en) voor de actieve webpagina af te handelen, blokkeert deze optie die wijzigingen zodat de pagina wordt geladen zoals deze zou zijn voordat deze wijzigingen werden geïntroduceerd.Lokale bestandsbeperkingen uitschakelen: Geeft de browser toegang tot bestanden op uw lokale schijven, een actie die om veiligheidsredenen standaard is beperkt.Schakel beperkingen voor de oorsprong uit: Deze beperkingen zijn standaard ingesteld om XSS en andere potentiële gevaren te voorkomen. Ze moeten echter vaak tijdelijk worden uitgeschakeld voor ontwikkelingsdoeleinden.JavaScript toestaan ​​uit het slimme zoekveld: Indien ingeschakeld, biedt de mogelijkheid om URL's in te voeren met javascript: verwerkt in de adresbalk.Behandel SHA-1-certificaten als onzeker: SSL-certificaten die het SHA-1-algoritme gebruiken, worden over het algemeen beschouwd als verouderd en kwetsbaar.