Meniu
AcasăAvarii

Mozilla Firefox. Probleme cu aspectul adaptiv (o eroare care aproape a provocat o ceartă pentru companie). Instrumente ușoare de design web în Mozilla

Mozilla Firefox 14 este oficial browserul „moștenire”, celor cărora le place să lucreze ca dezvoltator web, să răsfoiască știrile sau doar să discute online, salută Firefox 15 pentru desktop.

Ce este nou în Firefox 15

Firefox 15 este disponibil pentru computerele Windows, Mac și Linux.

Versiunea 14 nu este rea. Îmbunătățirile au fost constante, dar această versiune a fost mai stabilă și mai atentă decât înainte. Bar, Flash totul a funcționat bine. Poate Mozilla să se bazeze pe acest succes? Noua versiune a browserului Firefox 15 poate fi descărcată și instalată fără probleme după instalare, marcajele și datele dumneavoastră nu se vor pierde.

Ooo - nou oportunități interesante! Deși există mai multe instrumente de design web responsive online și marcate cu marcaje, Mozilla este primul furnizor care a adăugat acest lucru direct în browser (Meniu > Dezvoltare web > Design responsiv):

Pot fi selectate o serie de rezoluții tipice sau puteți glisa controalele de dimensiune (greu de înțeles) în partea dreaptă jos a ferestrei. Este simplu, dar eficient. Nu va trebui niciodată să redimensionați întreaga fereastră a browserului. Putem spune că cu acest instrument, Firefox 15 devine browserul pentru dezvoltatorii web.

Layout View Inspector

Aspectul ferestrei de vizualizare care urmează să fie adăugat la pagină Inspector(Meniu > Dezvoltare web > Inspector, apoi faceți clic dungă albastrăîn colțul din dreapta jos):


Imaginea afișează lățimea și înălțimea ferestrei, umplutura, marginile și marginile. Aceasta este o caracteristică disponibilă în Firebug și o serie de alte suplimente, dar este utilă după Instalări Firefox 15.

Depanator JavaScript

Firefox are în sfârșit propriul său depanator JavaScript! (Meniu > Dezvoltare web > Depanator):


Pentru a fi corect cu Mozilla, depanatorul lor este disponibil de peste un deceniu, dar dezvoltarea sa oprit acum câțiva ani. Din nou, depanarea este disponibilă în Firebug, dar alternativa nativă va funcționa probabil mai rapid - mai ales dacă aveți de-a face doar cu probleme de scripting.
Din păcate, depanatorul încă nu funcționează. Acest lucru este grozav dacă aplicați puncte de întrerupere la funcția de cronometru și la manevrele de evenimente, dar dispare și șterge setările de îndată ce reîmprospătați pagina.
Vom trece în revistă funcțiile din Firefox 16 – mai ales că va fi implementată depanarea la distanță a dispozitivelor mobile.

Actualizare liniștită

Firefox 15 poate ultima actualizare, care trebuie descărcat pentru a începe actualizarea programului. De acum înainte, toate actualizările vor avea loc în fundal.
Acest vesti bune: Utilizatorii Firefox vor trece la ultima versiune rapid si fara durere. Administratorii de sistem poate fi mai puțin fericit, noua versiune se poate rupe critic aplicatii importante- deși actualizările automate pot fi dezactivate.
Această actualizare este puțin mai eficientă decât Actualizare Google, care poate dura 10 minute sau mai mult pentru a actualiza pe mașinile lente.
Principalele avantaje ale browserului Mozilla Firefox sunt: Cele mai recente tehnologii web

HTML5 și JavaScript în Firefox 14

Mozilla lansează un nou vizualizator PDF care utilizează JavaScript, HTML5 fără niciun program de completare și este alimentat exclusiv de motorul Firefox 14 - Mozilla pdf.js. Inovația ne va permite să ne dezvoltăm și să accelerăm remediu intern Vizualizarea PDF împreună cu o actualizare a motorului JS va crește performanța, stabilitatea și securitatea browserului. Mozilla pdf.js poate fi folosit ca add-on, dar folosește în întregime tehnologii web, adică poate fi executat doar ca aplicație web, are sursă deschisă, astfel încât, dacă se dorește, să poată fi integrat în site-uri și deja cu rezultatul versiunea finală Browserul Firefox 14, tehnologia pdf.js va deveni parte integrantă a acestuia.

Creatorii și dezvoltatorii de site-uri web vor adora noul Caracteristici Firefox. Dacă sunteți interesat să creați conținut și aplicații folosind tehnologii avansate, atunci Firefox va fi pentru dvs cea mai buna alegere printre browsere. Pentru a afla mai multe, consultați diagrama de comparație a suportului pentru tehnologie avansată.

Actualizarea formularelor

Lăsați procesul enervant de dezvoltare a formularelor web un lucru din trecut. Instrumentele de creare a formularelor integrate în Firefox, cum ar fi atributele listei și validarea HTML, vă oferă toate funcționalitățile de care aveți nevoie.

Video în format WebM și HD

Fiind unul dintre primii care acceptă videoclipuri HTML5, Firefox acceptă acum nou format WebM, care vă permite să vizionați videoclipuri la calitate HD.

Analizator

Firefox include un parser gata pentru HTML5. Acest parser are câteva caracteristici noi, în special imbricarea și, de asemenea, îmbunătățește performanța prin rularea algoritmului de analizare pe propriul procesor.

IndexedDB

Inclus în Firefox versiune preliminară, care oferă dezvoltatorilor posibilitatea de a experimenta pentru prima dată stocarea locală în browser.

Grafică de generație următoare

Trebuie văzut pentru a fi crezut. Datorită motorului nostru grafic actualizat, afișarea textului și a graficelor, inclusiv , este mai rapidă și mai precisă ca niciodată. Firefox corectează automat schema de culori imagini (de exemplu, dvs fotografii digitale) astfel încât culorile să apară exact așa cum se dorește.

File API îmbunătățit

Adăugând suport pentru metoda .click() la dialogul de încărcare a fișierelor, metoda .slice și adresele URL pentru API-ul fișierului, Firefox a oferit dezvoltatorilor posibilitatea de a personaliza mai bine modul în care fișierele sunt încărcate pe server.

Stilizarea paginilor cu CSS3

Suportul pentru noile funcții CSS3, cum ar fi chenar-rază, casetă-umbră și alte tranziții și transformări, facilitează adăugarea de animații elegante la paginile web.

Audio API

Firefox schimbă modul în care media este integrată cu Internetul. Cu HTML5, dezvoltatorii pot folosi cu ușurință JavaScript pentru a citi și scrie date audio. Oferim acces la date audio brute, astfel încât să puteți crea efecte sonore grozave!

Suport multi-senzor

Firefox are acum suport încorporat pentru multi-touch Tehnologii Windows 7, oferindu-ți absolut mod nou interacțiunea cu browserul dvs.

Consola Web

Vrei să știi ce motivează site-urile care folosesc tehnologii avansate? Cu acest instrument de analiză experimentală, puteți privi sub capota paginilor web dinamice.

În ciuda tuturor, Mozilla Firefox este un browser modern popular, a cărui versiune nouă a fost lansată în ianuarie 2010. Versiune nouă conceptual diferit de versiunea anterioară, are un nou motor eficient, ca urmare, viteza de încărcare a site-urilor a crescut, calitatea afișajului s-a îmbunătățit, s-a obținut o mai bună compatibilitate a standardelor, iar interfața a fost schimbată. Posibilitatea de a descărca gratuit Mozilla este o șansă de a experimenta un nivel complet nou al browserului. „Mazila” este acum disponibil în limba rusă.

„Mozilla Firefox”

Mozilla Firefox își începe istoria cu browserul Netscape Navigator. În timpul „războaielor browserelor”, proiectul Netscape a evoluat în browserul Mozilla Firefox. În mod tradițional, era posibil să descărcați gratuit Mozilla Firefox. De la crearea sa, Firefox a avut propria „carte de vizită” - ușurință în utilizare. O interfață simplă este principalul avantaj al browserului. Merită să ne amintim că Netscape Navigator avea o interfață similară cu cea a . Acesta din urmă are cele mai bune pozitii pe piață datorită produselor ambalate marca Microsoft. Mozilla Firefox, distribuit gratuit, care poate fi descărcat gratuit de pe site-ul dezvoltatorului, în panourile principalelor motoare de căutare Runet, este lider printre browsere, având în vedere că nu are un suport atât de puternic precum Internet Explorer.

Browser „Mazila Firefox”

Capacitățile extinse ale Mazila Firefox sunt extinse nivel bun securitate, care de asemenea controlează controale ActiveXși gestionează datele personale. Puteți descărca gratuit Mozilla și puteți utiliza căutarea inteligentă situată lângă bara de căutare, precum și linia inteligentă de introducere a adresei de Internet. Puteți descărca gratuit „Mazila” și profitați de mecanismul rapid de descărcare a aplicațiilor și fișierelor care pot fi descărcate după întreruperea conexiunii, precum și de multe controale și opțiuni convenabile.

Și mai multe despre avantajele Mazila Firefox:

  • bară specială de căutare integrată în baza de date de cautare unul dintre motoarele de căutare. Când instalați pluginuri, puteți extinde numărul de motoare de căutare pe pagina de descărcare;
  • capacitatea de a descărca gratuit Mozilla Firefox oferă șansa de a utiliza o interfață dezvoltată, inclusiv marcaje, file și navigare sigură;
  • Browserul Mozilla Firefox este conceput astfel încât să respecte cât mai mult posibil problemele de confidențialitate, precum și să protejeze împotriva software-ului rău intenționat, a programelor spion și a blocării ferestrelor pop-up;
  • Browserul Mozila garantează scalarea de înaltă calitate a paginilor web;
  • capacitatea de a descărca browserul Mazila sugerează soluții extensibile prin pluginuri;
  • Browserul acceptă exportul de știri RSS.

Comunitatea Mozilla a lansat plan preliminar dezvoltarea browserului Firefox anul acesta. În primul rând, Mozilla plănuiește să accelereze programul de lansare pentru noile versiuni stabile ale browserului web, relatează resursa Compulent.

Numărul de modificări și îmbunătățiri ale unor astfel de versiuni va fi mai mic, dar vor fi lansate mai des. Această abordare este de așteptat să rezolve problema întârzierilor, ca și în cazul Firefox 4, al cărui anunț trebuia să aibă loc în noiembrie, dar a fost apoi amânat pentru primul trimestru al anului 2011.

Printre sarcinile cheie pe care intenționează să le rezolve în acest an, Mozilla evidențiază asigurarea unui răspuns garantat al browserului la acțiunile utilizatorului în 50 ms, implementând suport pentru sisteme de operare, optimizarea interfeței cu utilizatorul și dezvoltarea unei platforme unificate pentru rularea aplicațiilor diverse tipuri. În plus, Mozilla intenționează să asigure siguranța datelor utilizatorului în cazul oricăror erori ale browserului.

Pe lângă Firefox 4, anul acesta Mozilla se așteaptă să lanseze a cincea, a șasea și a șaptea versiune a browserului.

Firefox 5 este de așteptat să includă un manager de cont, animație de interfață, suport pentru sisteme pe 64 de biți etc. În Firefox 6, eforturile programatorilor vor fi îndreptate spre optimizarea cache-ului și a motorului JavaScript.

După cum sa promis înainte de lansarea Firefox 4.0, versiunea finală a browserului Firefox 5 va fi lansată probabil pe 21 iunie 2011. Acest lucru confirmă indirect programul publicat de experții Mozilla, conform căruia dezvoltarea al acestui browser va include patru etape cheie, reglementând clar și delimitând în timp toate etapele depanării codului browserului de Internet. Planul publicat este prezentat într-o versiune nefinalizată, deci este posibil ca în el să apară unele ajustări.

Deci, conform acesteia, până la sfârșitul lui 2011 ar trebui să avem versiunile Firefox 5, 6 și 7. Fiecare noua lansare Firefox va trebui să treacă prin trei etape principale înainte de lansare - mozilla-central (cum ar fi canalul Canary pentru Chrome), mozilla-aurora (canalul Dev) și mozilla-beta, fiecare dintre ele va dura aproximativ șase săptămâni.

Prima și (până acum) singura excepție de la această regulă este Firefox 5, acesta va exista în stadiul mozilla-central doar trei săptămâni, iar în etapele aurora și beta timp de 5 săptămâni. Firefox 5 este momentan în modul central, versiunea de noapte este deja disponibilă pentru dezvoltatori și entuziaști și ar trebui să intre în curând în faza de aurora (din 12 aprilie). Dacă totul decurge conform planului, vom putea obține Firefox Beta 5 pe 17 mai, cu lansarea finală pe 21 iunie.

Firefox 5 va fi îmbunătățit interfata utilizator cu funcție de selecție a mai multor file, utilitar integrat pentru vizualizarea documentelor format PDFși un sistem îmbunătățit de gestionare a contului. De asemenea, este planificată includerea în browser de instrumente care să asigure integrarea programului cu rețelele sociale.

De la autor: fără îndoială în ultimii cinci ani Google Chrome a devenit forța dominantă în războaiele browserelor pentru utilizatorii de desktop și (evident) 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ă cod 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. utilizatori 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 un proiect condus de comunitate (deși cu Wikipedia „comunitatea” a devenit puțin prea arogantă). 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, ceea ce îl face 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ă mai bine decât editorul de cod din CPanel, deoarece 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 modul 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 dezactiva. Vizualizarea automată poate chiar afișa Stiluri CSSîn timp real. Dacă creați un bloc cu conținut și apoi adăugați stiluri la acesta, puteți experimenta foarte ușor diferite tipuri.

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 fișier 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 care folosește soluții de dezvoltare online ar trebui să facă acest lucru.

Regulile de utilizare au foarte parte importantă unde scrie ca dai Mozilla gratuit licențiați tot ceea ce postați pe platforma lor și sunteți de acord să permiteți altora să vă refolosească și să editeze produsul. 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. -la altul. 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 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 SeaMonkey.

SCRATCHPAD

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 filă 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 testa același aspect al site-ului. Modul de răspuns al Firefox este activat prin simpla apăsare a Ctrl + Shift + M. Reveniți la modul 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 există un buton pentru a comuta între portret și modul peisaj. 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 de pixeli, dar cât de bine funcționează acesta depinde de raportul de pixeli de pe dispozitiv. Pe lângă metodele încorporate pentru vizualizarea machetelor receptive, există și 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 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;

schimba Pagini CSS;

modifica câmpurile formularului de pe pagină;

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

scoate 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;

si multe altele.

Cel mai simplu mod de a descrie această extensie este că este un cuțit elvețian de instrumente 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 clic dreapta mouse-ul în meniul contextual, există și o bară de instrumente. Bara de instrumente este mult mai bună.

INSTRUMENTE DE DEZVOLTATOR FIREFOX

O mare parte din funcționalitățile Firebug sunt acum disponibile 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. Funcționează mai bine decât versiunile 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. Instrument util 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 în moduri 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.

Din data de 15 versiuni Firefox cadourile au început să se reverse pentru dezvoltatorii web. Au fost adăugate noi instrumente de depanare, cele existente au fost îmbunătățite și au apărut noi funcții. Începând cu versiunea 16, Firefox a început să accepte aproape toate elementele CCS3 fără prefixe
Și acum despre fiecare cadou separat și în detaliu

Design receptiv

Designul responsive este o caracteristică care face posibilă vizualizarea site-ului la orice rezoluție. Puteți selecta din presetarea principală rezoluții standard, sau îl puteți configura singur.
Funcția poate fi apelată prin comanda rapidă de la tastatură Ctrl+Shift+M Sau din meniu - Tools - Web development - Responsive design

După cum puteți vedea, fila de dezvoltare web s-a extins puțin datorită funcțiilor adăugate. Dar să revenim la designul responsive.
Puteți activa funcția de vizualizare a site-ului în diferite extensii pe orice pagină într-o filă separată, în timp ce restul file deschise nu se va schimba. Funcția lansată nu interferează cu navigarea pe site, adică puteți urmări link-uri din cadrul site-ului sau link-uri externe, iar o filă cu un design receptiv va afișa orice pagină până când este dezactivată

În plus față de extensiile preinstalate, puteți modifica singur extensiile după cum doriți. Folosind cele două glisoare din dreapta, puteți crește și micșora dimensiunea.

Probabil că nu este nevoie să spunem separat cât de valoroasă este funcția implementată pentru dezvoltatorii web, având în vedere faptul că diverse dispozitive cu diverse extensii. Și este important ca fiecare dezvoltator web sau proprietar de site web să știe cu ce arată un site web diverse extensii. Va fi util în special pentru începători

Depanator JavaScript

Împreună cu un simplu editor JavaScript, cu care a fost destul de convenabil să testați, editați și explorați unele scripturi, a apărut un depanator mai avansat
Utilizatorii care nu sunt interesați de dezvoltarea de scripturi pot folosi acest instrument încorporat pentru a explora scripturi pe orice pagină și pentru a obține lista și conținutul scripturilor

Suport fără prefixe de elemente CSS3

Începând cu versiunea 16, Firefox acceptă pe deplin (fără prefixe) elemente precum Gradienți, Transformări, Animații și Tranziții
Firefox este primul browser care acceptă noile tehnologii. Pentru alte browsere trebuie să creați fie prefixe, fie afișare alternativă

Sprijinul clar poate fi văzut în pesmet a acestui site (meniul de navigare deasupra materialului). Folosind pagina de exemplu
Cele mai recente tehnologii CSS3 și HTML5 Gradientele din breadcrumb sunt desenate fără prefixe. Utilizatorii de 16+ versiuni de FF vor vedea afișajul corect

Utilizatorii altor browsere vor vedea un afișaj simplu

Odată cu aceasta, a fost adăugat și suport etichete audioși video. Panoul de dezvoltare îmbunătățit, din 16 versiuni Mozilla Firefox are acum acces la funcțiile de bază folosind butoane acces rapid, precum și linie de comandă pentru lucrul de la tastatură

Desigur, nu toate inovațiile sunt prezentate în această recenzie, dar sunt afișate toate care, în opinia mea, pot fi utile tuturor utilizatorilor și celor mai apreciați, desigur

Atenţie! Copierea parțială sau completă a unui articol fără un link activ către sursă este strict interzisă

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 MDN (deși uită-te la link, voi aștepta).

Introducere în Responsive Design

Un flux de lucru comun de dezvoltare web este 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 modul în care 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ă cunoașteți dimensiunile pe care îi vizați, atunci puteți testa rapid diferite dimensiuni, 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 a asigura performanța viitoare fiabilă a aplicației dvs., 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 browserului Firefox. După umila mea părere, acesta este unul dintre cele mai utile și instrumentele disponibile dezvoltator web, dar are unul limitare mare: V momentul 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 pentru dezvoltatori

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 excepţia 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 frumos mod eficient 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 (de obicei, acest lucru se face 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.

Relua

Acest capitol este dedicat scurtă prezentare generală instrumente de dezvoltare incluse în Firefox. Utilizarea acestor instrumente ușurează procesul de dezvoltare, mai ales atunci 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.

Astăzi este 13, 17 februarie. Povestea a început acum 3 zile. De fapt, problema a apărut după cum urmează. Există un carusel (acesta este un tip de glisor), designerul de layout al companiei R&K a primit o solicitare că caruselul nu este adaptiv, adică. nu se micșorează așa cum era de așteptat atunci când fereastra browserului este comprimată pentru a se potrivi cu lățimea sa. Bug-ul a fost detectat în Firefox v50.1.0 pe 32 de biți, Win7 pe 32 de biți. Totodată, a doua zi, a apărut un telefon ciudat de la client, cu un mesaj că totul merge și mulțumesc pentru răspunsul rapid. Deoarece Nimeni nu s-a uitat deloc la aspect, așa că oamenii și-au zgâriat napii nedumeriți și s-au împrăștiat. Două zile mai târziu, clientul a sunat din nou și deja a început să strige cu furie/sfâșietor/sălbatic/aprig că aspectul nu era din nou adaptabil și nu se potrivea în fereastra browserului când browserul era comprimat. Aici oamenii au început să se gândească și au început să modifice aspectul.

index.html


style.css * (marja: 0; umplutură: 0; dimensiunea fontului: 0; ) /* reset stiluri */ div (marja: 20px automat; /* centrare pentru teste */ chenar: 1px albastru regal; /* blocarea vizibilității pentru teste */ /*afișează: inline-block valoarea div originală, nu este necesară pentru testare */ max-width: 450px /* 300, 400, 450, 600, alegeți singur lățimea */ white-space: nowrap /; * astfel încât imaginile să fie într-o linie */ /*overflow: ascunsă valoarea originală overflow, nu este necesară pentru test */ ) intrare ( /*afișare: niciuna; valoarea originală afișată, nu este necesară pentru test */ ) img ( lățime: 100 %; /* compresie adaptivă a imaginii */ )
Desigur, tot ce nu era necesar a fost tăiat pentru testare. Pentru ca sensul problemei să fie clar vizibil. Deci, problema descoperită cu „aspect adaptiv” este următoarea:

Aspect, aspect, de exemplu ceea ce este mai sus, lansați din nou în cele de mai sus browser Firefox. Vedem următoarea poză, totul este conform așteptărilor, de exemplu așa.

Reducem fereastra, în mod natural „dispunerea adaptivă” micșorează imaginea și obținem asta.


Totul e bine? Dar nu a fost așa... Mergem să bem un ceai, fumăm, ne întoarcem, deschidem Yandex, citim știrile (mail, Habr, Rutub etc.), ne deschidem să ne uităm la aspectul nostru și suntem uimiți de primi asta.


Acum faceți-o oameni potriviti. Oamenii sunt oameni. Este imposibil să iei în calcul totul. În lumea software-ului buggy, este și mai imposibil să iei în considerare totul. S-a dezvoltat următoarea situație. Clientul a deschis pagina într-o singură filă, a comprimat browserul și a obținut ceea ce și-a dorit. A doua zi a deschis o pagină cu o a doua filă, iar aspectul a devenit instabil. În același timp, designerul de layout, fără să observe filele, le-a deschis diferit și a obținut rezultate diferite. Nimeni nu a acordat atenție numărului de file. S-a ajuns la punctul în care au început să deschidă Windows pur, uite acolo, au început să caute rapoarte de erori pe forumurile Mozilla, au început să caute comportament ciudat selectoare de lățime/lățime maximă și luați acțiuni foarte încântătoare și ciudate, despre care este jenant să scrieți, dar din nou și din nou nimeni nu a acordat atenție numărului de file. Mai mult, timp de trei ore nimeni nu a putut recrea bug-ul, deoarece a deschis o pagină de testare pe browser curat fara file. Am fost pur și simplu uimiți că bug-ul a dispărut de la sine, dar bineînțeles, de îndată ce am deschis o pagină cu file și cu anumite, bug-ul a ieșit cu crawlere. Timp de 24 de ore, oamenii au avut cel mai sever butthurt, pe care nu l-am mai văzut în viața mea, aromat cu strigătele sfâșietoare ale clientului. Desigur, oamenii au început să-și piardă puțin nervii, iar lucrurile aproape au ajuns la un masacru de-a dreptul. Nu are rost să spui povestea mai departe, dar poți ghici la ce va duce situatii similare o poți face singur.

Vă rog, în lumea software-ului cu erori, fiți mai atenți și mai răbdători. Acest lucru se aplică tuturor, fără excepție. Atât pentru interpreți, cât și pentru manageri. Desigur, nu există nimic de luat de la clienți în afară de bani, iar aceștia pot fi iertați.

P.S.: Nu am nimic de-a face cu designerii de layout. Am făcut layout-ul acum 10 ani, slavă Domnului că am ieșit repede din această afacere obscenă. Am rezolvat problema asta apel telefonic de la un prieten care și-a zguduit creierele încercând să rezolve această problemă. Bug-ul a fost recreat cu succes, aspectul de mai sus este al meu. Aspectul este de testare, nu deloc de producție. Am sunat în mod special un alt designer de layout pe care îl cunosc, aceasta este prima dată când aud despre acest bug.