Firefox Auroras nye funksjoner viser at Mozilla lytter til utviklere

Firefox Aurora er pre-Beta build av Firefox og er nå tilgjengelig for nedlasting fra Firefox Aurora utgivelseskanal. Den gratis nedlastingen inkluderer nye funksjoner for Firefox Developer Tools. Firefox implementerte disse nye verktøyene basert på kommentarer fra webutviklere og muligens i et forsøk på å tilby et alternativ til Googles verktøy for webutvikler.

Jeg vil gå gjennom de fleste av de nye funksjonene som ble dekket i Mozilla Hacks Firefox Developer Tools-artikkelen Rediger som HTML, Codemirror og mer: JavaScript Debugger-verktøy, rediger som HTML, velg standard fargeenhetsformat, forhåndsvisning av fargeprøve, CodeMirror og WebConsole Logg på nytt.

Merk: Dette innholdet er også tilgjengelig i galleriformat.

Installerer Firefox Aurora

For å teste funksjonene, trengte jeg å laste ned og installere Firefox Aurora. Så jeg klikket på Firefox Aurora Free Download-knappen, og klikket deretter den kjørbare filen firefox-27.0a2.en-US.win32.installer-stub.exe ( figur A ).

Figur A

Jeg fjernet merket for å gjøre Aurora til min standard nettleser og klikket deretter på Alternativer-knappen (figur A), noe som resulterte i dialogboksen Aurora Setup ( figur B ). Jeg sørget for at standard nettleservalg fremdeles ikke var avmerket, og at jeg også merket av for å lage en snarvei på skrivebordet mitt. Så klikket jeg på Installer-knappen.

Figur B

Det tok noen minutter å få nedlastingen til PC-en min (jeg har Time Warner Cable Turbo med 21M nedlastingshastighet) ( figur C ). Du kan motta et varsel fra antivirusprogramvaren din om en ukjent fil etter at du har kjørt installasjonsfilen; dette skyldes hovedsakelig filens nyhet, men også fordi det er en pre-beta-versjon, så den har liten historie på dette tidspunktet.

Figur C

Når nedlastingen og installasjonen er fullført, blir du øyeblikkelig ført til Aurora-nettleseren og Om Aurora-boksen ( figur D ).

Figur D

Hvis du markerer avkrysningsruten for å legge til en snarvei til hurtigstartlinjen under installasjonen, vil du se Aurora-jordikonet som vist helt til høyre i figur E.

Figur E

Testkjøring av noen av de nye verktøyene

Hvis du vil bruke de nye Firefox Developer Tools, høyreklikker du hvor som helst på skjermen i Aurora og klikker deretter Inspect Element (Q) ( figur F ).

Figur F

Utviklerverktøy-panelet åpnes som standard på Inspector-fanen nederst på skjermen ( Figur G ).

Figur G

JavaScript Debugger: Break on DOM-arrangementer

I følge JavaScript Debugger lar det nye verktøyet deg automatisk bryte en rekke DOM-hendelser uten å måtte forhåndsinnstille noen brytepunkter. Følg disse trinnene for å bruke JavaScript Debugger ( figur H ):

1. Klikk på Debugger-fanen fra panelet Developer Tools.

2. Klikk på Expand Panes-knappen, som er til høyre for tekstfeltet i søket.

3. Klikk på kategorien Hendelser. Du kan klikke på en hvilken som helst hendelse for å stoppe den neste gang den inntreffer.

Figur H

Inspektørverktøy: HTML Editor

Som standard åpnes utviklerverktøyet til Inspector-fanen. Derfra kan du gjøre endringer i HTML ved å høyreklikke på hvilket som helst element og deretter velge alternativet Rediger som HTML ( figur I ).

Figur I

Og så åpnes innholdsboksen der du kan redigere HTML-en ( figur J ).

Figur J

Velg standard forhåndsvisning av fargeformat og fargeprøve

Du har nå muligheten til å velge standardfargeenhetsformat for inspektør-fanen. Valgalternativene er i Toolbox Options, og kan åpnes ved å klikke på tannhjulknappen helt til venstre i Developer Tools-panelet ( figur K ).

Figur K

Alternativene for fargevelgerenhet er Hex, HSL (A), RGB (A) og fargenavn ( figur L ).

Figur L

Forhåndsvisninger av fargeprøver er nå tilgjengelige fra regel-panelet på høyre side og viser farger fra valgte elementer i inspektørruten ( figur M), der "innholdet" inkluderer regelen for en 2px kant med en solid # 000 og en bakgrunn med en farge på # 333.

Figur M

CodeMirror

Den populære og allsidige HTML5-baserte tekstredigereren CodeMirror implementeres i JavaScript for nettleseren og er nå komponentredigereren som brukes i Firefox Developer Tools. Det er i Style Editor, Debugger, Inspector som alternativet Edit As HTML beskrevet ovenfor og i Scratchpad. Fra Alternativer-innstillingene kan du velge mellom to Dev Tool-temaer: Lys eller mørk ( figur N ).

Figur N

Figur O er et eksempel på Light Theme med Style Editor-ruten åpen i Developer Tools-ruten.

Figur O

WebConsole: Logg på nytt

Fra panelet Developer Tools klikker du på Console-fanen, velger CSS-menyen og klikker deretter Log menyelementet ( figur P ).

Figur P

Når loggen er på, hver gang en refow skjer på den aktive og inspiserte websiden, vil en logg skrives ut med navnet på JavaScript-funksjonen som utløste den registrerte refowen ( figur Q ).

Figur Q

Sammendrag

De nye funksjonene i Firefox Developer Tools som er funnet i pre-Beta-utgivelsen av Aurora er et godt testgrunnlag for fremtidige utgivelser av Firefox-nettleseren. Det viser at Mozilla lytter til nettutviklerfellesskapet og svarer med flotte resultater.

Hva, hvis noen, Firefox Developer Tools bruker du i den daglige nettutviklingen? Hvis du sjekket ut Aurora, kan du også dele inntrykk av utgivelsen i diskusjonen.


© Copyright 2020 | mobilegn.com