Kényelmi funkciók a fejlesztői konzol króm, amelyből nem lehet tudni
Chrome API DevTools parancssor tartalmaz számos kényelmi funkciók elvégzéséhez egyszerű feladatok: kiválasztás és ellenőrzés DOM elemeket jelenítse meg az adatokat olvasható formátumban, és a szkennelés elindításához profiler és DOM eseményfigyelést.
Megjegyzés: Ez az API csak a konzolban. Jut parancsfájlokból az oldalon nem lehet parancssorból API.
$ _ Értékét adja vissza az utolsó kifejezés kivégezték.
Az alábbi példában, egy egyszerű expressziós végzünk (2 + 2). Ezután a $ _. hozzárendelt ugyanaz az értéke:
Ebben a kiviteli alakban, egy olyan expressziós tartalmazó tömb nevek. . Kivégzése $ _ ad hossza hossza a tömb, és a nagyon kifejeződése az értéke $ _ tart végrehajtott kifejezés, azaz 4:
Az alábbi példában egy kiválasztott osztály elemei lapelem közegben. A konzol $ 0 megkapta ugyanazt jelentik:
Az alábbi képen kiválaszt egy másik elemet ugyanazon az oldalon. Most $ 0 utal, hogy a tételt, és a $ 1 - az előző:
$ (Választó)
$ (Selector) visszaad egy hivatkozást az első DOM elemet a megadott CSS-választó. Ez a funkció - rövidítése document.querySelector () függvényt.
Ez a példa visszatér utalás az első eleme a dokumentumban:
Kattintson a jobb gombbal az eredményt, és válassza ki a „Reveal elemei Panel” kíván egy elemet a DOM vagy a „Scroll be View” látni az oldalon.
A következő példa egy hivatkozást az újonnan kiválasztott elem, és megjeleníti annak tulajdonságait src:
Megjegyzés: Ha a könyvtár, mint a jQuery, ami a $ jelet. akkor használja a funkcionalitást a könyvtárban.
$$ (választó)
$$ (választó) vissza egy tömbben elemek, amely az említett kiválasztó. Ez a parancs egyenértékű hívó document.querySelectorAll ().
A következő példa a $$ (), hogy hozzon létre egy sor valamennyi eleme a dokumentumban, és visszaadja az src tulajdonság az egyes elemek:
Megjegyzés: Kattintson a konzol Shift + Enter kezdeni egy új sort futtatása nélkül a forgatókönyvet.
$ X (path) vissza egy tömbben elemek, amelyek megfelelnek ennek a XPath kifejezést.
Ez a példa visszatér minden elemét
:
És ez - minden elemét
. tartalmazó elem :
clear () törli a történelem, a konzol.
debug (funkció)
Amikor hívja ezt a funkciót nevezik debugger, amely lehetővé teszi, lépésről lépésre, hogy teljesítse azt a Sources panel.
Használja undebug (fn) a teljes hibakereső felületet, vagy távolítsa el az összes töréspont.
További információ a töréspontok olvasni a cikket Debug a töréspont.
dir (objektum)
dir (objektum) megjelenít egy lista az összes tulajdonságait az említett tárgy. Ez a módszer - a módszer helyett console.dir ().
A következő példa azt mutatja, a különbség hívó document.body a parancssor és használata dir () megjelenítéséhez azonos elem:
További információkért lásd a console.dir () az API-konzolon.
DirXML (objektum)
DirXML (tárgy) jeleníti meg az XML-alapú ábrázolását a megadott objektumot. Ez a módszer egyenértékű console.dirxml ().
vizsgáljuk (objektum / funkció)
vizsgáljuk (objektum / funkció) nyit, és kiválasztja az említett elem vagy tárgy a megfelelő panel: Elements vagy profilok.
Ez a példa megnyitja document.body a Elements panel:
Ha az átviteli függvény megnyitja a dokumentumot a Sources panel.
getEventListeners (objektum)
getEventListeners (tárgy) visszaadja az összes esemény hallgatók csatlakozik a megadott objektumot. Visszatérési érték - egy tárgyat tartalmazó tömbök mind megtalálhatók típusú események (pl „klikk” vagy „keydown”). Az elemek a minden egyes tömb - olyan objektumok, amelyek leírják az egyes típusú hallgató. Például az alábbi példa kiírja az összes hallgatók a tárgy esemény dokumentumot:
Ha az objektum vonzott több mint egy hallgató, a tömb tartalmaz elemeket mindegyik. Például van egy elem #scrollingList kötött két esemény hallgató „mousedown”:
kulcsok (tárgy)
kulcsok (tárgy) adja vissza egy tömbben nevét objektum tulajdonságai. Ahhoz, hogy az ingatlan értéke használati értékeket ().
Tegyük fel, hogy az alkalmazás nyilvánítják a következő objektumot:
Hagyja player1 nyilvánítják globális, majd gombok (player1) és értékek (player1) jeleníti meg az alábbiakat:
monitor (funkció)
Ha a függvény meghívásával a konzol egy üzenettel jelzi, hogy ez a funkció már az úgynevezett a megfelelő érveket.
Törléséhez használja unmonitor (funkció).
monitorEvents (tárgy, [események])
Amikor az egyik ilyen esemény történik az adott objektum, esemény objektum írva a konzolba. Megadhat egy konkrét esemény, vagy egy tömb események egyike a „fajta” az események. Az alábbi példák.
A következő lekérdezés figyeli minden változás ablak méretét az objektum.
Ez a kérés követése események „átméretezni” és a „scroll” az objektum ablakban:
Azt is beállíthatja az egyik rendelkezésre álló „típusú” eseményeket az alábbi táblázat:
Esemény típus / lényeges események