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


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

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

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


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

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