10 Kasulikud Firefoxi arendustööriistad, mida peaksite teadma
Firefox on "arendaja brauser", millel on palju suurepäraseid tööriistu, mis aitavad muuta meie töö lihtsamaks. Lisateavet oma tööriistakogust leiate Firefoxi arendustööriistade veebisaidilt ja proovida ka oma arendajaversiooni brauserit, millel on rohkem testitavaid funktsioone ja tööriistu.
Selle postituse jaoks olen loetletud 10 käepärast tööriista võite soovida oma arendaja tööriistade kogumist. Samuti olen näidanud, mida need tööriistad GIF-idega teha saavad ning kuidas neile kiireid viiteid kasutada.
1. Vaadake horisontaalseid ja vertikaale joonlauda
Firefoxil on joonlaua tööriist kuvab nii horisontaal- kui ka vertikaalsed jooned pikslite ühikutega lehel. Tööriist on kasulik elementide korraldamiseks kogu lehel.
Menüüs olevate joonlaudade avamiseks minge aadressile: ☰> Arendaja > Arendaja tööriistariba (otsetee: Shift + F2). Kui tööriistariba on lehe allosas, tippige valitsejad ja vajutage Sisenema.
Selleks, et see ilmuks arendaja tööriistade aknale, avage "Tööriistakasti valikud". Kontrollige jaotises „Saadaval tööriistakasti nuppe“Lülitage lehe juhte ümber"märkeruut.
2. Võtke ekraanipildid CSS-valijatega
Kuigi Firefoxi tööriistariba võimaldab teil võtta täislehe või nähtavate osade ekraanipilte, on minu arvates CSS-i valija meetod kasulikum. üksikute elementide ekraanipildid samuti elemendid, mis on nähtavad hiire-hoveri juures ainult (nagu menüüd).
Ekraanipiltide valimiseks menüüst avage ☰> Arendaja > Arendaja tööriistariba (ShortcutShift + F2). Kui tööriistariba on lehe allosas, tippige ekraanipilt --selector any_unique_css_selector ja vajutage sisenema.
Selleks, et see ilmuks arendaja tööriistade aknale: klõpsake "Tööriistakasti valikud" ja jaotise "Saadaval tööriistakasti nupud" all, kontrollige "Võtke täislehekülje ekraanipilt " märkeruut.
3. Valige värvid veebilehtedelt
Firefoxil on "Eyedropper" nime järgi sisseehitatud värvivalija tööriist. "Eyedropper" tööriista avamiseks menüüst avage ☰> Arendaja > Prillid.
Selleks, et see ilmuks arendaja tööriistade aknale: klõpsake "Tööriistakasti valikud" ja jaotise "Saadaolevad tööriistakasti nupud" sektsiooni kontrolli all.Haara lehelt värv"märkeruut.
4. Vaadake lehe paigutust 3D-s
Veebilehtede vaatamine 3D-vormingus aitab lahendada paigutusprobleeme. Te saate näha erinevaid kihilisi elemente 3D-vaates palju selgemalt. Veebilehe 3D vaatamiseks klõpsake tööriistanuppu "3D vaade".
Selleks, et see ilmuks arendaja tööriistade aknale, klõpsake "Tööriistakasti valikud" ja jaotise "Saadaval tööriistakasti nupud" all ""3D-vaade"märkeruut.
5. Vaadake brauseri stiili
Brauseri stiilid koosnevad kahest tüübist: vaikimisi stiil, mida brauser määrab igale elemendile, ja brauseripõhised stiilid (need, millel on brauseri eesliide). Vaadates brauseri stiile, mida saate diagnoosige oma stiililehel kõik ülekirjutamise probleemid ja ka teada saadaolevatest brauseri spetsiifilistest stiilidest .
"Brauseri stiilide" kaudu menüü avamiseks minge ☰> Arendaja > Inspektor. Seejärel klõpsake parempoolses osas vahekaarti "Arvutatud" ja märkige ruut "Brauseri stiilid".
Võite avada kaInspektor"vahekaart Ctrl + Shift + C otsetee kaudu ja seejärel brauseri stiilide kasutamine.
6. Keela JavaScript praeguse seansi jaoks
Parimate tavade ja ekraanilugeja ühilduvuse puhul on alati soovitatav kodeerida mis tahes veebisait nii, et selle funktsionaalsust ei takistaks javascripti puudega keskkond. Selliste keskkondade testimiseks saate seda teha keelake töötava seansi JavaScript.
Praeguse seansi JavaScripti keelamiseks klõpsake "Tööriistakasti valikud" ja jaotise "Täpsemad seaded" all "Keela JavaScript* "märkeruut.
7. Peida CSS-stiil lehelt
Just nagu JavaScripti, on juurdepääsetavusega seotud probleemide tõttu parim veebisaitide kujundamine nii leheküljed peaksid siiski olema loetavad ka ilma igasuguste stiilideta. Et näha, kuidas lehekülg ei ilmu ilma stiilita, saate need arendaja tööriistades keelata.
Veebilehel rakendatud mis tahes CSS-stiili (sisemine, sise- või väline) eemaldamiseks just klõpsa loetletud stiililehtede silma sümbolil vahekaardil "Stiiliredaktor". Klõpsake seda uuesti, et naasta algse vaate juurde.
Menüüst "Stiiliredaktor" avamiseks avage ☰> Arendaja > Stiili redaktor (otsetee: Shift + F7.
8. Eelvaate HTML-sisu vastusele päringule
Firefoxi arendusvahenditel on võimalus HTML-sisu tüübi vastuste eelvaade. See aitab arendajal eelvaadet teha 302-s ümbersuunamisest ja kontrollida, kas vastuses on esitatud tundlikke andmeid.
Menüü "Eelvaade" avamiseks mine ☰> Arendaja > Võrk (otsetee: Ctrl + Shift + Q. Seejärel avage oma valitud veebileht või laadige see leht uuesti, klikkige soovitud päring (HTML-vastusega) päringute loendist ja klõpsakeEelvaade"vahekaart paremas osas.
9. Eelvaate veebilehte erinevates ekraanisuurustes
Veebilehe testimiseks reageerimisel kasutage "Vastuslikku disainivaadet", millele pääseb ligi ☰> Arendaja > Reageeriv disainivaade või otsetee abil: Ctrl + Shift + M.
"Reageeriva disaini režiimi" tööriistanupu kuvamiseks klõpsake "Tööriistakasti valikud" ja jaotise "Saadaval tööriistakasti nupud" all märkeruut "Vastuvõetav disainirežiim".
10. Käivitage JavaScript lehekülgedel
Kiire JavaScripti hukkamiste teostamiseks mis tahes veebilehel kasutage lihtsalt "Scratchpad" tööriista Firefoxis. Menüü "Scratchpad" avamiseks liikuge menüüsse; ☰> Arendaja > Scratchpad või kasutage kiirklahvi Shift + F4.
Tööriistanupu "Kraapimisplokk" tegemiseks arendaja tööriistade aknas kiireks kasutamiseks: klõpsake "Tööriistakasti valikud"ja all"Saadaval tööriistakasti nupud"sektsioon kontrollige" Scratchpad " märkeruut.
