Overslaan en naar hoofdcontent gaan

Hoe gebruik ik Firefox firebug?

  • Bijgewerkt

Firebug was een populaire extensie voor Firefox die ontwikkelaars hielp bij het inspecteren en debuggen van HTML, CSS en JavaScript op webpagina's. Echter, Firebug is sinds 2017 niet meer beschikbaar en de functionaliteiten zijn geïntegreerd in de ingebouwde Firefox Developer Tools. Hier is een handleiding voor het gebruik van deze moderne tools.

1. Developer Tools openen

  • Sneltoets: Druk op F12 of Ctrl+Shift+I (Cmd+Opt+I op Mac).
  • Via het menu:
    • Klik op het hamburgermenu (de drie streepjes rechtsboven).
    • Ga naar Meer Hulpmiddelen en selecteer Webontwikkelaarshulpmiddelen.

2. Overzicht van de Developer Tools

De Developer Tools bestaan uit verschillende tabbladen:

Inspector

  • Wat doet het?: Helpt bij het inspecteren en aanpassen van HTML en CSS.
  • Gebruik:
    • Beweeg de muis over elementen op de webpagina om de bijbehorende code te zien.
    • Klik met de rechtermuisknop op een element en kies Element inspecteren om direct naar de code te gaan.
    • Je kunt live wijzigingen aanbrengen in HTML en CSS en de effecten direct zien.

Console

  • Wat doet het?: Toont foutmeldingen, waarschuwingen en console.log() uitvoer vanuit JavaScript.
  • Gebruik:
    • Gebruik JavaScript-commando's direct in de console.
    • Bekijk foutmeldingen om problemen met scripts op te lossen.

Debugger

  • Wat doet het?: Helpt bij het debuggen van JavaScript-code.
  • Gebruik:
    • Zet breakpoints om de code stap voor stap te doorlopen.
    • Bekijk de waarden van variabelen tijdens runtime.

Network

  • Wat doet het?: Toont alle netwerkverzoeken zoals API-calls, afbeeldingen en scripts.
  • Gebruik:
    • Analyseer de laadtijd van resources.
    • Bekijk gedetailleerde informatie over elk verzoek, zoals headers en antwoorden.

Performance

  • Wat doet het?: Meet de prestaties van een webpagina, zoals laadtijden en rendering.
  • Gebruik:
    • Start en stop een opname om te analyseren waar vertragingen optreden.
    • Bekijk grafieken met CPU-gebruik en frames per seconde.

Storage

  • Wat doet het?: Geeft inzicht in lokale opslag zoals cookies, localStorage en sessionStorage.
  • Gebruik:
    • Bekijk en wijzig opgeslagen waarden.
    • Handig voor het debuggen van login-sessies of gebruikersinstellingen.

3. Handige Tips en Trucs

  • Snelle inspectie: Klik met de rechtermuisknop op een pagina-element en kies Element inspecteren om direct de HTML en CSS te bekijken.
  • Live bewerken: Je kunt CSS-eigenschappen aanpassen en direct het effect zien zonder de pagina te herladen.
  • Console shorthand: Gebruik $0, $1, etc., om te verwijzen naar de laatste geselecteerde elementen in de Inspector.
  • Mobile View testen: Klik op het pictogram Responsive Design Mode (telefoon- en tableticoon) om de website te testen voor verschillende schermformaten.

Verwante artikelen