Mozilla pretraživač nudi mnogo različitih alata za rad i poboljšanje performansi. Jedno od ovih poboljšanja omogućava rad sa cijelom konzolom pretraživača.

Šta je konzola pretraživača

Ovaj element je isti kao standardna web konzola, ali vam omogućava da radite ne s pojedinačnim karticama, već s tražilicom u cjelini. Odnosno, tamo se bilježe informacije o greškama, zahtjevima i drugim radnjama.

Alat bilježi informacije ne samo o zasebnoj kartici, već io dodacima, kao i kod samog pretraživača. Da biste koristili druga poboljšanja koja su dostupna u standardnim kompletima za web razvoj, vrijedi pribjeći korištenje alatne trake. Konzola se takođe koristi za izvršavanje različitih JavaScript izraza.

Vrijedi uzeti u obzir da je od 30. ova Firefox linija onemogućena. Da biste pokrenuli konzolu u Mozilla-i, morate postaviti about:config - devtools.chrome.enabled liniju na pravi kod. Također možete koristiti drugu metodu da aktivirate poboljšanje.

Morate označiti kućicu pored "Omogući alate i dodatke za otklanjanje grešaka u pregledniku Chrome" za Firefox 40, u prethodnim verzijama naziv ovog polja može biti malo drugačiji.

Nakon otvaranja prozora programera, možete vidjeti da je sučelje podijeljeno na 3 dijela:

Karakteristike rada u načinu rada web programera

Da biste maksimalno iskoristili sva poboljšanja, morate znati ne samo kako otvoriti konzolu, već i neke tajne rada s njom.

Jedan vrlo koristan alat je console.log. Služi za otklanjanje grešaka na izlazu, ali napredni korisnici pribegavaju i nekoliko drugih metoda rada sa informacijama. Na primjer, način na koji radi console.log je prilično sličan printf.

Također u Firefoxu je moguće koristiti obrazac "%c" za primjenu drugog argumenta prilikom formatiranja stila. Mozilla će prikazati malu sivu ikonu pored informacija kao što su upozorenja ili poruke o grešci. To znači da ova obavještenja zahtijevaju pažnju. Poruke za otklanjanje grešaka nisu označene u ovoj tražilici, jer su, prema riječima programera, zastarjele i umjesto njih treba koristiti console.log ().

Vrijedi napomenuti da u ovoj tražilici možete koristiti nekoliko vrijednosti odjednom. Da biste to učinili, morate ih odvojiti zarezima, što je vrlo zgodno kada se uvršte u jedan red.

Korištenje tajmera i stanja spremanja

Omogućen način rada programera podrazumijeva mogućnost korištenja tajmera. Može se pokrenuti preko console.time. Zaustavljanje tajmera se vrši pomoću console.timeEnd. Vrijeme se prikazuje u milisekundama.

Odbrojavanje počinje od trenutka kada je tajmer aktiviran. Osim toga, možete kreirati vremenske oznake. Koriste se u sprezi s vremenskim mjerenjem HTTP prometa kako bi se odredilo koliko je vremena bilo potrebno da se dio koda izvrši.

Vrlo često, za referencu ili praćenje dnevnika, trebate spremiti informacije. Ništa ne treba učiniti da se sačuva stanje ili podaci prikazani između otvaranja stranica. Firefox će automatski sačuvati ove informacije. Možete čak i izbrisati poruku nakon aktiviranja dugmeta u gornjem desnom uglu ili ponovnim otvaranjem panela.

Otvaranje konzole u Mozilla Firefox-u je prilično jednostavno. Da biste to učinili, morate imati osnovne vještine koje će vam pomoći u kontroli preglednika, pa čak i poboljšati ga ako je potrebno.

Mnogo različitih Java skripti za društvene mreže već je objavljeno na našoj stranici. I u opisu svake skripte opišite detaljna uputstva za njihovo pokretanje... Ovo je beskorisno. Odlučili smo da napišemo punopravni priručnik koji opisuje instalaciju skripti na svim pretraživačima, kao i da uzmemo u obzir prisustvo nekoliko metoda instalacije na jednom određenom pretraživaču i opišemo ih sve.

Pokretanje Java skripti kroz konzolu pretraživača:

Sada, kao što znate, pokretanje skripti kroz konzolu je najpopularniji i jednostavan, i što je najvažnije, radni način njihovog korištenja. Stoga, ovdje ćemo početi - sa načinima za ulazak u konzolu za svaki pretraživač.

Konzola u Mozilla Firefoxu:

Najlakši način da dođete do web konzole u pretraživaču Mozilla Firefox je pomoću prečice na tastaturi. ctrl + Shift + K. Kliknite i pojavit će se konzola.

Konzola u Google Chromeu i drugim preglednicima baziranim na Chromiumu:

Google Chrome, Opera 15+, Amigo, Orbitum i drugi pretraživači zasnovani na Chromium-u također imaju način pokretanja web konzole pomoću prečaca. Da biste to učinili, istovremeno pritisnite ctrl + Shift + J.

Konzola u Operi 12:

Da biste pokrenuli web konzolu u pretraživaču Opera stare generacije (ne starijoj od verzije 12), trebate koristiti prečicu na tipkovnici ctrl + Shift + I. Ovo će pokrenuti Opera Dragonfly, alatnu traku za programere. Nakon otvaranja idite na karticu Konzola.

Konzola u Internet Exploreru:

Da biste otvorili konzolu u Internet Explorer web pretraživaču, prvo morate kliknuti na dugme F12, a zatim pritisnite kombinaciju ctrl + 2 (dva na centralnom panelu, ne u odeljku Num).

Konzola u Safariju:

U Safariju, prije otvaranja konzole, obavezno unesite postavke pretraživača ( oprema u gornjem desnom uglu" Postavke… » Dodaci) i povežite opciju Prikaži meni za razvoj na traci menija. Nakon toga, konzola se može pozvati prečicom na tastaturi ctrl + alt + C.

Sve skripte se unose u konzolu u posebno određeno polje pored ikone strelice (pogledajte snimke ekrana, područja za unos skripti su označena crvenom bojom). Skripte se pokreću pritiskom na dugme Enter. Nakon što unesete i pokrenete bilo koju skriptu, vidjet ćete sve komentare ili greške dok se izvršavaju.

Pokretanje Java skripti iz adresne trake pretraživača:

Metoda pokretanja skripti iz adresne trake pretraživača je starija metoda, ali čak i tradicionalna. U početku su sve skripte pokretane na ovaj način. Ali trendovi se mijenjaju, svijet se razvija. U većini pretraživača, nakon umetanja koda skripte u adresnu traku, morate ručno dodati kod da biste ga pokrenuli, au nekim pretraživačima adresna traka uopće ne obrađuje java skripte.

Adresna traka u Mozilla Firefoxu:

Nažalost, nijedna od najnovijih verzija pretraživača Mozilla Firefox ne podržava obradu skripti putem adresne trake. Iako je u ranijim verzijama ova opcija bila prisutna, u modernom Firefoxu programeri su je odlučili odbiti.

Adresna traka u Google Chromeu i drugim preglednicima baziranim na Chromiumu:

U pretraživaču Google Chrome i bilo kom drugom pretraživaču izgrađenom na njegovim izvornim kodovima, kao što su Opera 15+, Amigo, Orbitum i drugi, možete pokrenuti skripte u adresnoj traci. Ali! Nakon umetanja skripte, morate dodati riječ ispred nje javascript:(zajedno sa dvotočkom), u suprotnom (zahvaljujući takvom fenomenu kao što je omnibox) umjesto pokretanja skripte, doći će do preusmjeravanja na tražilicu.

Adresna traka u Operi 12:

U pretraživaču Opera 12 stvari su mnogo bolje. Da biste pokrenuli skriptu, samo je zalijepite u adresnu traku i pokrenite je. Ne bi trebalo biti nikakvih problema sa ovim.

Adresna traka u Internet Exploreru:

U ovom pretraživaču, kao i u Google Chrome-u i slično, nakon umetanja skripte u adresnu traku, na samom početku potrebno je dodati javascript:(zajedno sa dvotočkom), inače skripta neće raditi.

Adresna traka u Safariju:

Pa, u Safariju stvari su jednako dobre kao u Operi 12. Samo zalijepite postojeću skriptu u adresnu traku i pokrenite je.

Korištenje dodataka za preglednik za pohranjivanje i pokretanje skripti:

Ako skripte treba stalno da se koristi, onda se morate petljati s njima, kopirati ih sa stranice ili tekstualne datoteke, zalijepiti ih u adresnu traku ili konzolu svaki put. Slažem se, nije zgodno. Zbog toga su izmišljene posebne ekstenzije (dodatci) za pretraživače, dizajnirane za skladištenje i pokretanje skripti. Govorimo o dva dodatka: Greasemonkey za Mozilla Firefox i Tampermonkey za Google Chrome.

Greasemonkey dodatak za Mozilla Firefox:

Dodatak Greasemonkey za Mozilla Firefox vam omogućava da kreirate, sačuvate i pokrenete skripte koje je dodao korisnik. Budi pazljiv! Kada koristite skripte za uklanjanje ili promjenu nečega, odmah nakon što ih dodate u dodatak, automatski će se pokrenuti. Izričito ne preporučujemo dodavanje skripti u dodatak, na primjer, za brisanje postova sa VKontakte zida kada je stranica VKontakte otvorena (nikad se ne zna).

Uputstvo za upotrebu:

Tampermonkey dodatak za Google Chrome:

Dodatak Tampermonkey sličan je dodatku Greasemonkey za Firefox i omogućava vam kreiranje, spremanje i pokretanje prilagođenih skripti na isti način. Budi pazljiv! Kada koristite skripte za uklanjanje ili promjenu nečega, odmah nakon što ih dodate u dodatak, automatski će se pokrenuti. Izričito ne preporučujemo dodavanje skripti u dodatak, na primjer, za brisanje postova sa VKontakte zida kada je stranica VKontakte otvorena (nikad se ne zna).

Uputstvo za upotrebu:


Ovako rade dodaci Greasemonkey i Tampermonkey. Sve je brzo i jednostavno. Dodate skripte ne nestaju nigdje, također se mogu uključiti i isključiti u bilo koje vrijeme.

zaključak:

Sve metode opisane za pokretanje Javascripta zasnovane su na najnovijim verzijama popularnih web pretraživača. Ako koristite drugi pretraživač ili stariju verziju pretraživača, a metode pokretanja skripti u njemu se razlikuju od onih opisanih u ovom članku, javite nam u komentarima. |

Moderni pretraživači pružaju ugrađene razvojne alate za JavaScript i druge tehnologije. Ovi alati uključuju konzolu koja izgleda kao sučelje ljuske, kao i alate za inspekciju DOM-a, otklanjanje grešaka i analizu mrežne aktivnosti.

Konzola se može koristiti za evidentiranje informacija kao dio procesa razvoja JavaScripta. Konzola vam takođe omogućava interakciju sa web stranicom izvršavanjem JavaScript izraza u kontekstu stranice. U suštini, konzola pruža mogućnost pisanja JavaScript koda i upravljanja njime ako je potrebno.

Ovaj vodič će vas naučiti kako koristiti JavaScript konzolu u vašem pretraživaču i upoznati vas sa drugim ugrađenim razvojnim alatima koji bi vam mogli biti korisni.

Rad sa JavaScript konzolom u pretraživaču

Većina modernih veb pretraživača koji podržavaju HTML i XHTML podrazumevano omogućavaju pristup konzoli za programere, gde možete da radite sa JavaScript-om u interfejsu nalik terminalnoj ljusci. U ovom odjeljku ćete naučiti kako pristupiti konzoli u Firefoxu i Chromeu.

Firefox pretraživač

Ovi alati vam omogućavaju da pregledate i uređujete DOM elemente, kao i da tražite HTML objekte povezane sa određenom stranicom. DOM može naznačiti da li dio teksta ili slike ima ID atribut i može odrediti vrijednost tog atributa.

Osim toga, na bočnoj traci ili ispod DOM panela možete pronaći CSS stilove koji se koriste u HTML dokumentu ili listi stilova.

Da biste uredili DOM u realnom vremenu, dvaput kliknite na odabrani element. Na primjer, možete pokušati okrenuti oznaku

v

.

Ponovo, nakon osvježavanja, stranica će se vratiti u prethodni oblik.

Mrežna kartica

Kartica Mreža vam omogućava praćenje i snimanje mrežnih zahtjeva. Ova kartica prikazuje mrežne zahtjeve pretraživača, uključujući zahtjeve za učitavanje stranice, vrijeme zahtjeva za servisiranje i detalje o svakom zahtjevu. Možete koristiti ove podatke da optimizirate performanse učitavanja stranice i upite za otklanjanje grešaka.

Možete koristiti karticu Mreža zajedno sa JavaScript konzolom. Na primjer, možete započeti otklanjanje grešaka na stranici pomoću konzole, a zatim otvoriti karticu Mreža i pogledati mrežnu aktivnost bez ponovnog učitavanja stranice.

Responsive Design

Responzivne web stranice brzo prilagođavaju svoj izgled i osjećaj različitim uređajima: mobilnim telefonima, tabletima, stolnim i laptopima. Veličina ekrana, gustoća piksela i reakcija na dodir faktori su koje treba uzeti u obzir pri dizajniranju responzivnih web stranica. Također je važno uzeti u obzir principe responzivnog dizajna kako bi web stranica bila dostupna i produktivna, bez obzira na uređaju na kojem je otvorena.

Moderni pretraživači (uključujući Firefox i Chrome) pružaju modele za pridržavanje principa responzivnog dizajna pri razvoju web stranica i aplikacija. Ovi modeli oponašaju ponašanje određenog uređaja, što vam omogućava da testirate i analizirate sve funkcije stranice.

Više o tome možete saznati u priručnicima preglednika:

• Responzivni način dizajna u Firefoxu

Zaključak

Ovaj vodič pruža kratak pregled rada sa JavaScript konzolom u modernim web pretraživačima. Ovdje također možete pronaći informacije o drugim korisnim razvojnim alatima.