google chrome developer toolsКак часто вы используете отладчик браузера при разработке? Я использую его ежедневно/ежечасно/ежеминутно. Не только в разработке, но и в повседневной жизни. Посмотреть размер фото, размер шрифта, шрифт, отладить CSS, найти ошибку в JS, найти причину медленной работы скрипта, узнать какая из картинок не грузится - все это и многое другое, позволяет отладчик браузера. Я использую Google Chrome. На мой взгляд в нем  самый удобный отладчик из всех Developer Tools. Это целая система разработки с подсветкой синтаксиса и отладчиком кода. Как более эффективно работать с Developer Tools читайте ниже. Собрал все в одном месте, чтобы и самому не забыть и вам, уверен пригодится. 

CTRL + SHIFT + F

Глобальный поиск. Поиск во всех разделах HTML, CSS и JS. Полезно, когда вы хотите проверить, если браузер загружается изменения, которые вы делаете, или найти что-то в коде JavaScript, чтобы разместить точку останова. Специально полезно в продакшене, когда файлы JavaScript агрегируются, не пытайтесь найти код вручную. Используйте глобальный поиск.

ctrl+shift+f - глобальный поиск в Google Chrome Developer Tools

CTRL + Z

Знаете ли вы, вы можете отменить изменения CSS в Devtools?

ctrl+z Отмена изменений в стилях

CTRL + S

Отредактируйте файлы JavaScript в DevTools (Вкладка Source). Затем сохраните изменения (Ctrl + S). Вы увидите в консоли "Recompilation and update succeeded" и цвет фона изменится. Этот трюк не очень полезен сам по себе. Но вы можете использовать его во время отладки в точке останова. Этот совет действительно полезен для отладки на лету медленных участков. Вы можете редактировать JavaScript прямо во время отладки. Код будет продолжен именно таким, каким вы его измените.

Сохранение документа на лету в Google Chrome DevTools

CTRL + ALT + Click

Это очень полезный трюк, когда элементы имеют очень большую вложенность. Кликните по элементу в инспекторе объектов (Вкладка Elements) правой клавишей с нажатыми CTRL+ALT и у элемента сразу раскроются все дочерние элементы.

CTRL+ALT+Click Открытие всех дочерних элементов нода

 

debugger;

Это не сочетание клавиш. Это ключевое слово является частью ECMAScript 5, так что оно будет работать во всех современных браузерах. Поместите строку debugger; в код JavaScript, и это будет иметь тот же эффект, что и точка останова (бряк), на этом месте (при открытой DevTools) браузер остановит выполнение JavaScript и откроет отладчик JavaScript.

$0 и $_ в консоли

Выберите элемент во влкдаке Objects (Инспектор объектов) а в консоли используйте $0 для доступа к нему. Вы также можете использовать $_ для доступа к значению, которое было вычслено в последний раз. К любому значению!

$0 и $_ доступ к элементу из инспектора объектов и доступ к последнему вычисленному значению

CTRL+M - прыгнуть в конец(начало) блока

Используйте Ctrl + M для перехода между соответствующими скобками блока.

ctrl+m Перемещение между скобками в Google Chrome Developer Tools

Blackbox scripts

Blackbox scripts: когда вам при отладке не нужно проходить часть кода, вы можете поместить его в Blackbox scripts. Делается это к примеру для того, чтобы не попадать в бесконечные вызовы служебных функций jQuery. Вы просто игнорируете весь jQuery и отлаживаете только свой код. Великолепный трюк. 

Добавить скрипт в черный список blackbox и не отлаживать

Источник:devtoolstips.com и wunderkraut.com

Огромное число горячих клавиш для Google Chrome Developer Tools тут 

Рассказать друзьям
author.jpg

Платная консультация по вопросам 1500 руб/час

Прочитали статью и остались вопросы? Меня зовут Валерий и я её автор. С радостью объясню Вам в скайпе все затруднительные моменты, которые остались за рамками статьи!

Подробнее ...

Добавить комментарий


Комментарии   

мишка
0 # мишка 26.12.2016 15:28
В chrome developer tools столько функций что просто нужно создавать отдельные видео уроки по работе с инструментами. Очень круто! :-)
Ответить | Ответить с цитатой | Цитировать
Елена Konahevich
0 # Елена Konahevich 31.03.2017 15:21
Такие подробности... Класс. Скажите, я всегда спотыкаюсь на вкладке Soerses https://i.paste.pics/1JYDD.png (скрин).
Что означают эти "тучки", надпись ТОП?
Например, если я хочу понравившийся лендинг залить себе на хост, но я вижу эту иерархию папок с сторонних ресурсов. То как мне их повторить у себя?
Спасибо.
Ответить | Ответить с цитатой | Цитировать
Leroy
0 # Leroy 03.04.2017 14:29
Я для этого сервис когда-то сделал http://xdan.ru/copysite/ )) Here you are!)
А так да, сейчас сайт редко берет данные только с одного домена.
Ответить | Ответить с цитатой | Цитировать