10 nuttige Firefox-ontwikkelaarstools die u moet kennen
Firefox wordt "ontwikkelaarsbrowser" en heeft veel geweldige hulpmiddelen om ons werk gemakkelijker te maken. U vindt meer informatie over de gereedschapscollectie op de Firefox Developer Tools-webpagina en kunt ook hun Developer Edition-browser proberen, die meer functies en tools heeft die worden getest.
Voor deze post heb ik genoteerd 10 handige tools Misschien vind je het leuk uit de verzameling van ontwikkelaarstools. Ik heb ook aangetoond wat deze hulpmiddelen kunnen doen met GIF's plus hoe u ze kunt openen voor een snelle referentie.
1. Bekijk horizontale en verticale linialen
Firefox heeft een liniaal-tool die geeft zowel horizontale als verticale linialen weer met pixeleenheden op de pagina. De tool is handig voor het rangschikken van uw elementen over de pagina.
Ga voor toegang tot linialen via het menu naar: ☰> Ontwikkelaar > Werkbalk voor ontwikkelaars (sneltoets: Shift + F2). Zodra de werkbalk onder aan de pagina verschijnt, typt u heersers en druk op invoeren.
Om dit in het venster met ontwikkelaarstools weer te geven, gaat u naar "Toolbox-opties". Controleer onder het gedeelte "Beschikbare werksetknoppen" de "Verander linialen voor de pagina"checkbox.
2. Maak screenshots met behulp van CSS selectors
Hoewel u met de Firefox-werkbalk schermafbeeldingen van de volledige pagina of zichtbare gedeelten kunt maken, is de CSS-selectormethode naar mijn mening handiger voor het vastleggen van schermafbeeldingen van individuele elementen zowel als voor elementen die zichtbaar zijn met de muisaanwijzer alleen (zoals menu's).
Als u schermafbeeldingen wilt maken via het menu, gaat u naar ☰> Ontwikkelaar > Werkbalk voor ontwikkelaars (shortcutShift + F2). Zodra de werkbalk onder aan de pagina verschijnt, typt u screenshot --selector any_unique_css_selector en druk op invoeren.
Om dit te laten verschijnen in het developer tools venster: klik op "Toolbox Options" en onder "Beschikbare Toolbox Buttons" sectie, vink "Neem een volledige schermafbeelding " checkbox.
3. Kies kleuren van webpagina's
Firefox heeft een ingebouwde kleurenkiezer met de naam "Eyedropper". Ga naar ☰> voor toegang tot de tool "Pipet" via het menu Ontwikkelaar > Pipet.
Om dit in het venster met ontwikkelaarstools weer te geven: klik op "Toolbox-opties" en onder "Beschikbare Toolbox-knoppen", vink "Pak een kleur van de pagina"checkbox.
4. Bekijk de pagina-indeling in 3D
Webpagina's in 3D bekijken helpt bij lay-outproblemen. U kunt de verschillende gelaagde elementen in 3D-weergave veel duidelijker zien. Om de webpagina in 3D te bekijken, klikt u op de knop "3D-weergave".
Om dit in het venster met ontwikkelaarstools weer te geven, klikt u op "Toolbox-opties" en onder "Beschikbare werksetknoppen", vink de "3D-weergave"checkbox.
5. Bekijk de browser-stijl
Browserstijlen bestaan uit twee typen: de standaardstijl die een browser toewijst voor elk element en de browserspecifieke stijlen (degenen met het voorvoegsel van de browser). Kijk eens naar de browserstijlen die u kunt gebruiken diagnosticeer eventuele override-problemen in uw stylesheet en ook kennis maken met bestaande browserspecifieke stijlen .
Ga naar ☰> om toegang te krijgen tot "Browser-stijlen" via het menu Ontwikkelaar > Inspecteur. Klik vervolgens op het tabblad "Berekend" in het rechterdeel en vink het selectievakje "Browserstijlen" aan.
U kunt ook de "Inspecteur"Blader door de sneltoets Ctrl + Shift + C en vervolgens naar" Browser-stijlen ".
6. Schakel JavaScript uit voor de huidige sessie
Voor best practices en schermlezercompatibiliteit is het altijd aangeraden om elke website zodanig te coderen dat de functionaliteit niet wordt belemmerd in een omgeving met javascript-disabled. Om te testen voor dergelijke omgevingen, kunt u schakel JavaScript uit voor de sessie waarin u werkt.
Om JavaScript voor de huidige sessie uit te schakelen, klikt u op "Toolbox-opties" en onder "Geavanceerde instellingen", vink de "Schakel JavaScript uit* "selectievakje.
7. Verberg CSS-stijl van de pagina
Net als JavaScript is het vanwege toegankelijkheidsproblemen het beste om websites zo te ontwerpen de pagina's moeten nog steeds leesbaar zijn, zelfs zonder stijlen. Om te zien hoe de pagina eruitziet zonder stijl, kunt u ze uitschakelen in de ontwikkelaarstools.
Om enige CSS-stijl (inline, intern of extern) toegepast op een webpagina te verwijderen, gewoon klik op het oogsymbool van de vermelde stylesheets op het tabblad "Stijleditor". Klik er nogmaals op om terug te keren naar de oorspronkelijke weergave.
Ga naar ☰> om toegang te krijgen tot "Stijleditor" via het menu Ontwikkelaar > Stijl-editor (snelkoppeling: Shift + F7.
8. Bekijk een voorbeeld van het HTML-inhoudsantwoord op een verzoek
Firefox-ontwikkelaarstools heeft een optie om een voorvertoning van de HTML-inhoudstype antwoorden. Hiermee kan de ontwikkelaar een voorbeeld van 302-omleidingen bekijken en controleren of er gevoelige informatie is weergegeven in de reactie.
Om toegang te krijgen tot "Voorbeeld" via het menu, gaat u naar ☰> Ontwikkelaar > Netwerk (sneltoets: Ctrl + Shift + Q. Open vervolgens de webpagina van uw keuze of laad de huidige pagina opnieuw, klik op de gewenste aanvraag (met HTML-reactie) uit de lijst met verzoeken en klik op de "Voorbeeld"tab in de rechter sectie.
9. Bekijk een voorbeeld van een webpagina op verschillende schermformaten
Om een webpagina te testen op zijn reactievermogen, gebruikt u de "Responsive Design View", die toegankelijk is via ☰> Ontwikkelaar > Responsieve ontwerpweergave of met de snelkoppeling: Ctrl + Shift + M.
Om de knop "Reactieve ontwerpmodus" weer te geven, klikt u op "Toolbox-opties" en schakelt u onder het gedeelte "Beschikbare werksetknoppen" het selectievakje "Responsieve ontwerpmodus" in.
10. Voer JavaScript op pagina's uit
Voor snelle JavaScript-uitvoeringen op elke webpagina gebruikt u gewoon de "Scratchpad" -tool van Firefox. Om toegang te krijgen tot "Scratchpad" via het menu gaat u naar; ☰> Ontwikkelaar > Kladblok of gebruik de sneltoets Shift + F4.
Om de toolknop "Scratchpad" in het developer-toolvenster te laten verschijnen voor snel gebruik: klik op "Toolbox-opties"en onder de"Beschikbare Toolbox-knoppen"bekijk het" Scratchpad " checkbox.
