Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

Aplicația API pentru linia de comandă Chrome DevTools conține un număr mare de funcții convenabile pentru efectuarea de sarcini simple: selectarea și verificarea elementelor DOM, afișarea datelor în format lizibil, rularea și verificarea profilelor și monitorizarea evenimentelor DOM.







Notă: acest API este disponibil numai în interiorul consolei. Nu puteți accesa linia de comandă API din scripturile din pagină.

$ _ returnează valoarea ultimei expresii executate.

În exemplul de mai jos, se execută o expresie simplă (2 + 2). Apoi, $ _ este executat. care are aceeași valoare:

În acest exemplu, expresia executată conținea o serie de nume. Executarea lui $ _. Lungimea va da lungimea matricei, iar expresia $ _ va avea valoarea ultimei expresii executate, adică 4:

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

În exemplul de mai jos, elementul din clasa medie este selectat în panoul Elemente. În consola $ 0 a avut același înțeles:

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

În imaginea de mai jos, pe aceeași pagină este selectat un alt element. $ 0 se referă acum la acest element și la $ 1 la cel precedent:

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

$ (selector)

$ (selectorul) returnează o referință la primul element DOM cu selectorul CSS specificat. Această funcție este scurtă pentru funcția document.querySelector ().

Acest exemplu returnează o referință la primul element în document:

Faceți clic dreapta pe rezultat și selectați "Descoperă în panoul Elemente" pentru a găsi elementul din DOM sau "Derulați în Vizualizare" pentru ao vedea pe pagină.

Exemplul de mai jos returnează o trimitere la elementul selectat și afișează proprietatea lui src:

Notă: dacă utilizați biblioteci ca jQuery care utilizează caracterul $. atunci funcționalitatea acestei biblioteci va fi utilizată.

$$ (selector)

$$ (selectorul) returnează o serie de elemente care conțin selectorul specificat. Această comandă este echivalentă cu a apela document.querySelectorAll ().

Următorul exemplu utilizează $$ () pentru a crea o matrice din toate elementele în document și returnează proprietatea src a fiecărui element:

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

Notă: Apăsați Shift + Enter în consola pentru a merge la o linie nouă fără a executa scriptul.

$ x (calea) returnează o serie de elemente care satisfac această expresie XPath.

Acest exemplu va returna toate elementele

:

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți






Și asta - toate elementele

. conținând un element :

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

clear () șterge istoricul consolei.

depanare (funcție)

Când apelați această funcție, este apelat un program de depanare, care vă permite să treceți prin el în panoul Surse.

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

Utilizați undebug (fn) pentru a finaliza depanarea sau interfața pentru a elimina toate punctele de întrerupere.

Pentru mai multe informații despre puncte de întrerupere, citiți articolul Debug with Breakpoints.

dir (obiect)

dir (obiect) afișează lista tuturor proprietăților obiectului specificat. Această metodă este înlocuirea metodei console.dir ().

Următorul exemplu prezintă diferența dintre apelarea document.body pe linia de comandă și utilizarea dir () pentru a afișa același element:

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

Pentru mai multe informații, consultați secțiunea console.dir () din API-ul consolei.

dirxml (obiect)

dirxml (obiect) imprimă reprezentarea XML a obiectului specificat. Această metodă este echivalentă cu metoda console.dirxml ().

inspectați (obiect / funcție)

inspectați (obiect / funcție) deschideți și selectează elementul sau obiectul specificat în panoul corespunzător: Elemente sau Profiluri.

Acest exemplu deschide document.body în panoul Elemente:

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

Când funcția este transferată, se deschide documentul din panoul Surse.

getEventListeners (obiect)

getEventListeners (obiect) returnează toți ascultătorii evenimentului care sunt legați la obiectul specificat. Valoarea returnată este un obiect care conține matrice pentru toate tipurile de evenimente găsite (de exemplu, "clic" sau "keydown"). Elementele fiecărei matrice sunt obiecte care descriu un ascultător de fiecare tip. De exemplu, exemplul următor va afișa toate ascultătorii evenimentului pentru obiectul documentului:

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

Dacă mai mult de un ascultător este legat de un obiect, atunci matricea conține elemente pentru fiecare dintre ele. De exemplu, aici doi ascultători ai evenimentului "mousedown" sunt legați de elementul #scrollingList:

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

chei (obiect)

cheile (obiect) returnează un șir de nume de proprietăți ale obiectelor. Pentru a obține valoarea proprietății, utilizați valorile ().

Să presupunem că cererea dumneavoastră are următorul obiect declarat:

Lăsați jucătorul1 să fie declarat global, apoi tastele (player1) și valorile (player1) vor afișa următoarele:

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

monitor (funcție)

Când apelați funcția specificată, în consola apare un mesaj care indică faptul că această funcție a fost apelată cu argumentele corespunzătoare.

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

Pentru a anula, utilizați funcția unmonitor (funcția).

monitorEvents (obiect, [evenimente])

Când apare unul dintre evenimentele specificate cu obiectul specificat, obiectul Eveniment este scris în consola. Puteți specifica un eveniment specific, o matrice de evenimente sau unul dintre "tipurile" de evenimente. Exemplele sunt prezentate mai jos.

Următoarea interogare monitorizează toate modificările dimensiunii obiectului ferestrei.

Caracteristici convenabile ale consolei dezvoltatorului crom, despre care probabil nu știți

Această interogare monitorizează toate evenimentele de "redimensionare" și "derulare" în obiectul ferestrei:

De asemenea, puteți specifica unul dintre tipurile "de evenimente" disponibile din tabelul de mai jos:

Tipul evenimentului / Evenimente conexe







Trimiteți-le prietenilor: