Ontwikkeltools voor webbrowsers gebruiken

2024 Auteur: Abigail Brown | [email protected]. Laatst gewijzigd: 2023-12-17 06:36

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 kwaliteitsborgingsprofessionals die helpen bij het bouwen van de apps en sites waartoe deze gebruikers toegang hebben door krachtige integratie van tools rechtstreeks in de browsers zelf.

Voorbij zijn de dagen dat je met de enige programmeer- en testtools in een browser de broncode van een pagina kon bekijken en niets meer. Met de huidige browsers kunt u een veel diepere duik nemen door dingen te doen zoals het uitvoeren en debuggen van JavaScript-fragmenten, het inspecteren en bewerken van DOM-elementen, het bewaken van re altime netwerkverkeer terwijl uw app of pagina wordt geladen om knelpunten te identificeren, het analyseren van CSS-prestaties en ervoor zorgen dat uw code is niet te veel geheugen of te veel CPU-cycli gebruiken, en nog veel meer.

Vanuit een testperspectief kun je reproduceren hoe een app of webpagina wordt weergegeven in verschillende browsers en op verschillende apparaten en platforms door de magie van responsief ontwerp en ingebouwde simulators. Het beste is dat je dit allemaal kunt doen zonder je browser te hoeven verlaten!

De onderstaande tutorials laten je zien hoe je 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 aan het licht te brengen, verschillende apparaatschermen simuleren, waaronder die met Android of iOS, en verschillende andere handige functies uitvoeren.

1. Selecteer Chrome's hoofdmenu, gemarkeerd met drie horizontale lijnen en in de rechterbovenhoek van de browser.

2. Wanneer het vervolgkeuzemenu verschijnt, beweegt u uw muiscursor over de More tools optie.

   

3. Er zou nu een submenu moeten verschijnen. Selecteer de optie met het label Developer tools. U kunt ook de volgende sneltoets gebruiken in plaats van dit menu-item: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMANDO+I)

   

4. De Chrome Developer Tools-interface zou nu moeten worden weergegeven, zoals weergegeven in dit voorbeeldscherm. Afhankelijk van uw versie van Chrome, kan de aanvankelijke lay-out die u ziet enigszins afwijken van de hier gepresenteerde. De belangrijkste hub van de ontwikkelaarstools, meestal aan de onderkant of rechterkant van het scherm, bevat de volgende tabbladen.

5. Naast deze secties heb je ook toegang tot de volgende tools via het >> pictogram, rechts van de Performance tab.

   • Memory: Monitor en noteer het geheugengebruik op een webpagina. U kunt zien hoe zwaar het JavaScript op uw site is.
   • Security: markeert certificaatproblemen en andere beveiligingsproblemen met de actieve pagina of applicatie.
   • Applicatie: Inspecteer de bronnen die door een webtoepassing worden gebruikt. Krijg een volledig overzicht van wat er wordt gebruikt.
   • Audits: Biedt manieren om de laadtijd en algemene prestaties van een pagina of applicatie te optimaliseren.

   

6. Apparaatmodus stelt u in staat om de actieve pagina in een simulator te bekijken die deze bijna precies weergeeft zoals deze zou verschijnen op een van de meer dan een dozijn 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.

   Om Apparaatmodus in en uit te schakelen, selecteert u het mobiele telefoonpictogram direct links van de Elementen tab.

   

7. Je kunt ook het uiterlijk van je ontwikkelaarstools aanpassen door eerst de menuknop te selecteren, vertegenwoordigd door drie verticaal geplaatste stippen en bevindt zich helemaal rechts van de bovengenoemde tabbladen.

   Vanuit dit vervolgkeuzemenu kunt u het dock verplaatsen, verschillende tools weergeven of verbergen en meer geavanceerde items starten, zoals een apparaatinspecteur. U zult zien dat de interface van de devtools zelf in hoge mate aanpasbaar is via de instellingen in deze sectie.

   

Mozilla Firefox

De webontwikkelaarssectie van Firefox bevat tools voor zowel ontwerpers, ontwikkelaars als testers, zoals een stijleditor en pixeltargeting-pipet.

1. Selecteer Firefox's hoofdmenu, weergegeven door drie horizontale lijnen en gelegen in de rechterbovenhoek van het browservenster.

2. Wanneer het vervolgkeuzemenu verschijnt, selecteert u Web Developer.

   

3. Het Web Developer-menu zou nu moeten worden weergegeven, met de volgende opties. U zult merken dat aan de meeste menu-items sneltoetsen zijn gekoppeld.

   • Toggle Tools: Toont of verbergt de interface voor ontwikkelaarstools, meestal onder aan het browservenster. Sneltoets: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Hiermee kunt u CSS- en HTML-code inspecteren en/of aanpassen op de actieve pagina en op een draagbaar apparaat via foutopsporing op afstand. Sneltoets: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: hiermee kunt u JavaScript-expressies uitvoeren binnen de actieve pagina en een diverse set gelogde gegevens bekijken, waaronder beveiligingswaarschuwingen, netwerkverzoeken, CSS-berichten en meer. Sneltoets: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: Met de JavaScript Debugger kunt u defecten lokaliseren en repareren door breekpunten in te stellen, DOM-knooppunten te inspecteren, externe bronnen te blackboxen en nog veel meer. Net als bij de Inspector ondersteunt deze functie ook foutopsporing op afstand. Sneltoets: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Style Editor: Hiermee kunt u nieuwe stylesheets maken en deze opnemen in de actieve webpagina, of bestaande sheets bewerken en testen hoe uw wijzigingen worden weergegeven in een browser met slechts één klik. Sneltoets: Mac OS X, Windows (SHIFT+F7)
   • Performance: Biedt een gedetailleerd overzicht van de netwerkprestaties van de actieve pagina, framerate-gegevens, JavaScript-uitvoeringstijd en -status, paint flashing en nog veel meer. Sneltoets: Mac OS X, Windows (SHIFT+F5)
   • Network: 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(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Bekijk de cache en cookies die door een website worden opgeslagen. Sneltoets: (SHIFT+F9)
   • Developer Toolbar: Opent een interactieve opdrachtregelinterpreter. Voer help in de interpreter in voor een lijst van alle beschikbare commando's en hun juiste syntax. Sneltoets: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Biedt de mogelijkheid om web-apps te maken en uit te voeren via een echt apparaat met Firefox OS of via de Firefox OS Simulator. Sneltoets: Mac OS X, Windows (SHIFT+F8)
   • Browserconsole: Biedt dezelfde functionaliteit als de webconsole (zie hierboven). Alle geretourneerde gegevens zijn echter voor de hele Firefox-toepassing (inclusief extensies en functies op browserniveau) en niet alleen voor de actieve webpagina. Sneltoets: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsive Design View: Hiermee kunt u direct een webpagina bekijken in verschillende resoluties, lay-outs en schermformaten om meerdere apparaten na te bootsen, waaronder tablets en smartphones. Sneltoets: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Toont de hexadecimale kleurcode voor individueel geselecteerde pixels.
   • Scratchpad: Met Scratchpad kunt u fragmenten van JavaScript-code schrijven, bewerken, integreren en uitvoeren vanuit een pop-outvenster van Firefox. Open een interactief JavaScript-document waarmee u in code kunt schrijven en dit kunt testen met een website. Sneltoets: (SHIFT+F4)
   • Servicemedewerkers: debuggen van servicemedewerkers in uw webtoepassing. Krijg gedetailleerde informatie over hun prestaties en fouten.
   • Paginabron: de originele browsergebaseerde ontwikkelaarstool, deze optie geeft gewoon de beschikbare broncode voor de actieve pagina weer. Sneltoets: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Get More Tools: Opent de Web Developer's Toolbox collectie op Mozilla's officiële add-ons site, met ongeveer een dozijn populaire extensies zoals als Firebug en Greasemonkey.

   

Microsoft Edge/Internet Explorer

Algemeen aangeduid als de F12 Developer Tools, een eerbetoon aan de sneltoets die de interface heeft gelanceerd sinds eerdere versies van Internet Explorer, de dev-toolset in IE11 en Microsoft Edge heeft een lange weg afgelegd sinds de oprichting door een zeer handige groep monitors, debuggers, emulators en on-the-fly compilers aan te bieden.

Microsoft ondersteunt Internet Explorer niet meer en raadt u aan bij te werken naar de nieuwere Edge-browser. Ga naar hun site om de nieuwste versie te downloaden.

1. Selecteer Meer acties, weergegeven door drie stippen en bevindt zich in de rechterbovenhoek van het browservenster.

   

2. Wanneer het vervolgkeuzemenu verschijnt, selecteert u de optie met het label Developer Tools.

   

3. De ontwikkelinterface zou nu moeten worden weergegeven, meestal onder aan het browservenster. De volgende tools zijn beschikbaar, elk toegankelijk door op hun respectievelijke tabbladkop te klikken of door de bijbehorende sneltoets te gebruiken.

   

   • DOM Explorer: Hiermee kunt u stylesheets en HTML op de actieve pagina bewerken, waarbij de gewijzigde resultaten gaandeweg worden weergegeven. Maakt gebruik van IntelliSense-functionaliteit om code automatisch aan te vullen, indien van toepassing. Sneltoets: (CTRL+1)
   • Console: Biedt de mogelijkheid om foutopsporingsinformatie in te dienen, inclusief tellers, timers, traceringen en aangepaste berichten via een geïntegreerde API. Hiermee kunt u ook code in een actieve webpagina injecteren en de waarden die aan individuele variabelen zijn toegewezen in re altime wijzigen. Sneltoets: (CTRL+2)
   • Debugger: Hiermee kunt u breekpunten instellen en uw code debuggen terwijl deze wordt uitgevoerd, regel voor regel indien nodig. Sneltoets: (CTRL+3)
   • Network: geeft een overzicht van elk netwerkverzoek dat door de browser wordt gestart tijdens het laden en uitvoeren van de pagina, inclusief protocoldetails, inhoudstype, bandbreedtegebruik en nog veel meer. Sneltoets: (CTRL+4)
   • Prestaties: Details framesnelheden, CPU-gebruik en andere prestatiegerelateerde statistieken om u te helpen de laadtijden van pagina's en andere activiteiten te versnellen. Sneltoets: (CTRL+5)
   • Memory: Helpt u bij het isoleren en corrigeren van mogelijke geheugenlekken op de huidige webpagina door een tijdlijn voor geheugengebruik weer te geven, samen met snapshots van verschillende tijdsintervallen. Sneltoets: (CTRL+6)
   • Emulatie: laat zien hoe de actieve pagina zou worden weergegeven in verschillende resoluties en schermformaten, waarbij smartphones, tablets en andere apparaten worden geëmuleerd. Het biedt ook de mogelijkheid om de user-agent en paginaoriëntatie te wijzigen, en om verschillende geolocaties te simuleren door een breedte- en lengtegraad in te voeren. Sneltoets: (CTRL+7)

4. Om de Console weer te geven binnen een van de andere tools, drukt u op de square-knop met een rechter haakje erin, in de rechterbovenhoek van de interface voor ontwikkeltools.

   

5. Om de interface van de ontwikkelaarstools los te koppelen zodat het een apart venster wordt, selecteert u de twee trapsgewijze rechthoeken of gebruikt u de volgende sneltoets: CTRL+P. U kunt de gereedschappen terugzetten op hun oorspronkelijke locatie door een tweede keer op CTRL+P te drukken.

   

Apple Safari (alleen Mac)

Safari's diverse dev-toolset weerspiegelt de grote ontwikkelaarsgemeenschap die een Mac gebruikt voor hun ontwerp- en programmeerbehoeften. Naast een krachtige console en traditionele functies voor loggen en debuggen, wordt er ook voorzien in een gebruiksvriendelijke responsieve ontwerpmodus en een tool om uw eigen browserextensies te maken.

1. Selecteer Safari in het browsermenu bovenaan je scherm. Wanneer het vervolgkeuzemenu verschijnt, selecteert u Voorkeuren. U kunt ook de volgende sneltoets gebruiken in plaats van dit menu-item: COMMAND+COMMA(,)

   

2. Safari's Preferences interface zou nu moeten worden weergegeven, over uw browservenster heen. Selecteer het Geavanceerd-pictogram, helemaal rechts van de koptekst.

   

3. De Advanced voorkeuren zouden nu zichtbaar moeten zijn. Onder aan dit scherm staat een optie met het label Ontwikkelmenu weergeven in de menubalk, vergezeld van een selectievakje. Als er geen vinkje wordt weergegeven in het vak, klik er dan één keer op om er een te plaatsen.

   

4. Sluit de Voorkeuren interface.

5. Je zou nu een nieuwe optie moeten zien in het browsermenu genaamd Develop, gelegen tussen Bookmarks en Window. Klik op dit menu-item. Er zou nu een vervolgkeuzemenu moeten worden weergegeven met de volgende opties.

   • Pagina openen 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 user-agentwaarden, waaronder verschillende versies van Chrome, Firefox en Internet Explorer, en uw eigen aangepaste tekenreeks.
   • Enter Responsive Design Mode: Geeft de huidige pagina weer zoals deze zou verschijnen op verschillende apparaten en met verschillende schermresoluties.
   • Show Web Inspector: Start de hoofdinterface voor Safari's dev-tools, meestal onder aan uw browserscherm geplaatst en met de volgende secties: Elements, Network, Resources, Timelines, Foutopsporing, Opslag, Console.
   • Show Error Console: start ook de interface voor ontwikkelaarstools, rechtstreeks naar het Console-tabblad dat fouten, waarschuwingen en andere doorzoekbare loggegevens.
   • Show Page Source: Opent het Resources-tabblad, dat de broncode voor de actieve pagina weergeeft, gecategoriseerd door het document.
   • Show Page Resources: Voert dezelfde functie uit als de optie Show Page Source.
   • Snippet Editor tonen: Opent een nieuw venster waar u CSS- en HTML-code kunt invoeren, waarbij u direct een voorbeeld van de uitvoer kunt bekijken.
   • Show Extension Builder: Biedt de mogelijkheid om Safari-extensies te maken of te bewerken met CSS, HTML en JavaScript.
   • Tijdlijnopname tonen: Opent het tabblad Tijdlijnen en begint met het weergeven van netwerkverzoeken, lay-out en weergave-informatie, evenals JavaScript-uitvoering in re altime.
   • Empty Caches: verwijdert de volledige cache die momenteel op uw harde schijf is opgeslagen.
   • Caches uitschakelen: Voorkomt dat Safari cachet, zodat alle inhoud van de server wordt opgehaald bij elke pagina die wordt geladen.
   • Afbeeldingen uitschakelen: Voorkomt dat afbeeldingen op alle webpagina's worden weergegeven.
   • Stijlen uitschakelen: negeert CSS-eigenschappen wanneer een pagina wordt geladen.
   • Schakel JavaScript uit: Beperkt de uitvoering van JavaScript op alle pagina's.
   • Extensies uitschakelen: verbiedt het gebruik van alle geïnstalleerde extensies in de browser.
   • Site-specifieke hacks uitschakelen: als Safari is aangepast om expliciet problemen op te lossen die specifiek zijn voor de actieve webpagina, blokkeert deze optie die wijzigingen zodat de pagina laadt zoals het zou zijn voordat deze wijzigingen werden ingevoerd.
   • Lokale bestandsbeperkingen uitschakelen: Hiermee krijgt de browser toegang tot bestanden op uw lokale schijven, een actie die standaard is beperkt om veiligheidsredenen.
   • Cross-Origin-beperkingen uitschakelen: deze beperkingen worden standaard ingesteld om XSS en andere potentiële gevaren te voorkomen. Ze moeten echter vaak tijdelijk worden uitgeschakeld voor ontwikkelingsdoeleinden.
   • Sta JavaScript toe vanuit Smart Search Field: Indien ingeschakeld, biedt het de mogelijkheid om URL's in te voeren met javascript: rechtstreeks opgenomen in de adresbalk.
   • Behandel SHA-1-certificaten als onveilig: SSL-certificaten die gebruikmaken van het SHA-1-algoritme worden algemeen als verouderd en kwetsbaar beschouwd.