Комментарии 41
1) в 2021 эта штука научилась отобржать raw request response ?
2) в 2021 эта штука научилась перехватывать входящий респонс , заменять в нем данные и продолжать?
- Ну тут как сказать. Если это binary, то оно пишет "this request has no response data available". Если это что-то строковое, то умеет. Но всё равно — заголовки и тело ответа отдельно. Можно скопировать "response". Для blob оно копирует data-uri, для условного JSON-а body-часть ответа. Заголовки показывает в табличном виде. После ряда фильтров (когда дебажил это всё дело Wireshark-ом видел что реальные заголовки HTTP2 несколько отличаются. В общем если нужен простой ответ, то нет.
- Не видел такой возможности. Не уверен что такое есть даже в Roadmap
Для этого можно и нужно использовать Fiddler, он во все это умеет.
Есть замечательный mitmproxy, который это умеет. Кроме того сам DevTools Protocol поддерживает перехват запросов, в т.ч. можно не отправлять запрос на сервер, а выдавать сразу подменённый ответ (только вот в интерфейсе таких кнопок конечно нет).
Спасибо огромное, на редкость полезная и информативная статья!
Наконец то нормальные хинты, а не просто перечисление функций консоли. От себя добавлю что код можно редактировать прямо в дебаггере, сохранять по Ctrl+S и исполняться будет уже измененный код. Но работает это только с отключенным sourceMap.
Крутая статья!
Помню как мучался с подменой урла в запросе, не додумался до такого решения.
Спасибо!
Имена собственные
Значение переменной, которая переименовалась в непойми что, иногда ещё можно выцепить из arguments. Я довольно часто этим пользуюсь
Кто то знает, как отключить новую фишку в стилях. Сейчас если оттуда скопировать стиль, то значения получаются с новой строки.
К примеру:
padding:
5px
25px
;
Разве? Проверил у себя — и property-name и property-value на одной строке. Как вы копируете? Я просто выделил мышью и ctrl+C.
padding: 5px 25px;
аналогично
control c - control v ломает копипаст, вероятно связано с тем, что в последних версиях хрома добавили селект у величин padding/margin, чтобы вместо px подставить другую величину
меня спасает райт-клик на копируемую величину и copy declaration https://puu.sh/In1Bl/9008744a7f.png
Спасибо автору, очень полезная статья. Утащил в сохранялки)
Запускаем: setTimeout('debugger;', 3_000)
Ну это уже слишком сложно, я в такой ситуации использовал print screen на widows, а потом сразу его отменял, это очень быстро, и не напрягает.
Если честно, то совсем непонятно, как print screen здесь может помочь. Я правда уже очень давно не пользовался Windows. Там при этом происходит что-то особенное? Появляется какое-нибудь окно, но при этом контрол не получает событие onBlur?
Так же хочу сказать что статья крутая, однозначно отправляю всем знакомым.
Просто "сломайте" код. Во время отладки вы можете запускать произвольный JS код в консоли.
Отличное решение, но вот снова таки - много писать, и не очень приятно. Мне кажется что в этом случае интуиция подсказала бы поставить console.log, и возможно это было бы лучше по удобству, иногда перезагрузить страницу удобнее и быстрее.
иногда перезагрузить страницу удобнее и быстрее.
Тут целый ряд проблем:
- Вы можете ОЧЕНЬ СИЛЬНО не желать перезагружать страницу. Просто потому что смогли воспроизвести сложно-воспроизводимый баг. На это могут часы уйти. Состояние такой страницы на вес золота.
- На моём опыте очень часто страницы повисшие на стороне JS не перезагружаются. Они продолжают висеть и ни на что не реагировать. В тех случаях когда меня устраивает убиение страницы мне обычно приходится или гасить вкладку посредством Task Manager-а, или открывая новую и пытаясь убить старую крестиком (так часто срабатывает).
Про console.log не понял. Как console.log поможет вам с зависшим JS?
Можно еще открыть DevTools в новой вкладке, открыть всплывашку, через Ctrl+Shift+C выбрать элемент всплывашки (в этот момент фокус перейдет на DevTools и Chrome не поймет, что фокус ушел и нужно закрыть всплывашку) и поставить break на удаление ноды. Тогда перед закрытием всплывашки будет вызван breakpoint и можно будет отлаживать всплывашку.
Вариант. Но, честно говоря, как-то сильно сложно, долго и муторно.
Странный подход, но я им часто пользуюсь для ковыряние во всплывашках:
открываем DevTools в том же окне. Делаем его по ширине таким, чтобы контекстное меню, вызванное правым кликом по элементу залазило на DevTools.
Затем, кликаем по всплывашке и через правый клик, и через контекстное меню переводим мышь на DevTools.
У меня работает с вероятностью 98%. Страница даже не понимает, что произошло :)
Интересный вариант. Решил опробовать на сложном примере. Не получается. <Select/>.<Dropdown/> закрывается. Кажется тут только остановка JS поможет. Но для более простых случаев должно сработать.
Ещё один способ избежать закрытия всплывающего окна при переключении в DevTools — открывать его не выходя из DevTools.
Немного обновил статью. Оказалось, что в Chrome DevTools появились logPoints. Те же самые breakpoint-ы, но с единственной целью — логировать что-нибудь. Такой синтаксический сахар.
стоит убрать фокус из окна вкладки, как всплывашка тут же пропадает
Разве Emulate Focused Page не для этого как раз предназначен? Чтобы без всех этих хитростей не терять фокус при работе с Dev Tools.
Вы про эту штуку?
В некоторых случаях это поможет. Например если всплывашка работает на onMouseEnter/onMouseLeave. Или вы имеете ввиду что-то другое?
Нет, конечно. Эта штука про element, а есть глобальная настройка про page. Вызывается через Ctrl+Shift+P, пишется emulate и выбирается нужный пункт.
Вот про это: https://tinytip.co/tips/devtools-focused-page/
Chrome DevTools: Хитрости при отладке