Instrumente de dezvoltare. Mozilla Firefox. Probleme cu aspectul adaptiv (o eroare care aproape a provocat o ceartă pentru companie)

De la autor: fără îndoială în ultimii cinci ani Google Chrome a devenit forța dominantă în războaiele browserelor pentru desktop și (evident) utilizatorii de telefonie mobilă. Dezvoltatorii, pe de altă parte, sunt mai pricepuți din punct de vedere tehnic și mai conștienți de securitate, motiv pentru care preferă Firefox. Toate distribuțiile OS cu accent pe securitate conțin Firefox, nu un browser bazat pe Chromium, deși acesta din urmă are și o sursă deschisă sursăși complet gratuit.

Din fericire pentru noi, respectarea standardelor web înseamnă că browserele pe care le folosesc dezvoltatorii sunt, în cea mai mare parte, compatibile cu browserele pe care le folosesc majoritatea oamenilor. utilizatorii obișnuiți. Și acest lucru este foarte important, deoarece totul dezvoltat pentru Firefox va funcționa în Chrome în 99% din cazuri. IE nu mai este o prioritate pentru majoritatea dezvoltatorilor. Este învechit și folosit pentru a încărca alte browsere. Nimeni nu îl ia pe Edge în serios nici acum.

Firefox nu este iubit doar pentru securitatea și confidențialitatea sa. Firefox a fost întotdeauna în mare parte un proiect condus de comunitate (deși cu Wikipedia, „comunitatea” a devenit puțin prea înțelept). Inima modelului de dezvoltare comunitară este îmbunătățirea calității experiența utilizatorului. Cu alte cuvinte, proiectele conduse de comunitate pun adesea nevoile utilizatorilor pe primul loc. Proiectele corporative prioritizează nevoile corporative. Pentru dezvoltatori, aceasta înseamnă că există multe instrumente gratuite disponibile online pentru a le ușura munca. În cea mai mare parte, aceste instrumente sunt mult mai ușoare decât majoritatea opțiuni plătite.

DEGETAR

Thimble este conceput în primul rând pentru a învăța HTML. Are HTML complet și Editor CSS, făcându-l un instrument extrem de util pentru găsire solutii rapideși copierea HTML-ului final pentru a încărca fișierul pe server. Funcționează editor mai bun cod în CPanel, pentru că nu face nimic în plus și nu recunoaște fiecare apostrof din text ca separator de linii.

JavaScript. Pornire rapidă

Interfața este împărțită în două panouri. În mod implicit, panoul cu codul este situat în stânga, panoul previzualizare- pe dreapta. Sunt disponibile trei moduri de vizualizare:

vizualizare mobilă;

vizualizare pe tot ecranul.

În cel de-al treilea mod de vizualizare, panoul de cod este ascuns temporar până când reveniți la mod standard vizualizare, care este ușor de realizat prin atingerea unui buton. Revizuire automată activat în mod implicit și arată rezultatul tastării codului. Dacă vă distrage atenția, îl puteți opri. Vizualizarea automată poate chiar afișa Stiluri CSS in timp real. Dacă creați un bloc cu conținut și apoi adăugați stiluri la acesta, puteți experimenta foarte ușor tipuri diferite.

Spre deosebire de alții editori online este mai ușor să te conectezi aici fișiere externe. Puteți chiar să creați arbori întregi de foldere pentru stocare. Toate acestea fac din Thimble instrumentul meu preferat pentru creație rapidă pagini sau actualizări de pe site în timpul călătoriei.

Dezavantajul este evident - instrumentul necesită o conexiune la rețea (cu excepția cazului în care, desigur, ați putut clona platforma Thimble pe server local). Al doilea dezavantaj este că nu vă puteți publica proiectele comerciale pe acesta, deoarece platforma nu este concepută pentru profesioniști.

În schimb, puteți copia codul HTML și îl puteți lipi în editorul de cod din CPanel sau fisier text, apoi salvați-l pe serverul dvs. Arborele de fișiere va fi complet păstrat.

Ca la majoritatea proiecte Mozilla, Documentația lui Thimble este destul de rară, mai ales în ceea ce privește ceea ce poți și ce nu poți face. Dezvoltatorii se așteaptă să citiți termenii de utilizare, ceea ce este o presupunere destul de dubioasă, chiar dacă fiecare manager web folosește soluții online pentru dezvoltare, trebuie să facă asta.

Regulile de utilizare au foarte o parte importantă unde scrie ca dai Mozilla gratuit licență pentru tot ceea ce publicați pe platforma lor și, de asemenea, vă dați acordul reutilizareși editarea produsului dvs. de către alte persoane. Evident, după aceasta nu veți dori să vă publicați proiectele profesionale pe această platformă.

OCHElari cu raze X

Copiii și-au dorit întotdeauna să obțină ochelari cu raze X, dar, din păcate, astfel de tehnologii (cel puțin cele care funcționează efectiv) sunt prea scumpe pentru copiii obișnuiți. Ochelarii X-Ray de la Mozilla nu vă vor arăta ce poartă o asistentă de la școală sub hainele ei sau ce are un grădinar scoțian sub kilt, dar cu acest instrument puteți vedea cum funcționează o pagină web și puteți edita codul pentru a o face să funcționeze. -altcuiva. E mult mai tare decât orice fel de perversiune, nu?

Scopul principal al instrumentului din punct de vedere profesional este modelarea nisipului pentru testarea modificărilor în desene existente fără a fi nevoie de modificări imediate. Totul este foarte simplu, de instalat, trebuie doar să trageți butonul X-Ray Goggles în bara de marcaje. Pentru activare, apăsați butonul, pentru a ieși apăsați ESC.

WEBMAKER

Nu este cel mai util instrument pentru majoritatea dezvoltatorilor, deoarece este conceput doar pentru Android. Webmaker nu oferă aproape nimic în care să nu poată fi găsit în rețelele sociale. Mozilla a abandonat un editor video online destul de util (Popcorn) și l-a înlocuit cu acest instrument. Webmaker este potrivit pentru începători, deoarece folosește o abordare de proiectare pe mobil, care a devenit o necesitate pentru site-urile web moderne.

Cu toate acestea, experții vor fi derutați de limitările asociate dezvoltării numai pentru infrastructura mobilă. Acest instrument are ca scop în principal atragerea adolescenților către marca Mozilla și, de asemenea, își propune să ajute profesorii să arate cool (învățându-i să vorbească limba de dezvoltare web mobilă).

O altă problemă care poate fi confuză este că este încă o altă aplicație care ocupă spațiu și resurse pe dispozitiv. Android are obiceiul de a umple rapid memoria, iar majoritatea utilizatorilor nu închid aplicațiile după ce renunță, deoarece Google nu s-a obosit să facă interfața de închidere intuitivă sau simplă. Drept urmare, majoritatea smartphone-urilor Android încep să încetinească după câteva luni, iar oamenii pur și simplu le schimbă sau se plâng constant de lipsa spațiului liber.

EDITOR

Editor este bunicul Mozilla Developer Panel și a fost inițial numit Composer. Probabil că numele a fost schimbat pentru a nu fi confundat cu KompoZer, un descendent al lui Composer. Înainte de KompoZer a existat Nvu și nu veți dori să folosiți niciunul, deoarece ambele nu acceptă HTML5. Puteți încerca BlueGriffon, fratele vitreg al lui KompoZer. Acesta acceptă HTML5. Cu toate acestea, veți obține un editor CSS doar dacă plătiți pentru plugin. Toate aceste instrumente sunt încă utilizabile, cu posibila excepție a Nvu. Editor/Compozitor este încă disponibil browser Mozilla Maimuta de mare.

CARNET PENTRU NOTIȚE

Un instrument pentru scrierea și testarea codului JS. Consola vă permite doar să executați o singură linie de script la un moment dat, ceea ce vă limitează foarte mult opțiunile. În același timp, puteți introduce câte linii doriți în scratchpad. Activat în orice moment fila Firefox apăsând Shift + F4.

Se va deschide o fereastră de editor de text cu interfață simplă. Puteți deschide scripturi existente, le puteți edita și le puteți salva. De asemenea, puteți crea scripturi noi. Editorul are încorporat completarea automată a comenzilor introduse. Există, de asemenea, documentație despre sintaxa comenzii. Puteți rula întregul script sau părți din acesta utilizând selecția.

JavaScript. Pornire rapidă

Explora Bazele JavaScript pe exemplu practic la crearea unei aplicații web

MOD DE DESIGN RESPONSIV

Această funcție este încorporată chiar în Firefox (este disponibilă și în Chromium și Google Chrome). Cu ajutorul acestuia, puteți verifica aspectul paginilor la rezoluții diferite pe același ecran. Instrumentul nu este perfect (pentru toate browserele), dar va funcționa pentru majoritatea scenariilor pentru a verifica aceeași afișare a site-ului. Modul de răspuns al Firefox este activat prin simpla apăsare a Ctrl + Shift + M. Reveniți la Mod normal poate fi apăsat din nou.

Puteți modifica aspectul folosind o serie de butoane situate deasupra aspectului. Primul buton din stânga este similar cu „închiderea ferestrei”, îl puteți folosi pentru a ieși din modul adaptiv. Urmează o listă derulantă în care puteți selecta șabloane de permisiuni, puteți seta unul nou sau (nu este recomandat) puteți elimina un șablon de permisiuni existent din listă. În dreapta listei derulante este un buton pentru a comuta între portret și modul orizontal. Urmează un buton pentru simularea evenimentelor de atingere a ecranului. Ultimul buton face o captură de ecran.

Unele versiuni de Firefox vă permit să setați raportul pixelilor, dar cât de bine funcționează acesta depinde de raportul pixelilor de pe dispozitiv. Pe lângă metodele încorporate de vizionare layout-uri adaptive mai sunt si altele. Acum vă vom arăta.

EXTENSIUNEA INSTRUMENTELOR DE DEZVOLTATOR WEB

Acest instrument nu este disponibil implicit în Mozilla, este o extensie pentru Firefox de către Chris Pederick. Extensia include o gamă largă de instrumente pentru a se potrivi tuturor nevoilor dumneavoastră. Cu el poți:

porniți și opriți ceva;

cookie-uri de control;

Schimbare Pagini CSS;

modifica câmpurile formularului de pe pagină;

eliminați măștile din câmpuri precum parola;

scoate afara informatii detaliate despre imagini;

examina elementele DOM;

subliniază elementele;

schimba dimensiunea ecranului;

vizualizați machetele în modul responsive mai bine decât în ​​metodele încorporate;

și mult mai mult.

Cel mai simplu mod descrie această extensie - Cuțit elvețian printre instrumentele de dezvoltare. Este bun la aproape tot ce ai nevoie, dar toate uneltele sunt ascunse până când ai nevoie de ele. Le puteți accesa folosind butonul din dreapta al mouse-ului meniul contextual, există și o bară de instrumente. Bara de instrumente este mult mai bună.

INSTRUMENTE DE DEZVOLTATOR FIREFOX

O mare parte din funcționalitatea Firebug este acum disponibilă direct din panoul de dezvoltatori încorporat, care include și o consolă. Panoul este similar și funcționează ca panoul din Chromium și Google Chrome. Interfața este neintuitivă și, în timp ce stăpânești și înțelegi toate funcțiile, vei face o mulțime de greșeli.

Utilizatori neexperimentați s-ar putea să nu observe una dintre funcții - linia de comandă JS din partea de jos a consolei, nu este marcată în niciun fel. Ea lucrează versiuni mai buneîn Chromium/Chrome, dar implementarea lor, care adaugă un cursor intermitent direct pe consolă, este mult mai evidentă.

MĂSURĂ EXTENSIUNEA

Este mai ușor să instalezi excelentul Screen Ruler al lui Ian McIntosh, dar extensia Measureit a lui Kevin Freitas are un avantaj. Poate măsura lățimea și înălțimea în același timp și este mai precis. Unealtă folositoare pentru a măsura ceva într-o fereastră de browser. În unele versiuni Instrumentul Firefox nu funcționează, poate fi din cauza unui conflict cu alte extensii. Încercați să dezactivați extensiile înainte de a instala.

EXTENSIUNEA COLORZILLA ȘI PICATĂ

Fiecare designer ar trebui să aibă ambele sau unul dintre instrumente, deoarece cu ajutorul lor puteți găsi rapid culoarea oricărui pixel din browser. De asemenea, puteți utiliza GColor - un instrument Gnome care face același lucru, dar are capacitatea de a obține o mostră de culoare din orice fereastră, nu doar din browser. Avantajul ColorZilla și Eyedropper față de GColor este că arată o vedere mărită a pixelului din care este derivată culoarea.

Instrumentul este activat făcând clic pe pictograma pipetă, după care cursorul se schimbă într-un model sub formă de cruce (ColorZilla) sau lupă mare (Eyedropper). Treceți cursorul peste fereastră și găsiți pixelul a cărui culoare doriți să obțineți. Faceți clic stânga pentru a copia culoarea în clipboard (în format hex), după care extensia se va închide automat.

Aceștia sunt doar asistenți, nu vor face totul pentru tine.

Încă ești dezvoltator, mai trebuie să-ți îndeplinești responsabilitățile. Aceste instrumente, dacă sunt folosite corect, ușurează lucrurile. Ei pot ajuta căi diferite, iar pentru majoritatea oamenilor, unele dintre ele sunt complet inutile, în ciuda celor mai bune intenții din partea Mozilla. Există și alte instrumente online care sunt mai bune decât cele descrise în acest articol, dar acestea sunt de obicei cele mai bune instrumente de utilizat. Uneori este bine să știi ce să mănânci instrument gratuit de la Mozilla, care poate fi folosit dacă este nevoie.

Firefox conține multe instrumente pentru a ajuta dezvoltatorii web să-și facă treaba. Mulți oameni încă folosesc FireBug și nu își dau seama că Firefox are acum propriile instrumente încorporate. În acest capitol, vom analiza instrumentele care sunt cele mai utile pentru dezvoltarea aplicațiilor pentru Firefox OS.

Dacă sunteți interesat să primiți Informații suplimentare despre aceste instrumente și despre ce altele instrumente bune va apărea în Firefox, uită-te la pagina de pe MDN (deși uită-te la link, voi aștepta).

Introducere în Responsive Design

Fluxul de lucru general al dezvoltării web constă în editarea unui fișier HTML și reîncărcarea paginii în browser pentru a vedea modificările. Cu excepția cazului în care utilizați ceva de genul Grunt sau Volo, atunci în general nu este nevoie de un pas de compilare sau similar. Firefox OS Simulator vă permite să utilizați același proces, cu excepția faptului că emulatorul este în prezent limitat la o singură rezoluție (480x320). Acest lucru este mai puțin decât ideal dacă vă proiectați și aplicația pentru a rula pe tablete, phablet-uri, televizoare gigantice sau orice altceva.

Pentru a testa cum va arăta aplicația dvs. la orice rezoluție a ecranului, puteți utiliza instrumentul Responsive Design pentru a schimba ecranul (și fereastra). Poate fi activat prin meniu Instrumente -> Dezvoltare web -> Design responsiv, după cum se arată în figura de mai jos. Când activați acest instrument, fereastra se va schimba astfel încât să puteți redimensiona fereastra de vizualizare trăgând colțurile sau prin lista de selecție.

Utilizarea designului responsive este utilă în special atunci când testați interogări media, deoarece vă permite să modificați dimensiunea ecranului și să vedeți cum răspunde site-ul dvs. la modificările de aspect în timp real. O altă caracteristică excelentă a Responsive Design este că puteți salva dimensiuni prestabilite. Dacă știți dimensiunile pe care vă concentrați, atunci puteți verifica rapid marimi diferite fără a fi nevoie să redimensionați fereastra curentă a browserului.

La momentul redactării acestui articol, majoritatea telefoanelor Firefox OS de pe piață rulează la o rezoluție de 480x320 și o densitate de aproximativ 96 de pixeli pe inch. Cu toate acestea, ar trebui să vă așteptați ca acest lucru să se schimbe în timp, pe măsură ce noul hardware Firefox OS devine disponibil. Ecranele vor avea probabil mai mulți pixeli și mai mulți densitate mare(similar cu afișajele retină de la Apple).

Pentru funcționare fiabilă aplicației dvs. în viitor, nu setați nicio rezoluție sau densitate de pixeli în CSS. În schimb, ar trebui să utilizați interogări media și principii de design receptiv atunci când creați aplicații care se adaptează la orice dimensiune de afișare. Pentru a afla mai multe despre designul responsive, recomand următoarele cărți: Responsive Web Design și Mobile First.

În general, designul responsive ne permite să testăm aplicațiile noastre web folosind o varietate de diferite dimensiuni ecrane fără a fi nevoie să schimbați fereastra browser Firefox. După umila mea părere, acesta este unul dintre cele mai utile și instrumentele disponibile dezvoltator web, dar are unul limitare mare: V în prezent nu există nicio modalitate de a testa diferite densități de pixeli (cu alte cuvinte, să vedeți cum ar arăta site-ul dvs. pe o retină sau un afișaj mai bun).

Instrumente de dezvoltare

Instrumente Dezvoltator Firefox similar cu FireBug și instrumente disponibile în altele browsere moderne. Cu aceste instrumente, puteți executa și depana JavaScript prin consolă și puteți manipula DOM și CSS pe pagina curentă.

Pentru a apela consola, puteți deschide Instrumente -> Dezvoltare web -> Consolă web sau faceți clic dreapta pe pagină, selectați Inspectați element și faceți clic pe fila Consolă.

Cu exceptia Consolă JavaScript există multe alte instrumente disponibile, cum ar fi un editor de foi de stil, monitor de rețea, profiler JavaScript, depanator JavaScript, inspector de pagină și multe altele.

În aplicația creată în capitolul anterior, am folosit consola pentru a verifica progresul aplicației noastre. E dragut metoda eficienta depanarea aplicațiilor noastre, dar unii dezvoltatori încă folosesc alert() pentru orice Cod JavaScript ca „instrument de depanare”.

Utilizarea alert() este de fapt proastă, deoarece dacă dezvoltatorul uită să elimine alert() atunci utilizatorii vor plăti pentru asta. Folosirea unei console evită această problemă deoarece toate mesajele sunt afișate inofensiv (și tăcut!) într-un loc la care utilizatorul nu ar avea acces în mod normal. Utilizarea consolei înseamnă, de asemenea, că nu trebuie să eliminați mesajele din cod decât dacă doriți cu adevărat. Acest lucru poate ajuta la menținerea și depanarea codului dacă ceva nu merge bine (cum este obișnuit cu orice software!).

Studiază și utilizarea corectă instrumentele de dezvoltare incluse în Firefox (sau orice browser pe care îl utilizați) sunt pas importantîn devenire dezvoltator bun. De aceea, îi încurajez pe toată lumea să se uite la linkurile de mai sus și să arunce o privire mai atentă la diferitele instrumente disponibile în Firefox.

Un alt instrument special care nu a fost menționat mai sus se numește un depanator la distanță. Acest instrument vă permite să vă conectați la telefonul dvs. sub Control Android sau Firefox OS și utilizați instrumente pentru dezvoltatori pentru a depana codul care rulează pe dispozitiv în timp real.

rezumat

Acest capitol este dedicat prezentare scurta instrumente de dezvoltare incluse în Firefox. Utilizarea acestor instrumente ușurează procesul de dezvoltare, mai ales când le utilizați împreună cu simulatorul Firefox OS. În următorul capitol, vom afla mai multe despre Managerul de aplicații și despre cum să-l folosim cât mai bine.