Veebirakenduste silumine Firefoxi arendaja tööriistadega

Kohustatud teadmised täpsemaks veebiarenduseks

Foto autor Charles  saidil Unsplash

Teades, kuidas oma veebirakendust siluda, saate tootlikkuse häkkimiseks kasutada arendaja tööriistu. Pärast selle artikli lugemist saate teha järgmist:

  • siluge oma arvutis veebirakenduse mobiil- ja tahvelarvuti versioone.
  • ühendage mobiilne Firefoxi rakendus arvutiga ja siluge seal veebirakendusi.
  • leidke oma veebisaidile kõige paremini sobivad fondid ja stiilid, ilma et peaksite oma CSS-i ja JS-koodi uuesti ja uuesti üles ehitama.
  • leida probleeme oma CSS-i paigutuses.

Lõpuks lõpetuseks - ma ütlen teile, kuidas installida võimas Firefoxi arendaja väljaanne.

Arendaja tööriistade avamine

Enamik meist teab, kuidas arendaja tööriistu avada kas kogemata või kogemuste põhjal.

Arendaja tööriistakasti avamiseks on toodud mõned viisid.

  • Vajutage klahvi F12
  • Minge hamburgeri menüüsse URL-riba paremas servas ja klõpsake seda. Altpoolt leidke jaotise „Spikker” kohal valik „Veebiarendaja”. Avage kõik üheksa võimalust.

Lühike ülevaade KÜ-st

Tööriistakasti ülaosas leiate, et seal on palju „tööriistu“, mille kasutusotstarve on väga erinev.

Tööriistariba
  1. Osuti suvand aitab teil oma veebisaidilt DOM-i elemendi leida, hõljutades selle hõlpsalt kasutajaliideses.
  2. Leheinspektor: leheinspektor võimaldab teil oma veebisaidi HTML-koodi töö ajal vaadata. See võimaldab teil vaadata ka CSS-i atribuute ning konfigureerida fonte ja animatsioone.
  3. Veebikonsool: veebikonsool on esiotsa arendajate seas kõige tuntum tööriist. See on koht, kus teie console.log ("..."); avaldused trükitakse.
  4. Javascripti silur: siluri tööriista abil saate vaadata Javascripti koodis vigu. See võib ka teie Webpacki mooduleid ümber kujundada ja võimaldada teil tuvastada kompileeritud koodi konkreetsetes lähtefailides olevad vead.
  5. Stiiliredaktor: saate vaadata ja redigeerida oma veebilehel kasutatavaid üksikuid stiililehti, sealhulgas stiilisiltide CSS-i. Lisaks saate kirjutada täiendava CSS-koodi või importida oma arvutist mõne muu laaditabeli.
  6. Toimimisriistad: see võimaldab teil vaadata, kui kaua teatud sündmused võtavad ja kui palju FPS-i teie veebileht suudab. (FPS ehk kaadrid sekundis on arv, mitu korda brauser on võimeline ekraani värskendama. Optimaalselt peaks see olema 60 kaadrit sekundis sõltuvalt teie operatsioonisüsteemist ja monitori riistvarast.) Peate hakkama oma jõudlust jälgima, mis laaditakse mällu puhverlahusesse. Tulemusi saate vaadata alles pärast seire peatamist; vastasel juhul halveneb jõudlus reaalajas toimivusandmete enda kuvamise koormuse tõttu.
  7. Mälu: mälu tööriist võimaldab teil oma Javascripti kuhjast ülevaate luua. See võib ka leida lähtekoodis oma objektide jaotamise koha.
  8. Network Monitor: See tööriist võimaldab teil vaadata kõiki võrgutaotlusi.
  9. Salvestusruum: saate vaadata ja muuta oma saidi vahemälu, küpsiseid, indekseeritud andmebaasi, kohalikku ja seansi salvestusruumi.
  10. Juurdepääsetavuse tööriistad: saate vaadata, kuidas hõlbustusfunktsioonid teie veebilehte tõlgendavad. See on ülioluline, kui soovite, et teie veebisait saaks võimalikult suure vaatajaskonna.
  11. Vastuvõtlik kujundusrežiim: saate testida, kuidas teie veebisait töötab mobiil- ja tahvelarvutites. See töötab palju paremini kui sülearvuti brauseriakna vähendamine. Lisaks saate testida veebisaidi reageerimist seadme pöörlemisele, võrgu aktiveerimisele, seadme pikslite suhtele ja puutetundliku sündmuse simulatsioonile.

Tööriistariba viimane menüü võimaldab teil dokkida arendaja tööriistakasti brauseri vasakul, all või paremal. Lisaks saate tööriistakasti eraldada täiesti erinevasse aknasse.

Olulised omadused, mida peaksite kasutama

Uute fondide testimine

Leidke leheinspektorist kolmas paneel (see võib olla peidetud, klõpsake teise paneeli vasakus ülanurgas oleval noolel). Sellel on vahekaart nimega “Fondid”.

Pärast HTML-elemendi valimist osuti valiku abil saate hakata manipuleerima fondi suuruse, kaalu, stiiliga ja leidma parima väljanägemisega kombinatsiooni. Saate isegi fondiperekonda muuta, redigeerides HTML-i stiili atribuuti otse HTML-i redaktoris.

Fondi “Tere sõna” muutmine arendaja tööriistade abil

Lisaks fondide redigeerimisele saate redigeerida ka animatsioone. Mul on seda funktsiooni veel testida!

Silmatilk

See on üks neist funktsioonidest, millest kõik unustavad, kuna see on nii väike. Kui vaatate tähelepanelikult, on HTML-i redaktoris tekstikasti „Otsi HTML-i” kõrval paremal tilgasümbol.

Silmatilku saab kasutada veebilehelt värvi valimiseks. Ma ei saanud seda ekraanipilti ekraanil teha, kuna see võtab automaatselt fookuse. Selgitan seda sõnadega - pole probleemi!

Silmatilk järgib teie kursorit. See laieneb 7x7 pikslite ruuduks ja kuvatakse need eraldi laiendatuna, nii et saate kontrollida iga värvi. See annab teile teada keskpunkti piksli värvus.

See on kasulik paljudel juhtudel:

  • Kui teile meeldib kunagi veebisaidi värviskeem, avage see Firefoxis ja kontrollige iga pikslit ning kopeerige teile meelepärased värvid.
  • Kui näete fontidena kuvatavaid üksikuid varjundeid, näete, kuidas varjamise vastane toime töötab.
  • Saate siluda oma HTML5 lõuendit. Näiteks vaadake, kuidas PixiJS varjunimevastane variant renderdamist muudab.

Ekraanipilt

Firefoxi ekraanipilt on nii kasulik mitte ainult arendajatele, vaid kõigile. See on asi, mida Google Chrome peab veel rakendama! Paremklõpsake veebilehel ja valige suvand “Võtke ekraanipilt”.

Veebilehe osa saate valida salvestamiseks lohistades HTML-i või isegi klõpsates seda HTML-elemendil.

Firefoxi ühendamine oma Android-seadmega

Eeltingimused

Alustamiseks peab teil olema Firefox for Android ja ZXKingi vöötkoodiskanner. Lisaks peab teil olema WiFi-võrk, mille kaudu toimub silumine kauga.

Minge Firefoxis (mobiil) valikud> seaded> täpsemad ja lubage kaug silumine WiFi kaudu.

Silumise lubamine

  1. Avage töölaual WebIDE (sülearvutis WebDeveloper> WebIDE) ja klõpsake nuppu Värskenda seadmeid.
  2. Skaneerige kuvatav QR-kood oma mobiiltelefoni vöötkoodilugeja rakendusega.
  3. Teie mobiilseade tuleks nüüd WebIDE-s loetleda. Valige see.

Nüüd saate ühenduse luua mis tahes vahekaartidega, mis on avatud Firefoxis Androidi jaoks, ja lisada sellele arendaja tööriistad. Nüüd saate oma arvuti võimsust mobiiltelefonides veebirakenduse silumiseks kasutada.

MDN-dokumendid siin:

  • Firefoxi silumine Androidiga
  • Firefoxi silumine iOS-i ja Chrome'i jaoks Androidile
  • USB silumine Firefoxiga

Firefoxi arendaja väljaanne

Lõpetuseks - minu lemmik osa sellest loost - Firefoxi arendaja väljaande tutvustamine. See on Firefoxi vähetuntud väljaanne, mis on keskendunud veebiarendajatele. See sisaldab mõnda lisandmoodulit (näiteks Valence) veebiarenduseks ja tulevikutehnoloogiaid, mida tavalises Firefox Quantumis pole.

Seda tarnitakse öistest ehitamistest. See saab funktsioone, mis on viimase kuue nädala jooksul stabiliseerunud.

Installimine Linuxile

Firefoxi arendaja väljaande saate installida projekti UMake kaudu. Selleks peate UMake'i PPA käsitsi lisama:

sudo add-apt-repository ppa: ubuntu-desktop / ubuntu-make
sudo apt-get update
sudo apt-get install ubuntu-make
umake web firefox-dev -r # installib Firefox dev väljaande

Rakenduse lisamiseks GNOME töölauale peate tegema töölaua kirje järgmiselt:

#! / usr / bin / env xdg-avatud
[Töölaua kirje]
Versioon = 1.0
Tüüp = rakendus
Terminaal = vale
Nimi [en_IN] = Firefoxi arendaja väljaanne
Exec = / kodu / shukant / .local / share / umake / web / firefox-dev / firefox
Nimi = Firefoxi arendaja väljaanne
Ikoon = / kodu / shukant / .local / share / umake / web / firefox-dev / brauser / chrome / ikoonid / default / default128.png

Muutke kindlasti failiteed süsteemis olevateks. Täpsemalt, muutke osa “/ home / shukant /” osaks “/ home / your-kasutajanimi”.

Windows ja macOS

Firefoxi installijat saate kasutada otse: https://www.mozilla.org/en-US/firefox/developer/.

MÄRKUS. Linuxi kasutajad saavad kasutada ka linki - ehkki .deb-paketi otsepaketihalduri abil installimine on keerulisem.

Lisalugemist:

  • HTML-lõuendi täielik ülevaade
  • Kuidas mitte-täisarvu väärtusi ujukis hoitakse (ja miks see ujub)
  • Ümmarguste sõltuvuste eemaldamine JavaScriptis
  • Rakenduse sünkroonimine mitmes seadmes (Android)
  • Kuidas kasutada Firebase'i mitme mängijaga Androidi mängude ehitamiseks

Rääkige mulle kindlasti, kuidas teile meeldib Twitteris Firefoxi arendaja väljaanne. Lisaks selgitage, kas võiksite veebirakenduste silumisel minna üle Chrome'ilt Firefoxile !!!