10 Instrumente utile pentru dezvoltatorii de Firefox pe care trebuie să le cunoașteți

Firefox fiind "browserul dezvoltatorului" are multe instrumente excelente pentru a ușura munca noastră. Puteți găsi mai multe informații despre colecția de instrumente pe pagina web a Tools Developer Tools și puteți încerca, de asemenea, browserul Developer Edition care are mai multe caracteristici și instrumente care sunt testate.

Pentru acest post, am enumerat 10 unelte la îndemână ați putea dori din colecția de instrumente pentru dezvoltatori. De asemenea, am demonstrat ce pot face aceste instrumente cu ajutorul GIF-urilor și cum să le accesați pentru o referință rapidă.

1. Vizualizați riglele orizontale și verticale

Firefox are un instrument de riglă care afișează atât rigle orizontale cât și verticale cu unități de pixeli pe pagină. Instrumentul este util pentru aranjarea elementelor pe pagină.

Pentru a accesa conducătorii prin meniu, mergeți la: ☰> Dezvoltator > Bara de instrumente pentru dezvoltatori (comenzi rapide: Shift + F2). Odată ce bara de instrumente apare în partea de jos a paginii, tastați conducători și apăsați introduce.

Pentru a face acest lucru să apară în fereastra Instrumente pentru dezvoltatori, accesați Opțiuni Toolbox. Sub secțiunea "Butoane de instrumente disponibile", verificați secțiunea "Comutați reguli pentru pagină" Caseta de bifat.

2. Faceți capturi de ecran utilizând selectorii CSS

Deși bara de instrumente Firefox vă permite să realizați capturi de ecran ale întregii pagini sau porțiuni vizibile, în opinia mea, metoda selectorului CSS este mai utilă pentru capturarea capturi de ecran ale elementelor individuale precum și pentru elemente care sunt vizibile pe mouse-hover numai (cum ar fi meniurile).

Pentru a realiza capturi de ecran prin meniu, mergeți la ☰> Dezvoltator > Bara de instrumente pentru dezvoltatori (shortcutShift + F2). Odată ce bara de instrumente apare în partea de jos a paginii, tastați screenshot - selector any_unique_css_selector și apăsați introduce.

Pentru a face acest lucru să apară în fereastra de instrumente pentru dezvoltatori: faceți clic pe "Opțiuni pentru uneltele de instrumente" și sub secțiunea "Butoane disponibile în cutia de instrumente", bifați "Faceți o captură de ecran complet " Caseta de bifat.

3. Alegeți culorile din paginile web

Firefox are un instrument de selectare a culorilor încorporat, denumit "Eyedropper". Pentru a accesa instrumentul "Eyedropper" prin meniu, mergeți la ☰> Dezvoltator > Pipetă.

Pentru a face acest lucru să apară în fereastra de instrumente pentru dezvoltatori: faceți clic pe "Opțiuni pentru uneltele de instrumente" și pe secțiunea "Butoane disponibile în caseta de instrumente"Luați o culoare din pagină" Caseta de bifat.

4. Vizualizați aspectul paginii în 3D

Vizionarea paginilor web în 3D ajută la problemele de aspect. Veți putea vedea diferite elemente stratificate mult mai clar în vizualizarea 3D. Pentru a vizualiza pagina web în 3D, faceți clic pe butonul "3D View" (Vizualizare 3D).

Pentru a face acest lucru apare în fereastra de instrumente pentru dezvoltatori, faceți clic pe "Opțiuni pentru uneltele de instrumente", iar în secțiunea "Butoane disponibile în cutia de instrumente" verificați secțiunea "Vizualizare 3D" Caseta de bifat.

5. Vizualizați stilul browserului

Stilurile de browser constau din două tipuri: stilul implicit pe care un browser îl atribuie pentru fiecare element și stilurile specifice browserului (cele cu prefixul browserului). Aruncând o privire la stilurile de browser veți putea diagnosticați problemele de depășire din foaia dvs. de stil și, de asemenea, să știți despre orice stiluri specifice browserului existente .

Pentru a accesa "Stilurile browserului" prin meniu, mergeți la ☰> Dezvoltator > Inspector. Apoi faceți clic pe fila "Computed" din secțiunea din dreapta și bifați caseta de selectare "Stiluri de browser".

De asemenea, puteți deschide fereastra "Inspector"prin intermediul comenzii rapide Ctrl + Shift + C și apoi accesând" stilurile browserului ".

6. Dezactivați JavaScript pentru sesiunea curentă

Pentru compatibilitatea cu cele mai bune practici și cititoarele de ecran, este întotdeauna recomandat să codificați orice site web astfel încât funcționalitatea acestuia să nu fie împiedicată într-un mediu javascript-dezactivat. Pentru a testa pentru astfel de medii, puteți dezactivați JavaScript pentru sesiunea în care lucrați.

Pentru a dezactiva JavaScript pentru sesiunea curentă, faceți clic pe "Opțiuni Toolbox", iar în secțiunea "Advanced settings"Dezactivați JavaScript*" Caseta de bifat.

7. Ascundeți stilul CSS din pagină

La fel ca JavaScript, din cauza preocupărilor legate de accesibilitate, este mai bine să proiectezi site-uri în așa fel încât să fie paginile trebuie să poată fi citite chiar și fără stiluri. Pentru a vedea cum arată pagina fără niciun stil, le puteți dezactiva în instrumentele pentru dezvoltatori.

Pentru a elimina orice stil CSS (inline, intern sau extern) aplicat pe o pagină web, doar faceți clic pe simbolul ochiului din foile de stil listate în fila "Editor stil". Faceți clic din nou pentru a reveni la vizualizarea inițială.

Pentru a accesa "Editorul de stil" prin meniu mergeți la ☰> Dezvoltator > Editor de stil (comenzi rapide: Shift + F7.

8. Examinați răspunsul conținutului HTML la o solicitare

Instrumentele de dezvoltator pentru Firefox au opțiunea de a previzualizați răspunsurile tipului de conținut HTML. Acest lucru îi ajută pe dezvoltator să previzualizeze orice redirecționare de 302 și să verifice dacă orice informație sensibilă a fost redată sau nu în răspuns.

Pentru a accesa meniul "Previzualizare" prin meniu, mergeți la ☰> Dezvoltator > Reţea (comenzi rapide: Ctrl + Shift + Q. Apoi deschideți pagina Web la alegere sau reîncărcați pagina curentă, faceți clic pe dorința dorită (cu răspuns HTML) din lista de cereri și faceți clic pe butonul "previzualizare"din secțiunea din dreapta.

9. Examinați pagina web în diferite dimensiuni ale ecranului

Pentru a testa o pagină Web pentru reactivitatea acesteia, utilizați "Design Design View", care poate fi accesat de către ☰> Dezvoltator > Vizualizare vizuală receptivă sau cu ajutorul comenzii rapide: Ctrl + Shift + M.

Pentru a face să apară butonul de instrument "Mod de proiectare responsivă", faceți clic pe "Opțiuni pentru uneltele de instrumente", iar în secțiunea "Butoane disponibile în cutia de instrumente", bifați caseta de selectare Mod responsiv de proiectare.

10. Rulați JavaScript în pagini

Pentru executarea rapidă a JavaScript pe orice pagină Web pur și simplu utilizați instrumentul "Scratchpad" din Firefox. Pentru a accesa "Scratchpad" prin meniu mergeți la; ☰> Dezvoltator > Blocnotes sau utilizați comanda rapidă de la tastatură Shift + F4.

Pentru a face ca butonul "Scratchpad" să apară pe fereastra cu instrumente pentru dezvoltatori pentru a fi utilizat rapid: faceți clic pe "Setări de instrumente"și sub"Butoane disponibile în caseta de instrumente"verificați secțiunea" Scratchpad " Caseta de bifat.