Firefox Developer Edition 6 Stilīgākie rīki, lai mēģinātu

Firefox izstrādātāja izdevums ir vienīgā pārlūkprogramma, kas tiek izstrādāta īpaši izstrādātājiem. Standarta izdevuma izstrādātāju rīki pirmo reizi parādās izstrādātāja izdevumā, un izstrādātāja izdevumā ir rīki, kas nav un nebūs pieejami standarta izdevumā. Šodien mēs apskatīsim dažus instrumentus, kas pašlaik ir var atrast tikai izstrādātāja izdevumā.

Ja jūs esat kāds, kurš nekad nav izmantojis vai kurš nav labi pazīstams ar izstrādes rīkiem pat tiem, kas ir standarta izdevumā, vispirms pārbaudiet šo atdzist "DevTools Challenger". Šeit jūs varat nodarboties ar dažiem tālāk minētajiem rīkiem Firefox izstrādātāja izdevuma pārlūkprogrammā. Piemēri ir jautri un viegli sekojami, instrukcijas ir vienkāršas un, ja nevarat panākt, vienkārši izpildiet video pamācību.

1. Animācijas inspektora rīks

CSS animācijas kļūst arvien biežākas, un CSS animācijas rīki, ko nodrošina Firefox izstrādātāja izdevums, ļauj viegli sekot un pārbaudīt katru izveidotās animācijas soli. Varat apturēt, atskaņot un mainīt jebkuru animāciju; Jūs varat arī apskatīt to, kas notiek rāmī, izmantojot skrubi.

Lai piekļūtu rīkam, atveriet Inspektors rīks ar peles labo pogu noklikšķinot uz animācijas elementa un izvēloties "pārbaudīt elementu", tad dev instrumenta loga labajā pusē noklikšķiniet uz "Animācijas".

2. Animācijas laika funkcijas redaktors

Animācijas laiks ir rediģējams dev rīkā, vienkārši noklikšķiniet uz ikonas blakus funkcijai Noteikumi sadaļa Inspektors tiek atvērts rīks un uznirstošais logs, kas parāda funkciju līknes. To var izdarīt, lai pielāgotu animācijas laiku. Kad esat veikuši izmaiņas līknēs, jūsu animācijas ātrums attiecīgi mainīsies.

Ja neesat jau pazīstams ar kubiskā Bezier animācijas funkciju, es ieteiktu šo ziņu, lai uzzinātu vairāk par to.

3. CSS īpašību krāsu atlasītājs

Firefox standarta izdevumā jau ir pieejams krāsu atlasītājs (lasiet vairāk par to šajā ziņojumā), kas atlasa krāsu no lapas un kopē to starpliktuvē. Krāsu atlasītājs, kuru es minēju, tagad ir specifiskas īpašību CSS krāsu vērtībām.

Blakus katrai CSS krāsu vērtībai Noteikumi sadaļa Inspektors rīks, tur ir ikona, kas atvērs krāsu riteni, uzklikšķinot uz augšu. Jūs varat izvēlēties, kādu krāsu vēlaties no riteņa.

Ja jums jau ir vajadzīgā krāsa, un tas, kas notiek lapā, vienkārši noklikšķiniet uz acu pilna rīka uznirstošā loga apakšā, lai atvērtu krāsu atlasītāju, pēc tam velciet atlasītāju līdz vēlamajai krāsai un noklikšķiniet uz tā . CSS krāsu vērtība tiks mainīta uz atlasītās krāsas vērtību.

4. Mērīšanas rīks

Šis rīks ļauj jums redzēt kursora XY pozīciju un augstumu, platumu un diagonāles izmērus izvēlētās daļas pikseļos. Lai izmantotu šo rīku, vispirms tas ir jāiespējo izstrādātājā Rīku komplekta opcijas, atzīmējot izvēles rūtiņu ar nosaukumu "Mērīt lapas daļu" sadaļā "Pieejamie rīki".

Kad tas ir iespējots, rīka loga augšdaļā parādīsies lineālu ikona, noklikšķiniet uz šīs ikonas un pārvietojiet kursoru virs lapas. Kursora tuvumā būs redzamas XY pozīcijas. Lai izmērītu platumu, augstumu un diagonāli, vienkārši noklikšķiniet un velciet, lai izvēlētos daļu, kuru vēlaties izmērīt.

5. CSS filtra redaktors

Ja lapas elementam izmantotu CSS filtru, blakus tai būs redzama ikona Noteikumi sadaļa Inspektors rīks, kas pēc klikšķa atver CSS filtra redaktoru.

Lai noņemtu filtru, noklikšķiniet uz × atzīmes filtra nosaukuma labajā pusē. Lai pievienotu filtru, noklikšķiniet uz filtra lodziņa apakšā un atlasiet to, kuru vēlaties pievienot, un noklikšķiniet uz + zīme. Varat arī pārkārtot filtrus jebkurā secībā, velkot katru objektu.

6. Atmiņas rīks

Ar šī rīka palīdzību varat uzzināt, kas ir jūsu mājas lapas atmiņa. Tas palīdz veikt pasākumus, lai samazinātu atmiņas izmantošanu un tādējādi uzlabotu lapas ātrumu.

Lai izmantotu šo rīku, vispirms tas ir jāiespējo Rīku komplekta opcijas atzīmējot izvēles rūtiņu ar nosaukumu "Atmiņa" sadaļā "Noklusējuma Firefox izstrādātāju rīki". Pēc pārbaudīšanas dev rīka loga augšpusē redzēsiet sadaļu "Atmiņa" uzreiz pēc "Veiktspējas". Atlasiet šo.

Lai izmantotu šo rīku, noklikšķiniet uz "momentuzņēmuma" vai kameras pogas. Jūs redzēsiet sarakstu ar objektiem, piemēram, objektiem un skriptiem, kas aizņem atmiņu .