Browserul Mozilla oferă multe instrumente diferite pentru lucru și îmbunătățirea performanței sale. O astfel de îmbunătățire este capacitatea de a lucra cu întreaga consolă a browserului.

Ce este consola browserului

Acest element este același cu consola web standard, dar vă permite să lucrați nu cu file individuale, ci cu motorul de căutare în ansamblu. Adică, informațiile despre erori, solicitări și alte acțiuni sunt înregistrate acolo.

Instrumentul înregistrează informații nu numai dintr-o filă separată, ci și despre completări, precum și codul motorului de căutare în sine. Pentru alte îmbunătățiri care sunt disponibile în kiturile standard de dezvoltare web, ar trebui să luați în considerare utilizarea Barei de instrumente. Consola este, de asemenea, folosită pentru a executa diverse expresii JavaScript.

Trebuie avut în vedere că începând cu 30 această linie Firefox este dezactivată. Pentru a porni consola în Mozilla, trebuie să atribuiți codul adevărat liniei despre: config - devtools.chrome.enabled. De asemenea, puteți utiliza o altă metodă pentru a activa îmbunătățirea.

Este necesar să bifați caseta de lângă caseta „Activați instrumentele de depanare pentru Browser Chrome și suplimente” pentru Firefox 40, în versiunile anterioare numele acestei coloane poate fi ușor diferit.

După deschiderea ferestrei dezvoltatorului, puteți vedea că interfața este împărțită în 3 părți:

Caracteristici de lucru în modul dezvoltator web

Pentru a profita la maximum de toate îmbunătățirile, trebuie să știți nu numai cum să deschideți consola, ci și câteva secrete de lucru cu ea.

Un instrument foarte util este console.log. Servește la depanarea ieșirii, dar utilizatorii avansați recurg și la câteva alte metode de lucru cu informații. De exemplu, console.log funcționează cam ca printf.

De asemenea, în Firefox este posibil să folosiți modelul „% c” pentru a utiliza al doilea argument la formatarea unui stil. Mozilla va afișa o pictogramă gri mică lângă informații precum avertismente sau mesaje de eroare. Aceasta înseamnă că aceste notificări necesită atenție. Mesajele de depanare nu sunt indicate în acest motor de căutare, deoarece, potrivit dezvoltatorilor, ele sunt depășite și ar trebui să utilizați în schimb console.log ().

Este demn de remarcat faptul că mai multe valori pot fi utilizate în acest motor de căutare simultan. Pentru a face acest lucru, trebuie să le separați cu virgule, ceea ce este foarte convenabil când le includeți pe o singură linie.

Utilizarea unui temporizator și starea de salvare

Modul dezvoltator activat implică posibilitatea de a utiliza un cronometru. Poate fi rulat prin console.time. Cronometrul poate fi oprit folosind console.timeEnd. Ora este afișată în milisecunde.

Cronometrarea începe din momentul în care cronometrul a fost activat. Opțional, puteți crea mărci de timp. Ele sunt utilizate împreună cu sincronizarea traficului HTTP, pentru a determina timpul necesar pentru executarea unei bucăți de cod.

Destul de des, pentru referință sau jurnalele de urmărire, trebuie să salvați informații. Nu trebuie să faceți nimic pentru a salva starea sau datele afișate între deschiderea paginii. Firefox va salva automat aceste informații. Puteți chiar să ștergeți mesajul după activarea butonului din colțul din dreapta sus sau redeschiderea panoului.

Deschiderea consolei în Mozilla Firefox este destul de simplă. Pentru a face acest lucru, trebuie să aveți abilități elementare care vă vor ajuta să controlați funcționarea browserului și chiar să o îmbunătățiți, dacă este necesar.

Există multe scripturi Java diferite pentru rețelele sociale publicate pe site-ul nostru. Și în descrierea fiecărui script, descrieți instrucțiuni detaliate pentru lansarea lor ... Acest lucru este inutil. Am decis să scriem un manual cu drepturi depline care să descrie instalarea scripturilor pe toate browserele, precum și să ținem cont de disponibilitatea mai multor metode de instalare pe un anumit browser și să le descriem pe toate.

Rularea scripturilor Java prin consola browserului:

Acum, după cum știți, rularea scripturilor prin consolă este cea mai populară și cea mai simplă modalitate de utilizare a acestora. Prin urmare, de aici începem - cu modalități de a intra în consolă pentru fiecare browser.

Consolă în Mozilla Firefox:

Cel mai simplu mod de a ajunge la consola web în browserul Mozilla Firefox este folosirea comenzii rapide de la tastatură Ctrl + Schimb + K... Faceți clic și consola va fi afișată.

Consolă în Google Chrome și alte browsere bazate pe Chromium:

Google Chrome, Opera 15+, Amigo, Orbitum și alte browsere bazate pe Chromium au, de asemenea, o metodă de taste rapide pentru a lansa consola web. Pentru a face acest lucru, apăsați simultan Ctrl + Schimb + J.

Consolă în Opera 12:

Pentru a lansa consola web în vechea generație de browser Opera (nu mai veche decât versiunea 12), trebuie să utilizați comanda rapidă de la tastatură Ctrl + Schimb + eu... Aceasta va lansa Opera Dragonfly, o bară de instrumente pentru dezvoltator. După deschidere, accesați fila Consolă.

Consolă în Internet Explorer:

Pentru a deschide consola în browser-ul Internet Explorer, trebuie mai întâi să faceți clic pe butonul F12și apoi apăsați combinația Ctrl + 2 (două pe panoul central, nu în secțiunea Num).

Consola Safari:

În Safari, înainte de a deschide consola, asigurați-vă că ați introdus setările browserului ( Angrenajîn colțul din dreapta sus" Setări… » Suplimente) și conectați opțiunea Afișați meniul Dezvoltare în bara de meniu... După aceea, consola poate fi invocată cu comanda rapidă de la tastatură Ctrl + Alt + C.

Toate scripturile sunt introduse în consolă într-un câmp special desemnat de lângă pictograma săgeată (vezi capturile de ecran, zonele pentru introducerea scripturilor sunt evidențiate cu un cadru roșu). Scripturile sunt lansate prin apăsarea butonului introduce... După ce introduceți și rulați orice script, veți vedea orice comentarii sau erori în timpul execuției lor.

Lansarea scripturilor Java din bara de adrese a browserului:

Metoda de lansare a scripturilor din bara de adrese a browserului este o metodă mai veche, dar mai degrabă tradițională. Inițial, toate scripturile au fost executate astfel. Dar tendințele se schimbă, lumea se dezvoltă. În majoritatea browserelor, după introducerea codului de script în bara de adrese, trebuie să adăugați codul manual pentru a-l porni, iar în unele browsere, bara de adrese nu procesează deloc scripturile java.

Bara de adrese în Mozilla Firefox:

Din păcate, niciuna dintre cele mai recente versiuni ale browserului Mozilla Firefox nu acceptă scripting-ul barei de adrese. Deși această opțiune a fost prezentă în versiunile anterioare, în Firefox modern dezvoltatorii au decis să o abandoneze.

Bara de adrese în Google Chrome și alte browsere bazate pe Chromium:

În browserul Google Chrome și în orice alt browser construit pe codurile sale sursă, cum ar fi Opera 15+, Amigo, Orbitum și altele, puteți rula scripturi în bara de adrese. Dar! După introducerea scriptului, înainte de acesta trebuie să adăugați cuvântul javascript:(împreună cu două puncte), în caz contrar (din cauza unui astfel de fenomen precum omnibox), în loc să ruleze scriptul, va avea loc o redirecționare către motorul de căutare.

Bara de adrese în Opera 12:

Lucrurile sunt mult mai bune în Opera 12. Pentru a rula scriptul, trebuie doar să-l introduceți în bara de adrese și să îl rulați. Nu ar trebui să fie probleme.

Bara de adrese în Internet Explorer:

În acest browser, ca și în Google Chrome și altele asemenea, după introducerea scriptului în bara de adrese, la început trebuie să adăugați javascript:(împreună cu două puncte), altfel scriptul nu va funcționa.

Bara de adrese în Safari:

Ei bine, în Safari, lucrurile sunt la fel de bune ca în Opera 12. Doar lipiți scriptul existent în bara de adrese și rulați.

Folosind pluginuri de browser pentru a stoca și rula scripturi:

Dacă scripturile trebuie folosite în mod constant, atunci trebuie să le modificați, să copiați de pe un site web sau dintr-un fișier text, să lipiți de fiecare dată în bara de adrese sau în consolă. De acord - nu este convenabil. De aceea au fost inventate extensii speciale (plugin-uri) pentru browsere, concepute pentru a stoca și rula scripturi. Vorbim despre două plugin-uri: Greasemonkey pentru Mozilla Firefox și Tampermonkey pentru Google Chrome.

Plugin Greasemonkey pentru Mozilla Firefox:

Pluginul Greasemonkey pentru Mozilla Firefox vă permite să creați, să salvați și să rulați scripturi adăugate de utilizatori. Ai grija! Când folosiți scripturi pentru a șterge sau a modifica ceva, imediat după ce sunt adăugate la plugin, acestea vor fi lansate automat. Nu vă recomandăm să adăugați scripturi la plugin, de exemplu, pentru a șterge intrările de pe peretele VKontakte atunci când pagina VKontakte este deschisă (nu știți niciodată ce).

Manual de utilizare:

Plugin Tampermonkey pentru Google Chrome:

Pluginul Tampermonkey este analog cu pluginul Greasemonkey pentru Firefox și vă permite, de asemenea, să creați, să salvați și să rulați scripturi personalizate. Ai grija! Când folosiți scripturi pentru a șterge sau a modifica ceva, imediat după ce sunt adăugate la plugin, acestea vor fi lansate automat. Nu vă recomandăm să adăugați scripturi la plugin, de exemplu, pentru a șterge intrările de pe peretele VKontakte atunci când pagina VKontakte este deschisă (nu știți niciodată ce).

Manual de utilizare:


Acesta este modul în care funcționează pluginurile Greasemonkey și Tampermonkey. Totul este rapid și ușor. Scripturile adăugate nu dispar nicăieri, ele pot fi, de asemenea, activate și dezactivate în orice moment convenabil.

Concluzie:

Toate metodele descrise de rulare Javascript sunt descrise pentru cele mai recente versiuni ale browserelor web populare. Dacă utilizați un browser diferit sau o versiune mai veche a browserului, iar metodele de rulare a scripturilor din acesta diferă de cele descrise în acest articol, vă rugăm să ne anunțați în comentarii. |

Browserele moderne oferă instrumente de dezvoltare încorporate pentru JavaScript și alte tehnologii. Aceste instrumente includ o consolă, care este similară cu o interfață shell, precum și instrumente pentru inspecția DOM, depanare și analiza activității rețelei.

Consola poate fi folosită pentru a înregistra informații ca parte a procesului de dezvoltare JavaScript. De asemenea, consola vă permite să interacționați cu o pagină web prin executarea expresiilor JavaScript în contextul paginii. Practic, consola oferă posibilitatea de a scrie cod JavaScript și de a-l manipula după cum este necesar.

Acest tutorial vă va învăța cum să utilizați consola JavaScript în browser și vă va prezenta alte instrumente de dezvoltare încorporate pe care le puteți găsi utile.

Lucrul cu consola JavaScript în browser

Majoritatea browserelor web moderne care acceptă HTML și XHTML oferă acces implicit la consola pentru dezvoltatori, unde puteți lucra cu JavaScript într-o interfață asemănătoare terminalului. În această secțiune, veți afla cum să accesați consola în Firefox și Chrome.

browser Firefox

Aceste instrumente vă permit să inspectați și să editați elemente DOM, precum și să căutați obiecte HTML asociate cu o anumită pagină. DOM poate indica dacă o bucată de text sau o imagine are un atribut ID și poate determina valoarea acelui atribut.

În plus, în bara laterală sau sub panoul DOM, puteți găsi stiluri CSS care sunt utilizate într-un document HTML sau o foaie de stil.

Pentru a edita DOM-ul în timp real, faceți dublu clic pe elementul selectat. De exemplu, puteți încerca să întoarceți eticheta

v

.

Din nou, după reîmprospătare, pagina va reveni la aspectul anterior.

fila Rețea

Fila Rețea vă permite să monitorizați și să înregistrați solicitările de rețea. Această filă arată solicitările de rețea ale browserului, inclusiv solicitările de încărcare a paginii, timpul necesar pentru a servi cererile și detalii despre fiecare. Aceste date pot fi folosite pentru a optimiza performanța de încărcare a paginii și pentru a remedia interogările.

Puteți utiliza fila Rețea împreună cu Consola JavaScript. De exemplu, puteți începe să depanați o pagină folosind consola și apoi să deschideți fila Rețea și să vedeți activitatea în rețea fără a reîncărca pagina.

Design receptiv

Site-urile web responsive își adaptează rapid aspectul și senzația pe o varietate de dispozitive: telefoane mobile, tablete, desktopuri și laptopuri. Dimensiunea ecranului, densitatea pixelilor și răspunsul la atingere sunt factori de care trebuie să luați în considerare atunci când proiectați site-uri web receptive. De asemenea, este important să luăm în considerare principiile designului responsive pentru ca un site web să fie accesibil și eficient, indiferent de dispozitivul pe care este deschis.

Browserele moderne (inclusiv Firefox și Chrome) oferă modele pentru aderarea la principiile de design receptiv atunci când se dezvoltă site-uri web și aplicații. Aceste modele emulează comportamentul unui anumit dispozitiv, ceea ce vă permite să testați și să analizați toate funcțiile site-ului.

Puteți citi mai multe despre acest lucru în ghidurile browserului:

• Modul de proiectare receptiv în Firefox

Concluzie

Acest tutorial oferă o privire de ansamblu rapidă asupra lucrului cu consola JavaScript în browserele web moderne. De asemenea, puteți găsi informații despre alte instrumente de dezvoltare utile aici.