Зручні можливості консолі розробника Chrome, про які ви можете не знати


API командного рядка Chrome DevTools містить велику кількість зручних функцій для виконання простих завдань: вибору і перевірки елементів DOM, відображення даних в читаному форматі, запуску і перевірки профілювальника і моніторингу подій DOM.

Примітка: цей API доступний тільки усередині консолі. Отримати доступ до командного рядка API із скриптів на сторінці не можна.

$_

$_ повертає значення останнього виконаного вираження.

У прикладі нижче виконується просте вираження (2 + 2). Потім виконується $_, якому привласнюється те ж саме значення:

В даному прикладі виконане вираження містило масив імен. Виконання $_.length дасть довжину масиву, а саме вираження $_ набуде значення останнього виконаного вираження, тобто 4:

$0$4

Команди $0, $1, $2, $3 і $4 працюють як посилання на останні 5 елементів DOM, які були проглянуті в панелі Elements, або на останні 5 JS- об’єктів з купи, які були вибрані в панелі Profiles. $0 повертає елемент або об’єкт, вибраний пізніше за усіх, $1 повертає той, що був перед ним, і так далі.

У прикладі нижче в панелі Elements вибраний елемент класу medium. У консолі $0 набув такого ж значення:

На картинці нижче вибраний інший елемент на тій же сторінці. $0 тепер відноситься до цього елементу, а $1 – до попереднього:

$(selector)

$(selector) повертає посилання на перший елемент DOM з вказаним CSS- селектором. Ця функція – скорочення для функції document.querySelector ().

Цей приклад повертає посилання на перший елемент у документі:

Кликніть правою кнопкою миші по результату і виберіть “Reveal in Elements Panel” для пошуку елементу в DOM або “Scroll in to View” для того, щоб побачити його на сторінці.

Приклад нижче повертає посилання на тільки що вибраний елемент і відображає його властивість src:

Примітка: Якщо ви використовуєте бібліотеки ніби jQuery, які використовують символ $, те використовуватиметься функціональність цієї бібліотеки.

$$(selector)

$$(selector) повертає масив елементів, що містять вказаний селектор. Ця команда еквівалентна виклику document.querySelectorAll ().

Наступний приклад використовує $$() для створення масиву з усіх елементів у документі і повертає властивість src кожного елементу:

var images = $$ ('img');for (each in images) { console.log (images[each].src);}

Примітка: Натисніть в консолі Shift + Enter для переходу на новий рядок без виконання скрипта.

$x (path)

$x (path) повертає масив елементів, які задовольняють цьому вираженню XPath.

Цей приклад поверне усі елементи

:

$x ("//p")

А цей – усі елементи

, що містять елемент :

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

clear ()

clear () очищає історію консолі.

clear ();

copy (object)

copy (object) копіює строкове представлення вказаного об’єкту у буфер обміну.

copy ($0);

debug (function)

При виклику цієї функції викликається відладчик, який дозволяє покроково виконати її в панелі Sources.

debug (getData);

Використайте undebug (fn) для завершення відладки або інтерфейс для видалення усіх точок останову.

Для отримання детальнішої інформації про точки останову прочитайте статтю Debug with Breakpoints.

dir (object)

dir (object) відображає лістинг усіх властивостей вказаного об’єкту. Цей метод – заміна методу console.dir ().

Наступний приклад показує різницю між викликом document.body у командному рядку і використанням dir () для відображення того ж елементу :

document.body;dir (document.body);

Для отримання додаткової інформації ознайомтеся з розділом console.dir () у API консолі.

dirxml (object)

dirxml (object) виводить XML- представлення вказаного об’єкту. Цей метод еквівалентний методу console.dirxml ().

inspect (object/function)

inspect (object/function) відкриває і вибирає вказаний елемент або об’єкт у відповідній панелі: Elements або Profiles.

Цей приклад відкриває document.body у панелі Elements:

inspect (document.body);

При передачі функції вона відкриває документ в панелі Sources.

getEventListeners (object)

getEventListeners (object) повертає усі слухачі подій, прив’язані до вказаного об’єкту. Повертане значення – об’єкт, що містить масиви для усіх знайдених типів подій (наприклад, "click" чи "keydown"). Елементи кожного масиву – це об’єкти, які описують слухач кожного типу. Наприклад, наступний приклад виведе усі слухачі подій об’єкту document:

getEventListeners (document);

Якщо до об’єкту прив’язано більше за одного слухача, то масив містить елементи для кожного з них. Наприклад, тут до елементу #scrollingList прив’язані два слухачі події "mousedown":

Можна проглянути властивості кожного з цих об’єктів:

keys (object)

keys (object) повертає масив імен властивостей об’єкту. Для набуття значення властивостей використайте values ().

Припустимо, у вашому застосуванні оголошений наступний об’єкт:

var player1 ={ "name": " Ted", " level": 42 }

Нехай player1 оголошений глобально, тоді keys (player1) і values (player1) виведе наступне:

monitor (function)

При виклику вказаної функції в консоль виводиться повідомлення про те, що що ця функція була викликана з відповідними аргументами.

function sum (x, y) { return x + y;}monitor (sum);

Для відміни використайте unmonitor (function).

monitorEvents (object, [events])

Коли одно з вказаних подій відбувається з вказаним об’єктом, об’єкт Event записується в консоль. Можна вказати конкретну подію, масив подій або один з ” типів” подій. Приклади нижчі.

Наступний запит мониторит усі зміни розміру об’єкту window.

monitorEvents (window, " resize");

Цей запит мониторит усі події "resize" and "scroll" у об’єкті window:

monitorEvents (window, ["resize", " scroll"])

Ви також можете задати один з доступних ” типів” подій з таблиці нижче:

Тип події / відповідні події
mouse “mousedown”, ” mouseup”, ” click”, ” dblclick”, ” mousemove”, ” mouseover”, ” mouseout”, ” mousewheel”
key “keydown”, ” keyup”, ” keypress”, ” textInput”
touch “touchstart”, ” touchmove”, ” touchend”, ” touchcancel”
control “resize”, ” scroll”, ” zoom”, ” focus”, ” blur”, ” select”, ” change”, ” submit”, ” reset”

Наприклад, в цьому запиті мониторятся усі події типу "key" у вибраному елементі в панелі Elements:

monitorEvents ($0, " key");

Ось приклад виведення після набору символів в текстовому полі:

profile ([name]) і profileEnd ([name])

profile () запускає JS- профілювальник. profileEnd () завершує профілізацію і відображає результати в панелі Profile (подробиці – в статті Speed Up JavaScript Execution).

Для запуску профілізації :

profile ("My profile")

Для закінчення:

profileEnd ("My profile")

Профілі ткже можуть бути вкладеними:

profile ('A');profile ('B');profileEnd ('A');profileEnd ('B');

Результат:

Примечание: Профилировщики могут работать одновременно, и их необязательно закрывать в порядке создания.

table (data, [columns])

Вывод данных объекта у формате таблицы. Например, для вывода списка имен нужно сделать следующее:

var names ={ 0: { firstName: " John", lastName: " Smith" }, 1: { firstName: " Jane", lastName: " Doe" }};table (names);

undebug (function)

undebug (function) припиняє відладку заданої функції.

undebug (getData);

unmonitor (function)

unmonitor (function) припиняє моніторинг заданої функції.

unmonitor (getData);

unmonitorEvents (object, [events])

unmonitorEvents (object, [events]) припиняє моніторинг вказаного об’єкту і подій :

unmonitorEvents (window);

Також можна припиняти моніторинг окремих подій :

monitorEvents ($0, " mouse");unmonitorEvents ($0, " mousemove");

values (object)

values (object) повертає масив, що містить значення все властивостей вказаного об’єкту.

values (object);

По матеріалах Command Line API Reference

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *