Консоль розробника Google Chrome: десять неочевидних вигод

Як з допомогою консолі розробника перетворити Google Chrome подобу текстового редактора? Який сенс в ній набуває знайомий багатьом по jQuery значок $? Як вивести на консоль набір значень, оформлений у вигляді цілком пристойною таблиці? Якщо відразу відповіді на ці питання в голову не приходять, значить вкладка Console з інструментів розробника Chrome ще не розкрилася перед вами у всій красі.

image
На перший погляд, перед нами – цілком звичайна JavaScript-консоль, яка годиться тільки на те, щоб виводити в неї логи відповідей серверів або значення змінних. Я, до речі, так їй і користувався, коли тільки почав програмувати. Однак, з часом набрався досвіду, підучився, і несподівано для себе виявив, що консоль Chrome вміє багато такого, про що я і не здогадувався. Хочу про це сьогодні розповісти. Так, якщо ви читаєте зараз не на мобільнику, можете тут же все це і спробувати.

1. Вибір елементів DOM
Якщо ви знайомі з jQuery, не мені вам розповідати про важливість конструкцій на зразок $('.class') та $('id'). Для тих, хто не в курсі, поясню, що вони дозволяють вибирати елементи DOM, вказуючи призначені їм класи і ідентифікатори. Консоль розробника володіє схожою функціональністю. Тут «$», однак, ставлення до jQuery не має, хоча робить, по суті, те ж саме. Це – псевдонім для функції document.querySelector().

Команди виду $('tagName'), $('.class'), $('#id') та $('.class #id') повертають перший елемент DOM, що збігається з селектором. При цьому, якщо в документі доступна jQuery, її «$» даний функціонал консолі перекриє.

Є тут і ще одна конструкція: $$. Її використання виглядає як $$('tagName') або $$('.class'). Вона дозволяє вибрати всі елементи DOM, відповідні селектору і помістити їх в масив. Робота з ним нічим не відрізняється від інших масивів. Для того, щоб обрати конкретний елемент, можна звернутися до нього по індексу.

Наприклад, команда $$('.className') надасть нам масив всіх елементів сторінки із зазначеним при її виклику ім'ям класу. Команди $$('.className')[0] та $$('.className')[1] дадуть доступ, відповідно до першого і другого елементу отриманого масиву.


Експерименти з командами $ та $$

2. Перетворюємо браузер, текстовий редактор
Вам доводилося ловити себе на думці про те, що добре було б правити текст налагоджують веб-сторінки прямо в браузері? Якщо так – значить вам сподобається команда, показана нижче.

document.body.contentEditable=true

Після її виконання в консолі, документ, відкритий в браузері, можна редагувати без необхідності пошуків потрібного фрагмента в HTML-коді.

3. Пошук обробників подій, прив'язаних до елементу
В процесі відладки може знадобитися знайти обробники подій, прив'язані до елементів. За допомогою консолі зробити це дуже просто. Досить скористатися такою командою:

getEventListeners($('selector'))

В результаті її виконання буде виданий масив об'єктів, містить перелік подій, на які може реагувати елемент.


Обробники подій

Для того, щоб знайти обробник для конкретної події, можна використовувати таку конструкцію:

getEventListeners($('selector')).eventName[0].listener

Ця команда виведе код функції-обробника події. Тут eventName[0] – це масив, який містить всі події конкретного типу. Наприклад, на практиці це може виглядати так:

getEventListeners($('#firstName')).click[0].listener

В результаті ми отримаємо код функції, пов'язаної з подією click елемент з ідентифікатором firstName.

4. Моніторинг подій
Якщо ви хочете спостерігати за виникненням подій, прив'язаних до конкретного елементу DOM, консоль в цьому допоможе. Ось кілька команд, які можна використовувати для моніторингу подій.

  • КомандаmonitorEvents($('selector')) дозволяє організувати моніторинг всіх подій, пов'язаних з елементом, якому відповідає селектор. При виникненні події робиться запис в консолі. Наприклад, команда monitorEvents($('#firstName')) дозволить логировать всі події, пов'язані з елементом, ідентифікатор якого – firstName.

  • КомандаmonitorEvents($('selector'),'eventName') схожа на попередню, але вона націлена на конкретну подію. Тут, крім селектора елементу, функції передається і ім'я події. Така команда дозволить вивести на консоль дані про виникнення однієї події. Наприклад, команда monitorEvents($('#firstName'),'click') виведе відомості лише події click елемент з ідентифікатором firstName.

  • Команда monitorEvents($('selector'),['eventName1','eventName3',....]) дозволяє спостерігати за кількома обраними подіями. Тут у функцію передається рядковий масив, який містить імена подій. Наприклад, така команда: monitorEvents($('#firstName'),['click','focus']) буде виводити в консоль відомості про події click та focus елемент з ідентифікатором firstName.

  • Команда unmonitorEvents($('selector')) дозволяє припинити моніторинг і логування подій в консолі.
5. Вимірювання часу виконання фрагмента коду
В консолі Chrome доступна функція виду console.time('labelName'), яка приймає в якості аргументу мітку і запускає таймер. Ще одна функція, console.timeEnd('labelName'), зупиняє таймер, яким призначено передана їй мітка. Ось приклад використання цих функцій:

console.time('myTime'); //Запускає таймер з міткою myTime
console.timeEnd('myTime'); //Зупиняє таймер з міткою myTime
//Висновок: myTime:123.00 ms

Вищенаведений приклад дозволяє дізнатися час між запуском і зупинкою таймера. Те ж саме можна зробити всередині JavaScript-програми і знайти час виконання фрагмента коду.

Скажімо, мені треба з'ясувати тривалість виконання циклу. Зробити це можна так:

console.time('myTime'); // Запускає таймер з міткою myTime
for(var i=0; i < 100000; i++){
2+4+5;
}
console.timeEnd('mytime'); // Зупиняє таймер з міткою myTime
//Висновок - myTime:12345.00 ms

6. Висновок значень перемінних у вигляді таблиць
Припустимо, у нас є такий масив об'єктів:

var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]

Якщо вивести його в консолі, вийде ієрархічна структура у вигляді, власне, масиву об'єктів. Це – корисна можливість, гілки структури можна розгортати, переглядаючи вміст об'єктів. Однак, при такому підході важко зрозуміти, наприклад, як співвідносяться властивості схожих елементів. Для того, щоб з подібними даними було зручніше працювати, їх можна перетворити до табличного вигляду. Для цього служить така команда:

console.table(variableName)

Вона дозволяє вивести змінну і всі її властивості у вигляді таблиці. Ось як це виглядає.


Висновок масиву об'єктів у вигляді таблиці

7. Перегляд коду елемента
Швидко перейти до коду елемента з консолі можна з допомогою наступних команд:

  • Команда inspect($('selector')) дозволяє відкрити код елемента, відповідного селектору, в панелі Elements інструменти розробника Google Chrome. Наприклад, команда inspect($('#firstName')) дозволить переглянути код елемент з ідентифікатором firstName. Команда inspect($$('a')[3]) відкриє код четвертої посилання, яка присутня в DOM.

  • Команди виду $0, $1, $2 дозволяють швидко переходити до недавно переглянутих елементів. Наприклад, $0 відкриє код самого останнього переглянутого елемента, і так далі.
8. Висновок список властивостей елемента
Якщо треба переглянути список властивостей елемента, консоль допоможе і в цьому. Тут використовується така команда:

dir($('selector'))

Вона повертає об'єкт, що містить властивості, пов'язані з заданим елементом DOM. Як і в інших подібних випадках, вміст цього об'єкта можна дослідити, переглядаючи його деревоподібну структуру.

9. Виклик останнього отриманого результату
Консоль можна використовувати як калькулятор, це, ймовірно, знають всі. Але ось те, що вона має вбудовані засоби, що дозволяють використовувати в командах результати попередніх обчислень, відомо небагатьом. З допомогою конструкції$_ можна витягти з пам'яті результат попереднього виразу. Ось як це виглядає:

2+3+4
9 //- Результат підсумовування - 9
$_
9 // Виводиться останній отриманий результат
$_ * $_
81 // Так як останній результат 9, отримуємо 81
Math.sqrt($_)
9 // Квадратний корінь з останнього результату, який був дорівнює 81
$_
9 // Знову отримуємо 9 – результат попереднього обчислення

10. Очищення консолі і пам'яті
Якщо потрібно очистити консоль і пам'ять, скористайтесь такий ось простий командою:

clear()

Після натискання на Enter чистий консоль буде готова до нових експериментів.
От і все.

11, 12, 13, 14...
Відверто кажучи, це – далеко не все. Я показав лише деякі з неочевидних можливостей консолі Google Chrome. Насправді, їх набагато більше. Упевнений, ви зможете розширити мій список власними знахідками.

Сподіваюся, моя розповідь допоміг вам дізнатися про консолі Chrome щось корисне, заощаджує час, гідне стати частиною повсякденного арсеналу веб-програміста.

А які інструменти використовуєте ви? Давайте-давайте, ділитися якими-небудь приколюхами! :)
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.