Вся правда о Chrome (и не только) Web Inspector. Часть 1

[@jMas]

Ёмко. Спасибо.

[@naidgel]

Возможно ли осуществлять поиск по содержимому Response на вкладке Network? И возможно ли заставить Web Inspector не уменьшать размер страницы, а вести себя как плагин Firebug Lite?

[@z6Dabrata]

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

[@z6Dabrata]

Не совсем понял, насчет размера страницы, возможно вам нужна вот эта кнопка?

[@miguelle74]

Отлично! Установил, прочитав статью. Сейчас потестим.

[@ich]

спасибо, все не осилил, но в избранное добавил

[@asci]

«Если вы знаете какие-то еще нетривиальные способы использования консоли, отметьтесь пожалуйста в комментариях, я вам буду весьма благодарен.»

я еще консоль использую для изменения состояния внутренних объектов своего приложения, прикрепив их к window

[@GIum]

Не знал про фичу «Dock to the right», очень нужная. Спасибо

[@joedm]

>Safari… наиболее консервативный браузер
Safari можно запускать под свежесобранным WebKit nightly.

[@Nc_Soft]

Как можно работать с сетью в веб-инспекторе в хроме, либо в драгонфлай в опере, если при редиректе либо клику по ссылке все старые хттп запросы пропадают? Отправляю пост данные на форму, она редиректит и все, пост данных не видно. Дебагер мля…

[@rozboris]

Просто:

[@z6Dabrata]

Nc Soft, Во вкладке «Network» есть кнопочка , если ее нажать, то вся информация будет сохраняться.

[@z6Dabrata]

Прошу прощение за дублирование информации.

[@santeri]

как сохранить изменения в том же CSS?

[@z6Dabrata]

Легкого способа, к сожалению, нет.
habrahabr.ru/post/143767/#Save-CSS

[@svistiboshka]

оно? is.gd/9QPCN5

[@hlx]

полезно

[@demark]

Думаю, что многим было бы интересно ещё почитать и про не очень известный Speed Tracer, который сейчас тоже только в Canary Build.

[@demark]

Ссылка на сайт тулзы: developers.google.com/web-toolkit/speedtracer/

[@SergeiStartsev]

Почему только в Canary build? есть же плагин.

[@DevMan]

По большому счету информация актуальна и для Safari.
PS Правда в Safari 5.2 инспектор уже другой.

[@GMM]

Source maps (англ.), позволяют указать браузеру способ найти исходный файл.
Идея отличная, по пока позволяет работать только с Javascript.
В будущем обещают поддержку CoffeeScript, LESS, SASS и других чудо-технологий.

Было б отлично делать отладку Coffeescript прямо в браузере (хотя генерируемый код и так весьма хорош).

[@crackedmind]

Отлично, спасибо, узнал пару новых для себя вещей. С нетерпением жду продолжения.

[@kuchumovn]

Единственным недостатком считаю невозможность увеличить размер шрифта (ваш способ не работает у меня) самих Developer Tools, да и консоли тоже.

[@z6Dabrata]

В стабильной версии это пока не работает.

[@kuchumovn]

а, спасибо, теперь понятно

[@elisium]

На этом скриншоте:

показан прекрасный момент — <top frame>. Этот чудесный переключатель позволяет выполнять JS из консоли для любого фрейма на странице. Такой штуки я не нашел в фаербаге и она меня очень выручала, когда я занимался интеграцией одного приложения в разные социальные сети (практически везде используются iframe, достучаться до которых в силу кроссдоменной политики нельзя). Сейчас эта фича уже есть в стабильном хроме, но именно из-за неё когда-то начал использовать Canary.

[@vermilion1]

Вот это круто, спасибо!

[@404tesla]

Почему-то CTRL+Scroll в консоли не работает.

Шрифт можно так же увеличить путём вызова DevTools в DevTools (повторно нажав F12) и там выбрать любой элемент в консоли и накрутить размер шрифта в CSS.

Про ctrl+ и ctrl- не слышал, в стабильной не работает, поэтому изобрёл велосипед, описанный выше. Надеюсь, пригодится.

[@ilyaplot]

А я и не знал, что пользуюсь таким мощным инструментом. Спасибо, что раскрыли мои глаза :)

[@VolCh]

Иногда использую консоль для напоминалок через alert и setTimeout/setInterval.

[@z6Dabrata]

Отлично!

[@br3t]

Пустой element.style во вкладке styles порой раздражает. Не подскажете, как от него избавиться?

[@SadJoker]

А вы еще не решили, когда там будет новая серия? :)

[@JekFdrv]

Большое спасибо за такой подробный гайд! Не поленились поделиться опытом!
Подскажите пожалуйста, можно ли как-то перебиндить (переназначить) Control + SHIFT + I на что-то типа F1? Я с длинными пальцами не могу дотянуться… кто вообще придумал данные хоткеи… Я конечно не удивлюсь если кто-то пользуется правыми Control и Alt, но это уверен очень узкий круг девелоперов.
Иногда нужно просто открыть инспектор и посмотреть последний выбранный элемент, мышкой это делать долго, приходиться самым ближним хоткеем Ctrl+Shift+C снова выбирать какой либо элемент.

[@JekFdrv]

Ещё я не пойму как можно разрабатывать в браузере в котором куча багов, который отображает контент иначе? Что бы потом были лишние проблемы с cross браузерностью обычного хрома. Ведь дев хром вижу только я. Лучше уже сэкономить себе время и разрабатывать изначально в браузере который не врет и которым пользуется твой заказчик.