Id запроса где посмотреть в консоли

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

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

На первый взгляд, перед нами – вполне обычная 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

5. Измерение времени выполнения фрагмента кода

В консоли Chrome доступна функция вида console.time(‘labelName’), которая принимает в качестве аргумента метку и запускает таймер. Ещё одна функция, console.timeEnd(‘labelName’), останавливает таймер, которому назначена переданная ей метка. Вот пример использования этих функций:

console.time('myTime'); //Запускает таймер с меткой myTime console.timeEnd('myTime'); //Останавливает таймер с меткой myTime //Вывод: myTime:123.00 ms

Вышеприведённый пример позволяет узнать время между запуском и остановкой таймера. То же самое можно сделать внутри JavaScript-программы и найти время выполнения фрагмента кода.

Cкажем, мне нужно выяснить длительность исполнения цикла. Сделать это можно так:

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=[,,,]

Если вывести его в консоли, получится иерархическая структура в виде, собственно, массива объектов. Это – полезная возможность, ветви структуры можно разворачивать, просматривая содержимое объектов. Однако, при таком подходе сложно понять, например, как соотносятся свойства похожих элементов. Для того, чтобы с подобными данными было удобнее работать, их можно преобразовать к табличному виду. Для этого служит такая команда:

console.table(variableName)

Она позволяет вывести переменную и все её свойства в виде таблицы. Вот, как это выглядит.

Вывод массива объектов в виде таблицы

7. Просмотр кода элемента

Быстро перейти к коду элемента из консоли можно с помощью следующих команд:

inspect($(‘selector’))

Elements

inspect($(‘#firstName’))

firstName

inspect($$(‘a’)[3])

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 что-то полезное, экономящее время, достойное стать частью повседневного арсенала веб-программиста.

А какие инструменты используете вы? Давайте-давайте, делитесь какими-нибудь приколюхами! 🙂

JavaScript
HTML
разработка
Google Chrome
консоль разработчика

Блог компании RUVDS.com
Веб-разработка
JavaScript
Google Chrome
HTML

Как определить куда идет запрос?

Не знаю, возможно ли это. Делаю клиент для сайта. В html выведены я вижу ссылку, например site.ru/user/id/5 , а реальная ссылка такая: site.ru/user/index.php?id=5 (наобум узнал). Как можно узнать куда в конце концов приходит запрос? Получится ли это сделать в Chrome?

Отслеживать
задан 18 окт 2017 в 6:12
user194625 user194625

@Flippy, поясните, что вы имеете в виду под «в html выведены», это на веб-странице в браузере или в коде страницы?

18 окт 2017 в 6:21

@Sergey Glazirin, в html коде. Причем там есть «грязные ссылки» непонятной архитектуры типа chat/wi:int:=107:form:msg:IFL:;

– user194625
18 окт 2017 в 7:31

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Это зависит от того, на чем сайт написан. Перенаправление может быть на клиентском уровне (в html или ajax), тогда его возможно отследить, а если перенаправление настроено на серверном уровне (java servlet например), тогда вы никогда не узнаете, куда сервер ваши запросы отправляет, вы сможете увидеть только адрес входа, куда ВЫ их отправляете, и ответ сервера в виде html, json, или еще чего-то. А что происходит внутри сервера — остается внутри сервера.

Отслеживать
ответ дан 18 окт 2017 в 6:57
user236980 user236980

Примерно так это выглядит

В Chrome есть DevTools, который открывается через f12, далее открыть вкладку Network, в ней выбрать раздел xhr или all, далее нажать на вашу ссылку, чтобы прошел запрос, он сразу же должен отобразиться в списке. Выделите его и в появившемся описании выбрать раздел headers. В нем в списке General найти пункт «Request URL»

Отслеживать
ответ дан 18 окт 2017 в 6:30
Sergey Glazirin Sergey Glazirin
5,648 5 5 золотых знаков 19 19 серебряных знаков 36 36 бронзовых знаков

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Знакомимся с командой $_GET

Мы научились задавать идентификатор в одном месте, но мы не можем каждый раз менять значение для каждого пользователя вручную. Оно должно приходить откуда-то извне. И лучший вариант — адрес, который виден в адресной строке браузера.

В адресе есть специальная часть, которая называется «параметры запроса». Параметры запроса располагаются после знака вопроса.

https://www.gloevk.ru/product.php?product_id=1

В данном примере у нас есть один параметр product_id , а цифра в конце этого адреса — его значение.

Получить параметр запроса можно с помощью команды $_GET , указав в квадратных скобках его название.

keks_log($_GET['product_id']); // Получаем значение параметра запроса

Подробную информацию о параметрах запроса и использовании $_GET вы можете получить в учебнике.

Выведем $_GET[‘product_id’] в консоль. В адресной строке нашего мини-браузера поменяем значение параметра запроса и проверим, изменится ли число в консоли. В следующем шаге используем $_GET[‘product_id’] для получения артикула товара.

Перейти к заданию

вашей квартире

Разнообразные товары для дома с доставкой по всей планете