Mājas lapa » Kodēšana » 10 Noderīgi Firefox izstrādātāju rīki, kas jums jāzina

    10 Noderīgi Firefox izstrādātāju rīki, kas jums jāzina

    Firefox ir "izstrādātāja pārlūks", un tam ir daudz lielisku rīku, kas palīdz padarīt mūsu darbu vieglāku. Plašāku informāciju par rīku kolekciju var atrast Firefox izstrādātāju rīku tīmekļa vietnē, kā arī varat izmēģināt to izstrādātāja versijas pārlūkprogrammu, kurā ir vairāk testējamo funkciju un rīku..

    Šim ziņojumam es esmu uzskaitījis 10 ērti instrumenti jūs varētu vēlēties no sava izstrādātāja rīku kolekcijas. Esmu arī parādījis, ko šie rīki var darīt ar GIF, kā arī to, kā piekļūt tiem ātrai atsaucei.

    1. Apskatiet horizontālos un vertikālos lineālus

    Firefox ir lineāls rīks parāda gan horizontālos, gan vertikālos lineālus ar pikseļu vienībām lapā. Šis rīks ir noderīgs, lai sakārtotu savus elementus visā lapā.

    Lai piekļūtu lineāliem, izmantojot izvēlni, dodieties uz: ☰> Izstrādātājs > Izstrādātāja rīkjosla (īsceļš: Shift + F2). Kad rīkjosla parādās lapas apakšdaļā, ierakstiet valdnieki un nospiediet Ievadiet.

    Lai to parādītu izstrādātāju rīku logā, dodieties uz "Rīku komplekta opcijas". Sadaļā "Pieejamās rīklodziņa pogas" pārbaudiet "Pārslēgt lapas domēnus"izvēles rūtiņa.

    2. Veikt ekrānšāviņus, izmantojot CSS selektorus

    Lai gan Firefox rīkjosla ļauj veikt ekrānuzņēmumus no visas lapas vai redzamajām daļām, manuprāt, CSS selektora metode ir vairāk noderīga, lai uzņemtu atsevišķu elementu ekrānuzņēmumi kā arī elementi, kas ir redzami peles virzienā tikai (piemēram, izvēlnes).

    Lai izvēlētos ekrānšāviņus, dodieties uz ☰> Izstrādātājs > Izstrādātāja rīkjosla (īsceļšShift + F2). Kad rīkjosla parādās lapas apakšdaļā, ierakstiet ekrānuzņēmums --selector any_unique_css_selector un nospiediet ievadiet.

    Lai to parādītu izstrādātāju rīku logā: noklikšķiniet uz sadaļas "Rīku komplekta opcijas" un sadaļā "Pieejamās rīklodziņa pogas", pārbaudiet "Veikt pilnas lapas ekrānuzņēmumu " izvēles rūtiņu.

    3. Atlasiet krāsas no tīmekļa lapām

    Firefox ir iebūvēts krāsu atlasītāja rīks ar nosaukumu "Eyedropper". Lai piekļūtu rīkam "Eyedropper" caur izvēlni, dodieties uz ☰> Izstrādātājs > Skropsts.

    Lai tas tiktu parādīts izstrādātāju rīku logā: noklikšķiniet uz "Toolbox Options" un sadaļā "Available Toolbox Buttons" sadaļas pārbaude "Satveriet lapu no lapas"izvēles rūtiņa.

    4. Skatiet lapas izkārtojumu 3D formātā

    Tīmekļa lapu skatīšana 3D palīdz ar izkārtojuma problēmām. Jūs varat redzēt dažādus slāņveida elementus daudz skaidrāk 3D skatā. Lai skatītu tīmekļa lapu 3D formātā, noklikšķiniet uz rīka pogas "3D skats".

    Lai to parādītu izstrādātāju rīku logā, noklikšķiniet uz sadaļas "Rīku komplekta opcijas" un sadaļā "Pieejamās rīklodziņa pogas" pārbaudiet "3D skats"izvēles rūtiņa.

    5. Skatiet pārlūka stilu

    Pārlūka stili sastāv no diviem veidiem: noklusējuma stils, ko pārlūks piešķir katram elementam, un pārlūkprogrammas specifiskie stili (tie, kuriem ir pārlūkprogrammas prefikss). Ieskatoties pārlūkprogrammas stilos, ko varēsiet diagnosticēt jebkādas ignorēšanas problēmas savā stillapā un arī uzzināt par jebkuriem esošajiem pārlūkprogrammas stiliem .

    Lai piekļūtu izvēlnei "Pārlūka stili", dodieties uz ☰> Izstrādātājs > Inspektors. Pēc tam labajā sadaļā noklikšķiniet uz cilnes "Aprēķināt" un atzīmējiet izvēles rūtiņu "Pārlūka stili".

    Varat arī atvērt "Inspektors"cilne, izmantojot īsceļu Ctrl + Shift + C un pēc tam piekļūstot" Pārlūka stiliem ".

    6. Atspējot pašreizējo sesiju JavaScript

    Par labāko praksi un ekrāna lasītāju saderību vienmēr ieteicams kodēt jebkuru vietni tādā veidā, lai javascript-invalīdā vidē tā funkcionalitāte netiktu traucēta. Lai pārbaudītu šādas vides, varat atspējot JavaScript sesiju, kurā strādājat.

    Lai atspējotu JavaScript pašreizējo sesiju, noklikšķiniet uz "Toolbox Options" un sadaļā "Advanced settings" atzīmējiet "Atspējot JavaScript* "izvēles rūtiņa.

    7. Slēpt CSS stilu no lapas

    Tāpat kā JavaScript, pieejamības problēmu dēļ vislabāk ir izstrādāt tīmekļa vietnes tā, lai tās būtu pieejamas lapām joprojām jābūt lasāmām arī bez jebkādiem stiliem. Lai redzētu, kā lapa izskatās bez stila, varat tos atspējot izstrādātāju rīkos.

    Lai noņemtu jebkuru CSS stilu (iekšējo, iekšējo vai ārējo), ko lieto tīmekļa lapā, vienkārši noklikšķiniet uz uzskaitīto stillapu acu simbola cilnē Stila redaktors. Noklikšķiniet uz tā vēlreiz, lai atgrieztos pie sākotnējā skata.

    Lai piekļūtu izvēlnei "Stila redaktors", dodieties uz ☰> Izstrādātājs > Stila redaktors (īsceļš: Shift + F7.

    8. Priekšskatiet HTML satura atbildi uz pieprasījumu

    Firefox izstrādātāju rīkiem ir iespēja priekšskatiet HTML satura tipa atbildes. Tas palīdz attīstītājam priekšskatīt jebkuru 302 novirzīšanu un pārbaudīt, vai atbildē ir sniegta sensitīva informācija.

    Lai piekļūtu izvēlnei "Priekšskatījums", dodieties uz ☰> Izstrādātājs > Tīkls (īsceļš: Ctrl + Shift + Q. Pēc tam atveriet izvēlēto tīmekļa lapu vai ielādējiet pašreizējo lapu, noklikšķiniet uz vēlamais pieprasījums (ar HTML atbildi) no pieprasījumu saraksta un noklikšķiniet uzPriekšskatījums"cilne labajā sadaļā.

    9. Priekšskatīt tīmekļa lapu dažādos ekrāna izmēros

    Lai pārbaudītu tīmekļa lapu, lai tā varētu reaģēt, izmantojiet "Responsive Design View", ko var piekļūt ar ☰> Izstrādātājs > Atsaucīgs dizaina skats vai ar saīsni: Ctrl + Shift + M.

    Lai parādītu rīka pogas "Responsive Design Mode", noklikšķiniet uz "Toolbox Options" un zem sadaļas "Available Toolbox Buttons" (Pieejamās rīku pogas), atzīmējiet izvēles rūtiņu "Responsive Design Mode" (Atbildīgs dizaina režīms)..

    10. Palaidiet JavaScript lapā

    Lai ātri izpildītu JavaScript izpildi jebkurā tīmekļa lapā, vienkārši izmantojiet Firefox rīku "Scratchpad". Lai piekļūtu "Scratchpad", izmantojot izvēlni, dodieties uz; ☰> Izstrādātājs > Scratchpad vai izmantojiet tastatūras īsceļu Shift + F4.

    Lai veiktu rīka pogas "Scratchpad" parādīšanu izstrādātāja rīku logā, lai to varētu ātri izmantot: noklikšķiniet uz "Rīku komplekta opcijas"un zem"Pieejamās Toolbox pogas"sadaļa pārbauda" Scratchpad " izvēles rūtiņu.