15 советов и хитростей инструментов разработчика Chrome, которые вы обязаны знать

http://tutorialzine.com/2015/03/15-must-know-chrome-devtools-tips-tricks/
  • Перевод
Сегодня Google Chrome является самым популярным браузером среди веб разработчиков. С быстрым, шести недельным, циклом релизов и мощным набором постоянно расширяющихся инструментов разработчика, превратившим браузер в инструмент, который вы обязаны иметь. Большинство из вас, вероятно, знакомы со многими его функциями, такими как «живое» редактирование CSS, используя консоль и отладчик. В этой статье мы с вами рассмотрим 15 захватывающих советов и хитростей, которые позволят улучшить вашу производительность еще больше.

1. Быстрая смена файлов


Если вы пользовались Sublime Text, то вы, вероятно, не сможете жить без «Go to anything» (Примечание переводчика: для пользователей Idea эта функция называется «Searching Everywhere» и вызывается двойным нажатием клавиши Shift). Вы будете счастливы узнать, что аналогичная функция есть в инструментах разработчика. Нажмите Ctrl + P (Cmd + P для пользователей Mac) когда открыта панель разработчика, что бы быстро найти и открыть любой файл в вашем проекте.



2. Поиск в исходном коде


Но что если вы хотите искать в исходном коде? Для поиска во всех загруженных файлах на странице нажмите Ctrl + Shift + F (Cmd + Opt + F). Этот метод поиска, так же, поддерживает поиск по регулярному выражению.



3. Переход к строке


После того как вы открыли файл во вкладке Sources, инструменты разработчика позволяют перейти к любой строке этого файла. Для этого нажимаем Ctrl + G для Windows и Linux (или Cmd + L для Mac), и введите номер строки.



Еще один способ, это нажать Ctrl + O, но вместо текста для поиска ввести ":" и номер строки (Примечание переводчика: а можно пойти еще дальше и ввести имя файла и номер строки используя ":" как разделитель между ними, при этом вводить имя файла полностью совершенно не обязательно, это же поиск).

4. Выборка DOM элементов с помощью консоли


Консоль инструментов разработчика поддерживает несколько полезных «магических» функций и переменных для выборки DOM:
  • $() — эквивалентно document.querySelector(). Возвращает первый элемент, соответствующий селектору CSS, например, $ ('DIV') вернет первый элемент DIV на странице.
  • $$ () — эквивалентно document.querySelectorAll (). Возвращает список элементов (Примечание переводчика: а именно NodeList), которые соответствуют данному CSS селектору.
  • $0 — $4 — история пяти последних элементов DOM, которые вы выбирали во вкладке Elements, где $0 будет последним.



Узнать больше функций консоли можно тут.

5. Использование нескольких кареток и выделений


При редактировании файла вы можете установить несколько кареток, удерживая Ctrl (Cmd для Mac) и нажав, там где вам нужно, таким образом, вы можете устанавливать каретки во многих местах одновременно.



6. Preserve Log


При включении параметра Preserve Log на вкладке Console, результаты будут сохранять, а не очищаться при каждой загрузке страницы. Это удобно если вы хотите просмотреть историю ошибок, которые появляются перед уходом со страницы.



(Примечание переводчика: аналогичное свойство есть на вкладке Network. При его включении история запросов перестает очищаться при переходах между страницами. Однако, если на странице была установлена переадресация с помощью JavaScript и выполнялся любой другой запрос, то практически всегда просмотреть результат этого запроса невозможно. Не забывайте отключать подобные свойства при долгой отладке! Инструменты разработчика практически всегда потребляют больше системных ресурсов чем сама страница!)

7. Прихорашивание минимизированных исходников


Инструменты разработчика Chrome имеют встроенный «прихорашиватель» минимизированных исходных кодов к удобочитаемому виду. Кнопка находится в левом нижнем углу открытого в данный момент файла во вкладке Sources.



(Примечание переводчика: порой не хватает возможности включения этого свойства автоматически, как например это сделано в FireFox)

8. Режим устройства


Инструменты разработчика включают в себя мощный режим для разработки страниц оптимизированных под мобильные устройства. В этом видео от Google демонстрируется большинство его дополнительных функций, таких как изменение разрешения экрана, эмуляция прикосновения к сенсорному экрану и эмуляция низкокачественного сетевого соединения.



9. Эмуляция датчиков устройства


Еще одной крутой особенностью режима устройства является возможность имитации датчиков мобильных устройств, таких как сенсорные экраны и акселерометры. Вы даже можете указать ваши географические координаты. Объект расположен в нижней части вкладки Elements в Emulation -> Sensors.



10. Выбор цвета


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



11. Принудительное состояние элемента


Инструменты разработки позволяют симулировать такие CSS состояния DOM элемента как :hover и :focus, упрощая написание стилей для них. Это функция доступна в редакторе свойств CSS.



12. Отображение shadow DOM


Такие элементы как поля ввода и кнопки, браузеры, создают из других базовых элементов которые обычно скрыты. Тем не менее, вы можете перейти Settings -> General и включить Show user agent shadow DOM, для отображения этих базовых элементов во вкладке Elements. Это даст вам возможность оформлять их по отдельности.



13. Выбрать следующее вхождение


Если вы нажмете Ctrl + D (Cmd + D) при редактировании файлов на вкладке Sources, дополнительно выделится следующее вхождение текущего слова, позволяя вам редактировать их одновременно.



14. Изменение формата цвета


С помощью Shift + Click по образцу цвета, в панеле редактирования CSS, формат цвета будет изменен на RGBA, HSL шестнадцатеричный (Примечание переводчика: при этом как шестнадцатеричную сокращенную форму, так и полную, и даже в заглавном регистре. Если вас и это не устроит, то браузер постарается найти данный цвет в списке стандартных цветовых констант. Единственным недостатком данной возможности является то, что для того что бы выбрать нужный формат, зачастую, приходится «проклацать» все другие возможные варианты).



15. Редактирование локальных файлов в рабочей области


Рабочие области — мощнейший инструмент панели разработчика, превращающий инструменты разработчика в IDE. Рабочая область содержит структуру файлов во вкладке Sources соответственно структуре вашего локального проекта, так что теперь вы можете редактировать и сохранять напрямую, без необходимости копировать и вставлять изменения во внешний текстовый редактор.

Что бы настроить рабочие области, перейдите во вкладку Sources (Примечание переводчика: включите панель навигации если она скрыта, для этого нажмите на кнопку Show navigator в левом верхнем углу вкладки) и щелкните правой кнопкой мыши в любом месте панели навигатора, или просто перетащите всю вкладку проекта в панель разработчика. Теперь, выбранная папка, её подкаталоги и все файлы в них будут доступны для редактирования независимо от того, на какой странице вы находитесь. Для еще большего удобства, вы можете использовать файлы которые используются на данной странице, что позволит редактировать и сохранять их.

UPD. Примечание переводчика:



Добавленная папка будет доступна со всех вкладок. По этому если в вашем проекте больше одного HTML файла, то достаточно будет открыть его в соседней вкладке браузера.

Вы можете узнать больше о рабочих пространствах тут.

Рекомендации для дальнейшего прочтения:

Сочетания клавиш Chrome
Длинный список советов и трюков в документации Chrome
Поделиться публикацией

Похожие публикации

Комментарии 23

    0
    Подскажите, пожалуйста, инструмент для записи таких гифок? А, это перевод…
      +4
      Есть такое www.cockos.com/licecap screentogif.codeplex.com cropper.codeplex.com
        +4
        gifcam.ru.uptodown.com/ позволяет соорудить любой вариант гифки.
          +4
          Для мака, вот уже пол года, использую это http://recordit.co. Доволен как слон.
            0
            В monosnap записанный скринкаст можно в gif сохранить, с выбором итогового fps.
              0
              cloudshot.codeplex.com/ попробуйте =)
            • НЛО прилетело и опубликовало эту надпись здесь
                +4
                А это всё только чтобы наживую подправить текущую страницу, или можно сделать полноценный проект, редактировать файлы на диске и тд? Такие мощные возможности, казалось бы совсем немного до полноценной IDE осталось.
                  0
                  А это всё только чтобы наживую подправить текущую страницу, или можно сделать полноценный проект, редактировать файлы на диске и тд?

                  Можно. Добавил пример для пятнадцатого пункта.
                  Но, лично мне, как минимум, не хватает «Reformate code», «Autocomplete» и «Emmet» обязательно работающего везде! А не только в редакторе HTML!
                    +1
                    По идее здесь можно добавить папку, куда файлы будут сохраняться. Правда, я еще не пользовалась

                    image

                    (опередили))
                      –1
                      казалось бы совсем немного до полноценной IDE осталось

                      Так уже
                      +2
                      Пожалуй мы наблюдаем развитие очередного витка «браузерных войн», только в этот раз они пытаются переманить не пользователей, а разработчиков, подсовывая им всякие «плюшки».
                        +1
                        После прочтения поста обрадовался — в Firefox'е есть почти все перечисленное.
                          0
                          Логично, вроде бы главный разработчик FireBug'a перешел в хром пару лет назад :)
                          0
                          пользователей Idea эта функция называется «Searching Everywhere» и вызывается двойным нажатием клавиши Shift.


                          Спасибо, не знал. А чем эта фунциональность отличается от «Go to file» (ctrl+shift+n)?
                            +2
                            Go to file — найти файл, в IDEA дважды нажать shift — поиск по проекту, включая классы, методов класса, но и даже элементов меню (actions)
                              0
                              Обалденно! Спасибо за информацию.
                              0
                              здесь не знаю, а вот в идее, двойной шифт выводит всплывающее окошко, в котором идет смарт поиск — вводишь без пробелов только части слов во вхождении, тот же принцип, как в саблайме. а ищет в результате и файлы и названия классов и названия функций, разделяя их по категориям.
                              +1
                              Есть ещё одна архи-полезная штука — можно на любой DOM-элемент повесить брейкпоинт на изменение его контента, атрибута или состояния. (про это упоминается по одной из ссылок, приведённых SelenIT2 выше)
                                +7
                                С пунктом 4 (Выборка DOM элементов с помощью консоли) есть неоднозначность.
                                $() — эквивалентно document.querySelector(). Возвращает первый элемент, соответствующий селектору CSS, например, $ ('DIV') вернет первый элемент DIV на странице.
                                Дело в том, что если зайти на фронтенд-бедную страницу, то $ будет представлять собой function $(selector, [startNode]) { [Command Line API] }, как и описано в статье. Но если зайти на страницу, где присутствует jQuery, то $ будет уже экземпляром jQuery, а именно function (e,t){return new v.fn.init(e,t,n)}. Наглядно в этом можно убедиться, попросив консоль преобразовать оба вывода к объетам javascript, методом console.dir($) и развернуть. В случае Command Line API это будет маленький объект с парой-тройкой методов, а jQuery-объект будет довольно громоздким внутри. От того, есть ли на отлаживаемой странице jQuery, зависит и вывод, который приводится в пример. А именно, $('div') будет возвращать разный результат: либо первый объект (Command Line API), либо множество объектов jQuery. Очевидно, что $ как jQuery будет существовать только в той области видимости, где он подключен (frame можно менять в консоли).

                                P.S. Благодарю автора статьи за приглашение и возможность написать этот комментарий.
                                  +3
                                  Интересно было бы сравнить все эти фичи с Firefox и одной из развитых IDE типа Jetbrains. В IDE это всё есть, а в Firefox очень многое есть (часть — через аддоны).
                                    0
                                    Я, наверное, старпёр — до сих пор сижу на Opera Dragonfly…

                                    Кстати, фишка старой оперы, о которой никто не знает — Ctrl+Shit+O — открывает консоль ошибок. Обычно там всякий мусор, но лично я пишу все проекты таким образом, чтобы она оставалась чистой.
                                      0
                                      Может кто знает какое расширение, которое позволило бы редактировать контент страницы по типу оперы?
                                      В средствах разработчика хрома на вкладке Sources можно посмотреть код страницы, но почему то не всегда. Например, для данной страницы отображается только javascript, весь html заменён на пустые блоки, но даже где отображается код страницы, его нельзя редактировать, только скрипты.

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

                                      Самое читаемое