Slik bruker du Firefox webutviklerverktøy

Innholdsfortegnelse:

Slik bruker du Firefox webutviklerverktøy
Slik bruker du Firefox webutviklerverktøy

Video: Slik bruker du Firefox webutviklerverktøy

Video: Slik bruker du Firefox webutviklerverktøy
Video: How to edit menu items || Shopify Help Center - YouTube 2024, November
Anonim
Firefox Web Developer-menyen inneholder verktøy for å inspisere sider, utføre vilkårlig JavaScript-kode, og vise HTTP-forespørsler og andre meldinger. Firefox 10 la til et helt nytt inspektørverktøy og oppdatert Scratchpad.
Firefox Web Developer-menyen inneholder verktøy for å inspisere sider, utføre vilkårlig JavaScript-kode, og vise HTTP-forespørsler og andre meldinger. Firefox 10 la til et helt nytt inspektørverktøy og oppdatert Scratchpad.

Firefox nye webutviklerfunksjoner, i kombinasjon med fantastiske webutvikler-tilleggsprogrammer som Firebug og Web Developer Toolbar, gjør Firefox til en ideell nettleser for webutviklere. Alle verktøyene er tilgjengelige under Webutvikler i Firefox-menyen.

Sideinspektør

Kontroller et bestemt element ved å høyreklikke på det og velg Undersøke (eller trykke på Q). Du kan også starte Inspektør fra webutvikler-menyen.

Du får se en verktøylinje nederst på skjermen, som du kan bruke til å kontrollere inspektøren. Ditt valgte element vil bli uthevet og andre elementer på siden vil bli dempet.
Du får se en verktøylinje nederst på skjermen, som du kan bruke til å kontrollere inspektøren. Ditt valgte element vil bli uthevet og andre elementer på siden vil bli dempet.
Image
Image

Hvis du vil velge et nytt element, klikker du på Undersøke knappen på verktøylinjen, hover musen over siden og klikk på elementet ditt. Firefox fremhever elementet under markøren din.

Du kan navigere mellom foreldre og barnelementer ved å klikke på breadcrumbs på verktøylinjen.
Du kan navigere mellom foreldre og barnelementer ved å klikke på breadcrumbs på verktøylinjen.

HTML Inspector

Klikk på HTML knappen for å vise HTML-koden for det valgte elementet.

Image
Image

HTML-inspektøren lar deg utvide og kollapse HTML-kodene, noe som gjør det enkelt å visualisere på et øyeblikk. Hvis du vil se sidens HTML i en flat fil, kan du velge Vis sidekilde fra webutvikler-menyen.

Image
Image

CSS Inspector

Klikk på Stil knappen for å se CSS-reglene som er brukt på det valgte elementet.

Image
Image

Det er også et CSS egenskaper panel - bytt mellom de to ved å klikke på regler og Eiendommer knapper. For å hjelpe deg med å finne bestemte egenskaper, inneholder egenskaper-panelet en søkeboks.

Image
Image

Du kan redigere elementets CSS i fly fra Regel-panelet. Fjern markeringen i avmerkingsboksen for å deaktivere en regel, klikk på teksten for å endre en regel, eller legg til dine egne regler til elementet øverst i ruten. Her har jeg lagt til font-weight: bold; CSS-regelen, noe som gjør elementets tekst fet.

Image
Image

JavaScript Scratchpad

Scratchpad så også en oppdatering med Firefox 10, og inneholder nå syntaksutheving. Du kan skrive inn JavaScript-kode for å kjøre på den nåværende siden.

Image
Image

Når du har, klikker du på Henrette menyen og velg Løpe. Koden kjører i den aktuelle kategorien.

Image
Image

Webkonsoll

Webkonsollen erstatter den gamle feilkonsollen, som er blitt utdatert og vil bli fjernet i en fremtidig versjon av Firefox.

Konsollen viser fire ulike typer meldinger, som du kan bytte til synlighet for - nettverksforespørsler, CSS-feilmeldinger, JavaScript-feilmeldinger og webutviklermeldinger.
Konsollen viser fire ulike typer meldinger, som du kan bytte til synlighet for - nettverksforespørsler, CSS-feilmeldinger, JavaScript-feilmeldinger og webutviklermeldinger.

Hva er en web utvikler melding? Det er en melding som skrives ut til window.console-objektet. For eksempel kan vi kjøre window.console.log ("Hello World"); JavaScript-kode i Scratchpad for å skrive ut en utviklermelding til konsollen. Webutviklere kan integrere disse meldingene i JavaScript-koden for å hjelpe deg med feilsøking.

Oppdater siden, og du vil se de genererte nettverksforespørsler og andre meldinger.
Oppdater siden, og du vil se de genererte nettverksforespørsler og andre meldinger.
Bruk søkefeltet til å filtrere meldingene; Klikk på en forespørsel hvis du vil se flere detaljer.
Bruk søkefeltet til å filtrere meldingene; Klikk på en forespørsel hvis du vil se flere detaljer.
Image
Image

Fra Firefox 10 kan webkonsollen fungere sammen med sidens inspektør. Varianten $ 0 representerer det valgte objektet i inspektøren. Så hvis du for eksempel vil gjemme det valgte objektet, kan du kjøre $ 0.style.display =”ingen” i konsollen.

Hvis du er interessert i å lære mer om bruk av konsollen og de innebygde funksjonene, kan du se siden Webkonsoll på Mozilla's Developer Network-nettside.
Hvis du er interessert i å lære mer om bruk av konsollen og de innebygde funksjonene, kan du se siden Webkonsoll på Mozilla's Developer Network-nettside.

Få flere verktøy

De Få flere verktøy alternativet tar deg til webutviklerens verktøykasse tilleggsinnsamling på Mozilla Add-Ons nettsted. Den inneholder noen av de beste tilleggene til webutviklere, inkludert Firebug og verktøylinjen for webutvikler.

Hvis du har brukt Firefox i noen år, kan du huske DOM Inspector. Firefox integrerte utviklerverktøy har kommet langt siden da.

Anbefalt: