Kako otvoriti konzolu Google Chrome. Ali koja je vaša predmemorija i zašto biste je trebali brisati

Preglednik poznate ruske korporacije Yandex jedan je od najpopularnijih preglednika na internetu na ruskom govornom području. Svoju popularnost duguje naprednoj funkcionalnosti i obilju skrivenih značajki, od kojih mnoge koriste profesionalci u tom procesu.

Ovi alati uključuju konzolu koja se vrlo često koristi za pronalaženje i popravljanje pogrešaka u pregledniku, kao i za obavljanje niza drugih zadataka.

Značajke konzole

Prije nego što shvatite kako otvoriti konzolu u pregledniku Yandex, trebali biste odlučiti što je to i za što se takav alat može koristiti. Kao što znate, preglednik Yandex razvijen je na temelju dva druga već postojeća projekta, odnosno Chromea, koji je svojim programerima omogućio implementaciju niza razvoja u vlastitom pregledniku. Upravo se u tim programima pojavila konzola koja se može koristiti za rješavanje širokog spektra zadataka.

To uključuje:

• Izrada web stranica;
• Pregledajte kodove učitanih stranica;
• Provjera izvedbe skripti;
• Identifikacija pogrešaka i kvarova na stranicama.

VAŽNO! Uzimajući u obzir važnost takvih zadataka, konzolu sa sigurnošću možemo nazvati jednim od glavnih alata za web developera.

S tim u vezi, iznimno je važno naučiti kako otvoriti takav alat pomoću mogućnosti preglednika. No, treba imati na umu da nespreman korisnik koji nema odgovarajuće vještine za rad s takvim alatima treba paziti da ne poremeti rad preglednika.

Kako otvoriti?

Konzolu u ovom pregledniku možete otvoriti na dva načina odjednom. Prvi je grafički, uključuje korištenje glavnog izbornika preglednika, dok drugi uključuje korištenje vrućih tipki. Za početnike se čini da je prvi najprikladniji.

SAVJET! Početnicima ih je teško zapamtiti, ali njihova upotreba omogućuje vam puno brži pristup pravom alatu.

U ovom pregledniku postoji nekoliko konzola, a svaka služi za rješavanje određenih problema. Da biste im pristupili grafičkom metodom, trebate pritisnuti poseban gumb koji izgleda kao tri vodoravne pruge, a zatim odabrati odjeljak Dodatni. U njemu biste trebali otići u kategoriju Dodatni alati, nakon čega ćete morati odabrati željenu konzolu.

Prečice

Kako biste uštedjeli vrijeme, vrlo je zgodno koristiti prečace dok je preglednik pokrenut, jer vam omogućuju puno brže kretanje do željene stavke ili izbornika. Isto vrijedi i za konzole, od kojih svaka ima svoje individualne tipke prečaca za pozivanje.

Dakle, da biste ispitali izvorni kod trenutno gledane stranice, trebate pritisnuti Ctrl + U, što će odmah otvoriti ovaj alat. Da biste pristupili alatima za razvojne programere, trebate pritisnuti tri tipke odjednom: Ctrl + Shift + I. Njegove mogućnosti u pravilu ne zanimaju prosječnog korisnika koji se ne bavi razvojem web stranica ili aplikacija.

Konzola je možda i najvažnija, jer je zaslužna za funkcioniranje raznih skriptiranih elemenata na stranici. Svako oglašavanje, interaktivne aplikacije i druge vrste sadržaja kontroliraju se skriptama, što otežava precjenjivanje mogućnosti ove konzole. Da biste mu pristupili, pritisnite Ctrl + Shift + J, što će vam omogućiti da vidite kodove koji su korišteni na stranici.

Video za pomoć

Yandex može biti koristan ne samo za prikladno traženje informacija i čitanje zanimljivih internetskih stranica, već i za stvaranje tih resursa.

U tu svrhu opremljena je posebnom funkcijom "Alati za razvoj" (sada dostupna u svim preglednicima). Pomaže korisniku Yandexa da prati status svoje web stranice:

• pregledom HTML koda stranice;
• paziti na izvršenje naredbi koje traže posjetitelji;
• promatranje svih radnji koje se odvijaju na resursu;
• učenje o uobičajenim pogreškama koje se javljaju kada skripte rade.

Kako mogu otvoriti konzolu u Yandexu?

Lako je otvoriti konzolu u Yandexu. Da biste to učinili, morate slijediti ove korake:

• Idite na svoj preglednik.
• Kliknite na izbornik za brzi pristup (gumb "Postavke preglednika Yandex" u gornjem desnom kutu upravljačke ploče, ikona u obliku tri vodoravne paralelne pruge).
• Pomaknite se prema dolje do posljednje stavke na popisu koji se otvara pod nazivom "Advanced" ili "Advanced" (na engleskom "Advanced").
• Otvorit će se novi popis, pronaći stavku "Više alata" (na engleskom "Više alata").
• Zatim morate odabrati između tri funkcije: Prikaži kod stranice, Alati za razvojne programere i JavaScript konzola.

Kako brzo otvoriti konzolu u Yandexu?

Ako želite brže koristiti navedene funkcije preglednika, možete koristiti prečace:

• Za prikaz koda stranice pritisnite tipke "Ctrl" i "U" odjednom.
• Da biste koristili alate za razvojne programere, pritisnite Shift, Ctrl i L zajedno.
• Za otvaranje konzole i pregled zapisnika pogrešaka tijekom rada skripti, pritisnite tipke "Shift", "Ctrl" i "J" odjednom.

Zašto mi treba Java Script konzola?

Konzola korisnicima Yandex preglednika pruža mogućnost praćenja kvalitete rada skripti koje se objavljuju na internetskim resursima koji se pregledavaju. Uz pomoć ove funkcije, web programeri prate rad napisanih skripti, rješavaju se nastalih pogrešaka. Pomoću konzole možete pratiti rad skripti korak po korak, izvođenje svake stavke programskog koda.

Za obične korisnike preglednika Yandex, podaci sadržani u konzoli koja se otvara nisu osobito korisni (budući da im te informacije nisu tražene). Ali u nekim slučajevima, znanje kako ga koristiti može pomoći. Ako vam bilo koji internetski resurs ne radi, često se pojavljuju poruke o pogrešci, općenito ne možete koristiti stranicu, kontaktirajte tehničku podršku, gdje će vam objasniti uzrok i rješenje problema.

API naredbenog retka Chrome DevTools sadrži mnoge prikladne funkcije za obavljanje jednostavnih zadataka: odabir i provjeru DOM elemenata, prikaz podataka u čitljivom formatu, pokretanje i provjeru valjanosti profilera i praćenje DOM događaja.

Bilješka: ovaj API je dostupan samo unutar konzole. Ne možete pristupiti API naredbenom retku iz skripti na stranici.

$_

$ _ vraća vrijednost posljednjeg izvršenog izraza.

Primjer u nastavku izvršava jednostavan izraz (2 + 2). Zatim se izvršava $ _, kojem se dodjeljuje ista vrijednost:

U ovom primjeru, izvršeni izraz sadržavao je niz imena. Izvršavanje $ _. Length će dati duljinu niza, a sam izraz $ _ će uzeti vrijednost posljednjeg izvršenog izraza, a to je 4:

$0 – $4

Naredbe $ 0, $ 1, $ 2, $ 3 i $ 4 rade kao veze na zadnjih 5 DOM elemenata koji su pregledani na ploči Elementi ili na zadnjih 5 JS objekata hrpe koji su odabrani na ploči Profili. $ 0 vraća posljednju odabranu stavku ili objekt, $ 1 vraća onu prije, i tako dalje.

U donjem primjeru, u panelu Elementi, odabran je element srednje klase. U konzoli je 0 dolara poprimilo isto značenje:

Na donjoj slici odabrana je druga stavka na istoj stranici. 0 $ sada se odnosi na ovu stavku, a 1 $ na prethodnu:

$ (selektor)

$ (selektor) vraća referencu na prvi DOM element s navedenim CSS selektorom. Ova funkcija je skraćenica za document.querySelector ().

Desnom tipkom miša kliknite rezultat i odaberite "Otkrij na ploči elemenata" da biste pronašli element u DOM-u ili "Pomaknite se do prikaza" da biste ga vidjeli na stranici.

Bilješka: Ako koristite biblioteke poput jQueryja koje koriste simbol $, tada će se koristiti funkcionalnost te biblioteke.

$$ (selektor)

$$ (selektor) vraća niz elemenata koji sadrže navedeni selektor. Ova naredba je ekvivalentna pozivanju document.querySelectorAll ().

Sljedeći primjer koristi $$ () za stvaranje niza svih elemenata u dokumentu i vraća svojstvo src svakog elementa:

Var slike = $$ ("img"); za (svaki u slikama) (console.log (images.src);)

Bilješka: Pritisnite Shift + Enter na konzoli da biste otišli na novi redak bez izvršavanja skripte.

$ x (put)

$ x (put) vraća niz elemenata koji odgovaraju zadanom XPath izrazu.

Ovaj primjer će vratiti sve elemente

$ x ("// p")

A ovo su svi elementi

Element koji sadrži :

$ x ("// p [a]")

čisto ()

clear () briše povijest konzole.

Čisto ();

kopija (objekt)

copy (objekt) kopira prikaz niza navedenog objekta u međuspremnik.

Kopija (0 USD);

otklanjanje pogrešaka (funkcija)

Kada se ova funkcija pozove, poziva se program za ispravljanje pogrešaka, koji vam omogućuje da prolazite kroz nju na ploči Izvori.

Otklanjanje pogrešaka (getData);

Upotrijebite poništavanje pogrešaka (fn) za zaustavljanje otklanjanja pogrešaka ili frontend za uklanjanje svih prijelomnih točaka.

dir (objekt)

dir (objekt) prikazuje popis svih svojstava navedenog objekta. Ova metoda je zamjena za metodu console.dir ().

Sljedeći primjer pokazuje razliku između poziva document.body u naredbenom retku i korištenja dir () za prikaz istog elementa:

Dokument.tijelo; dir (dokument.tijelo);

Za više informacija pogledajte odjeljak console.dir () u Console API-ju.

dirxml (objekt)

dirxml (objekt) ispisuje XML prikaz navedenog objekta. Ova metoda je ekvivalentna metodi console.dirxml ().

pregledati (objekt / funkcija)

inspect (objekt/funkcija) otvara se i odabire navedeni element ili objekt u odgovarajućoj ploči: Elementi ili Profili.

Ovaj primjer otvara document.body na ploči Elements:

Pregledati (dokument.tijelo);

Kada se proslijedi funkciji, ona otvara dokument u oknu Izvori.

getEventListeners (objekt)

getEventListeners (objekt) vraća sve slušatelje događaja pripojene navedenom objektu. Povratna vrijednost je objekt koji sadrži nizove za sve vrste pronađenih događaja (na primjer, "click" ili "keydown"). Elementi svakog niza su objekti koji opisuju slušatelja svake vrste. Na primjer, sljedeći primjer će prikazati sve slušatelje događaja za objekt dokumenta:

GetEventListeners (dokument);

Ako je više od jednog slušatelja spojeno na objekt, tada niz sadrži elemente za svaki od njih. Na primjer, ovdje su dva slušatelja za događaj "mousedown" priložena elementu #scrollingList:

Možete vidjeti svojstva svakog od ovih objekata:

ključevi (objekt)

keys (objekt) vraća niz naziva svojstava objekta. Koristite vrijednosti () da biste dobili vrijednosti svojstava.

Pretpostavimo da vaša aplikacija deklarira sljedeći objekt:

Var player1 = ("name": "Ted", "level": 42)

Neka player1 bude deklariran globalno, tada će ključevi (player1) i vrijednosti (player1) dati sljedeće:

monitor (funkcija)

Kada se pozove navedena funkcija, na konzoli se prikazuje poruka da je ova funkcija pozvana s odgovarajućim argumentima.

Funkcija zbroj (x, y) (povrat x + y;) monitor (zbroj);

Za otkazivanje koristite unmonitor (funkciju).

monitorEvents (objekt,)

Kada se na navedenom objektu dogodi jedan od navedenih događaja, objekt Event se zapisuje na konzolu. Možete odrediti određeni događaj, niz događaja ili jednu od "vrsta" događaja. Pogledajte primjere u nastavku.

Sljedeći zahtjev prati sve promjene veličine objekta prozora.

MonitorEvents (prozor, "promjena veličine");

Ovaj zahtjev prati sve događaje "promjene veličine" i "scroll" na objektu prozora:

MonitorEvents (prozor, ["promjena veličine", "scroll"])

Također možete postaviti jednu od dostupnih "vrsta" događaja iz donje tablice:

Na primjer, ovaj upit prati sve događaje tipa "ključ" na odabranom elementu na ploči Elementi:

MonitorEvents ($ 0, "ključ");

Evo primjera izlaza nakon upisivanja znakova u tekstni okvir:

profil () i kraj profila ()

Za početak profiliranja:

Profil ("Moj profil")

Završiti:

Kraj profila ("Moj profil")

Profili se također mogu ugniježditi:

Profil ("A"); profil ("B"); kraj profila ("A"); kraj profila ("B");

Proizlaziti:

Bilješka: Profileri se mogu izvoditi istodobno i ne moraju se zatvarati kako bi se kreirali.

tablica (podaci,)

Izlaz podataka o objektu u formatu tablice. Na primjer, da biste prikazali popis imena, trebate učiniti sljedeće:

Var names = (0: (ime: "John", prezime: "Smith"), 1: (ime: "Jane", prezime: "Doe")); tablica (imena);

poništiti pogreške (funkcija)

undebug (funkcija) zaustavlja ispravljanje pogrešaka navedene funkcije.

Otklanjanje pogrešaka (getData);

nenadgledanje (funkcija)

unmonitor (funkcija) prestaje pratiti navedenu funkciju.

Unmonitor (getData);

unmonitorEvents (objekt,)

unmonitorEvents (objekt,) prestaje pratiti navedeni objekt i događaje:

UnmonitorEvents (prozor);

Također možete prestati pratiti pojedinačne događaje:

MonitorEvents (0 $, "miš"); unmonitorEvents ($ 0, "mousemove");

vrijednosti (objekt)

values ​​(objekt) vraća niz koji sadrži vrijednosti svih svojstava navedenog objekta.