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 инструментов разработчика Google Chrome. Например, команда inspect($(‘#firstName’)) позволит просмотреть код элемента с идентификатором firstName. Команда inspect($$(‘a’)[3]) откроет код четвёртой ссылки, которая присутствует в DOM.

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

HackWare.ru

Этичный хакинг и тестирование на проникновение, информационная безопасность

Как анализировать POST запросы в веб-браузере

Современные веб-сайты становятся всё сложнее, используют всё больше библиотек и веб технологий. Для целей отладки разработчиками сложных веб-сайтов и веб-приложений потребовались новые инструменты. Ими стали «Инструменты разработчика» интегрированные в сами веб-браузеры:

• Chrome DevTools
• Firefox Developer Tools

Они по умолчанию поставляются с браузерами (Chrome и Firefox) и предоставляют много возможностей по оценке и отладке сайтов для самых разных условий. К примеру, можно открыть сайт или запустить веб-приложение как будто бы оно работает на мобильном устройстве, или симулировать лаги мобильных сетей, или запустить сценарий ухода приложения в офлайн, можно сделать скриншот всего сайта, даже для больших страниц, требующих прокрутки и т.д. На самом деле, Инструменты разработчика требуют глубокого изучения, чтобы по-настоящему понять всю их мощь.

В предыдущих статьях я уже рассматривал несколько практических примеров использования инструментов DevTools в браузере:

• Статический анализ исходного кода веб-сайта в браузере
• Анализ динамически генерируемых с помощью JavaScript сайтов и сайтов с подгружаемым контентом (поиск ссылок на видео, изображения, на подгружаемый контент)

Эта небольшая заметка посвящена анализу POST запросов. Мы научимся просматривать отправленные методом POST данные прямо в самом веб-браузере. Научимся получать их в исходном («сыром») виде, а также в виде значений переменных.

Я буду показывать на примере сайта http://spys.one/en/free-proxy-list/ из статьи про прокси. (На самом деле, это простейший пример — в качестве более сложных примеров, попробуйте самостоятельно разобраться, например, в POST GMail при открытии и других действий с письмами).

По фрагменту исходного кода страницы видно, что данные из формы передаются методом POST, причём используется конструкция onChange=»this.form.submit();»:

30 50 100 200 300 500 

Несмотря на необычность решения — отсутствует кнопка «Отправить», а отправка данных происходит при любом изменении поля , это вполне простой пример, поддающийся анализу статичного кода — то есть можно собрать имена всех ‘ов, собрать их значения и составить строку. Но я предлагаю познакомиться с намного более быстрым способом анализа.

Как увидеть данные, переданные методом POST, в Google Chrome

Итак, открываем (или обновляем, если она уже открыта) страницу, от которой мы хотим узнать передаваемые POST данные. Теперь открываем инструменты разработчика (в предыдущих статьях я писал, как это делать разными способами, например, я просто нажимаю F12):

Теперь отправляем данные с помощью формы.

Переходим во вкладку «Network» (сеть), кликаем на иконку «Filter» (фильтр) и в качестве значения фильтра введите method:POST:

Как видно на предыдущем скриншоте, был сделан один запрос методом POST, кликаем на него:

• Header — заголовки (именно здесь содержаться отправленные данные)
• Preview — просмотр того, что мы получили после рендеренга (это же самое показано на странице сайта)
• Response — ответ (то, что сайт прислал в ответ на наш запрос)
• Cookies — кукиз
• Timing — сколько времени занял запрос и ответ

Поскольку нам нужно увидеть отправленные методом POST данные, то нас интересует столбец Header.

Там есть разные полезные данные, например:

• Request URL — адрес, куда отправлена информация из формы
• Form Data — отправленные значения

Пролистываем до Form Data:

Там мы видим пять отправленных переменных и из значения.

Если нажать «view source», то отправленные данные будут показаны в виде строки:

xpp=5&xf1=0&xf2=0&xf4=0&xf5=0

Вид «view parsed» — это вид по умолчанию, в котором нам в удобном для восприятия человеком виде показаны переданные переменные и их значения.

Как увидеть данные, переданные методом POST, в Firefox

В Firefox всё происходит очень похожим образом.

Открываем или обновляем нужную нам страницу.

Открываем Developer Tools (F12).

Отправляем данные из формы.

Переходим во вкладку «Сеть» и в качестве фильтра вставляем method:POST:

Кликните на интересующий вас запрос и в правой части появится окно с дополнительной информацией о нём:

Переданные в форме значения вы увидите если откроете вкладку «Параметры»:

Если вы хотите получить отправленные данные в виде строки, то вернитесь во вкладку «Заголовки» и нажмите кнопку «Изменить и снова отправить», в открывшейся области пролистните до «Тело запроса»:

Как вы уже поняли, здесь не только можно скопировать строку POST, но и отредактировать её и отправить запрос заново.

Другие фильтры инструментов разработчика

Для Chrome кроме уже рассмотренного method:POST доступны следующие фильтры:

Связанные статьи:

• Анализ динамически генерируемых с помощью JavaScript сайтов и сайтов с подгружаемым контентом (поиск ссылок на видео, изображения, на подгружаемый контент) (88.2%)
• lulzbuster – инструмент для быстрого поиска скрытых файлов и папок на сайтах (62.3%)
• Статический анализ исходного кода веб-сайта в браузере (60.3%)
• Аудит безопасности роутера SKYWORTH GN542VF — взламываем пароль не выходя из веб-браузера! (59.9%)
• Как использовать User Agent для атак на сайты (57.5%)
• Как узнать все сайты на одном IP и в одной подсети (RANDOM — 0.4%)

факультете информационной безопасности от GeekBrains? Комплексная годовая программа практического обучения с охватом всех основных тем, а также с дополнительными курсами в подарок. По итогам обучения выдаётся свидетельство установленного образца и сертификат. По этой ссылке специальная скидка на любые факультеты и курсы!

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

Не знаю, возможно ли это. Делаю клиент для сайта. В 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,628 5 5 золотых знаков 19 19 серебряных знаков 36 36 бронзовых знаков

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

Похожие

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

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

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

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Обратите внимание на данную статью, чтобы проверить запись в cookie-файлах двумя способами. Чтобы связать между собой бронирования и партнёра, благодаря которому они были сделаны, Travelpayouts использует cookie-файлы. Это специальные файлы, в которые браузер сохраняет различную информацию. Мы туда записываем партнёрский ID. Подробнее об этом можно прочитать во вводной статье про Travelpayouts. Примечание: некоторые тревел-бренды записывают данные в cookie файл в зашифрованном виде. В этом случае найти там партнёрский ID не получится.

Проверяем запись в cookie через консоль браузера

Это быстрый и простой способ. Достаточно вызвать консоль браузера и ввести в ней специальную команду. Консоль — это инструмент браузера, позволяющий увидеть ошибки, возникшие в процессе отображения сайта.

В браузерах: Chrome, Opera, FireFox, IE и Яндекс

Нужно нажать F12 или Ctrl+Shift+I.

На Маках

В консоли наберите document.cookie и в ответе найдите значение вашего ID (для активации строки поиска нажмите ctrl+F). Кроме того, записи в cookies можно посмотреть через вкладку Application. Вызовите консоль, откройте вкладку Application и выберите в меню раздела Cookies сайт, для которого хотите проверить cookie. В строке поиска введите свой ID: Обратите внимание, запись в cookies называется marker только у Aviasales и Hotellook. У других тревел-брендов название записи может отличаться и содержать помимо вашего ID дополнительные символы:

Посмотреть cookie через меню браузера

Google Chrome

• Открыть браузер.
• Нажать в правом верхнем углу браузера кнопку меню (три вертикальные точки).
• Выбрать Настройки (Setting).
• Выбрать Дополнительные (Advanced).
• Нажать на кнопку Настройки контента (Content Settings).
• Нажать на кнопку Файлы cookie (Cookies). Файлы находятся в нижней части страницы. Любой элемент, помеченный как «Файлов cookie: », является файлом cookie.
• Ввести в строку поиска адрес сайта, для которого нужно посмотреть cookie.
• Для просмотра параметров файла cookie кликните по элементу.

Firefox

• Открыть браузер.
• Нажать в правом верхнем углу браузера (три вертикальные полоски).
• Нажать Настройки (значок Options).
• Нажать Приватность и защита (Privacy).
• Нажать Показать куки в правой части страницы.
• Ввести в строку поиска адрес сайта, для которого нужно посмотреть cookie.
• Файлы упорядочены по папкам, которые соответствуют сайтам. Чтобы открыть список файлов cookie, дважды кликните по папке. Чтобы изучить содержимое cookie-файла, кликните по файлу cookie.

Internet Explorer

• Открыть браузер.
• Нажать в правом верхнем углу браузера кнопку меню (три вертикальные точки).
• Выбрать Настройки (Setting).
• Нажать Свойство обозревателя (Internet Options). Эта опция находится в нижней части экрана.
• Нажать по кнопке Параметры (Settings). Эта кнопка расположена в нижней правой части раздела История просмотров (Browsing history). Если нет кнопки Параметры, необходимо перейти на вкладку Общие в верхней части окна Свойства обозревателя.
• Нажать кнопку Показать файлы (View flies) в нижней части всплывающего окна Настройки. Файлы, которые отобразятся в открывшейся папке, являются файлами cookie.

Похожие статьи

• Как открыть консоль JavaScript
• Aviasales API доступа к данным для участников партнёрской программы
• Как сделать скриншот ошибки
• Что такое пожизненная ценность клиента (Customer Lifetime Value)
• Как начать использовать инструменты