Firefox Auroras nye funktioner viser, at Mozilla lytter til udviklere

Firefox Aurora er pre-Beta build af Firefox og er nu tilgængelig til download fra Firefox Aurora udgivelseskanal. Den gratis download inkluderer nye funktioner til Firefox Developer Tools. Firefox implementerede disse nye værktøjer baseret på kommentarer fra webudviklere og muligvis i et forsøg på at tilbyde et alternativ til Googles webudviklerværktøjer.

Jeg gennemgår de fleste af de nye funktioner, der blev dækket i Mozilla Hacks Firefox Developer Tools-artiklen Rediger som HTML, Codemirror og mere: JavaScript Debugger-værktøj, rediger som HTML, vælg standard farveenhedsformat, forhåndsvisninger af farveprøve, CodeMirror og WebConsole Reflow logging.

Bemærk: Dette indhold er også tilgængeligt i galleriformat.

Installation af Firefox Aurora

For at teste funktionerne var jeg nødt til at downloade og installere Firefox Aurora. Så jeg klikkede på knappen Firefox Aurora Gratis download og klikkede derefter på den eksekverbare fil firefox-27.0a2.en-US.win32.installer-stub.exe ( figur A ).

Figur A

Jeg fjernede markeringen af ​​markeringen til Gør Aurora til min standardbrowser og klikkede derefter på knappen Indstillinger (figur A), hvilket resulterede i dialogboksen Aurora Setup ( figur B ). Jeg sørgede for, at standard Browser-valg stadig ikke var markeret og også markeret markeringen for at oprette en genvej på mit skrivebord. Så klikkede jeg på knappen Install.

Figur B

Det tog et par minutter at få downloadet til min pc (jeg har Time Warner Cable Turbo med 21M downloadhastighed) ( figur C ). Du modtager muligvis en anmeldelse fra din antivirus-software om en ukendt fil, når du har udført installationsfilen; Dette skyldes hovedsageligt filens nyhed, men også på grund af det faktum, at det er en pre-beta-version, så den har lidt historie på dette tidspunkt.

Fig

Når download og installation er afsluttet, føres du straks til Aurora-browseren og Om Aurora-boksen ( figur D ).

Figur D

Under installationen, hvis du markerer afkrydsningsfeltet for at tilføje en genvej til din hurtige startbjælke, vil du se Aurora-klodikonet som vist helt til højre i figur E.

Figur E

Testkørsel af nogle af de nye værktøjer

For at bruge de nye Firefox Developer Tools skal du højreklikke hvor som helst på skærmen i Aurora og derefter klikke på Inspect Element (Q) ( figur F ).

Figur F

Panelet Developer Tools åbnes som standard på fanen Inspector i bunden af ​​skærmen ( figur G ).

Figur G

JavaScript-debugger: Break on DOM-begivenheder

I henhold til JavaScript Debugger giver det nye værktøj dig mulighed for automatisk at bryde en række DOM-hændelser uden at skulle forudindstille nogen breakpoints. Følg disse trin for at bruge JavaScript-debugger ( figur H ):

1. Klik på fanen Debugger fra panelet Udviklerværktøjer.

2. Klik på knappen Udvid ruder, der er til højre for søgetekstfeltet.

3. Klik på fanen Begivenheder. Du kan klikke på en vilkårlig begivenhed for at sætte den på pause næste gang den finder sted.

Figur H

Inspektørværktøj: HTML Editor

Som standard åbnes Developer Tool til fanen Inspector. Derfra kan du foretage ændringer til HTML ved at højreklikke på et hvilket som helst element og derefter vælge indstillingen Rediger som HTML ( figur I ).

Figur I

Og derefter åbnes indholdsboksen, hvor du kan redigere HTML ( figur J ).

Figur J

Vælg standardfarveformat og farveprøveeksempler

Du har nu muligheden for at vælge standardfarveenhedsformat til fanen Inspector. Valgmulighederne findes i Toolbox-indstillingerne og kan åbnes ved at klikke på tandhjulknappen længst til venstre i panelet Developer Tools ( figur K ).

Figur K

Valg af farvevælgerenhed er Hex, HSL (A), RGB (A) og farvenavne ( figur L ).

Figur L

Forhåndsvisninger af farveprøver er nu tilgængelige fra ruden Regler i højre side og viser farver fra valgte elementer i inspektionsruden ( figur M), hvor "indholdet" inkluderer reglen for en 2px kant med en solid # 000 og en baggrund med en farve på # 333.

Figur M

CodeMirror

Den populære og alsidige HTML5-baserede teksteditor CodeMirror implementeres i JavaScript til browseren og er nu den komponenteditor, der bruges i Firefox Developer Tools. Det er i Style Editor, Debugger, Inspector som indstillingen Edit As HTML beskrevet ovenfor og i Scratchpad. Fra indstillingerne for Valg kan du vælge mellem to Dev Tool-temaer: Lys eller mørk ( figur N ).

Figur N

Figur O er et eksempel på lystemaet med ruden Style Editor åben i ruden Developer Tools.

Figur O

WebConsole: Reflow-logging

Fra panelet Udviklerværktøjer skal du klikke på fanen Konsol, vælge CSS-menuen og derefter klikke på menupunktet Log ( figur P ).

Figur P

Når loggen er slået til, udskrives en log hver gang en reflow finder sted på den aktive og inspicerede webside med navnet på JavaScript-funktionen, der udløste den optagne refow ( figur Q ).

Figur Q

Resumé

De nye funktioner i Firefox Developer Tools, der findes i pre-Beta-frigivelsen af ​​Aurora, er en god testgrund til fremtidige udgivelser af Firefox-browseren. Det viser, at Mozilla lytter til webudviklerfællesskabet og reagerer med gode resultater.

Hvad, hvis nogen, Firefox Developer Tools bruger du i din daglige webudvikling? Hvis du tjekket Aurora, skal du også dele dine indtryk af frigivelsen i diskussionen.


© Copyright 2020 | mobilegn.com