10 малоизвестных возможностей инструментов разработчика Chrome

Автор оригинала: Loftie Ellis
  • Перевод
Автор заметки, перевод которой мы публикуем, пользуется инструментами разработчика Chrome почти каждый день. Здесь он хочет рассказать о малоизвестных возможностях этих инструментов. Он говорит, что если бы знал о них раньше, то ему они точно бы пригодились.



1. Простой способ получения ссылки на любой исследуемый элемент


Инструменты разработчика Chrome позволяют получить в консоли ссылку на любой исследуемый элемент. Для этого нужно, работая в панели Elements, щёлкнуть правой кнопкой мыши по элементу и выбрать в выпадающем меню пункт Store as global variable.


Простой способ получения ссылки на любой исследуемый элемент

2. Создание интерактивных выражений, прикреплённых к консоли


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


Интерактивные выражения в Chrome

3. Имитация медленных интернет-соединений


Вкладка Network инструментов разработчика Chrome позволяет имитировать подключение браузера к различным сетям. Эта возможность способна оказаться крайне полезной для того, чтобы оценить поведение страницы в ситуации, когда на её загрузку требуется несколько секунд.


Исследование страницы с имитацией различных способов подключения к интернету

4. Отключение кэша, сохранение логов при переходе между страницами


Мне приходилось встречаться с множеством проблем, которые, как оказалось, не были ошибками. Их причиной была неправильная загрузка кэшированного кода. Для того чтобы избавиться от подобных неприятностей, можно полностью отключить кэширование, воспользовавшись возможностями вкладки Network. Речь идёт о флажке Disable cache. Обратите внимание на то, что кэш не работает только при открытой панели инструментов разработчика.

Сохранение логов — это ещё одна полезная возможность, благодаря которой консоль не очищается при перезагрузке исследуемой страницы. Включает эту возможность флажок Preserve log на вкладке Network.


Отключение кэша и сохранение логов

5. Создание копий экрана


Инструменты разработчика Chrome включают в себя встроенное средство для создания скриншотов. Для того чтобы им воспользоваться, нужно, при открытом окне инструментов, применить комбинацию клавиш Ctrl+Shift+P, а затем ввести в появившемся поле ключевое слово screenshot и выбрать необходимый способ создания скриншота.


Создание скриншота из панели инструментов разработчика

6. Команда console.log() — это далеко не единственный способ что-то логировать в консоль


Все пользуются командой console.log() для логирования отладочных данных. Однако этой командой возможности по логированию не исчерпываются. В частности, в распоряжении разработчика имеются команды console.warn() и console.error().

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


Команды console.warn() и console.error()

Для вывода в консоль неких структурированных данных, удобно оформленных в виде таблицы, можно воспользоваться командой console.table().


Команда console.table()

Возможности по работе с консолью этими командами не ограничиваются. Например, существуют ещё такие команды, как console.assert() и console.group(). Здесь можно найти подробный рассказ о подобных командах.

7. Конструкция $_ возвращает самое свежее вычисленное выражение


Конструкцию $_ можно использовать для возврата значения предыдущей операции, выполненной в консоли.


Использование конструкции $_

8. Команда $() — это сокращение для document.querySelector()


Команду $() можно использовать в консоли для быстрого выбора элемента. Возможности jQuery тут, кстати, не применяются, хотя на первый взгляд может показаться, что это не так.

Аналогично, команда $$() — это сокращение для document.querySelectorAll().


Использование $()

9. Включение состояний элементов, таких, как hover или focus, в панели Styles


Если в ходе исследования элемента нужно изучить его поведение в состоянии hover, это может оказаться непростой задачей, так как для перевода элемент в это состояние нужно, чтобы над ним находился бы указатель мыши. Решение этой задачи можно облегчить, воспользовавшись возможностями панели Styles. Тут можно принудительно переводить элементы в такие состояния, как hover или focus.


Принудительный перевод элемента в заданное состояние

10. Сочетание нажатия на клавишу Ctrl и щелчка мыши помогает найти определение CSS-правила


Вам когда-нибудь нужно было узнать о том, где описано некое CSS-правило? Эту задачу очень легко решить, нажав на клавишу Ctrl и щёлкнув мышью по интересующему вас правилу. В macOS вместо Ctrl используется Cmd.


Ctrl+щелчок мышью — поиск места определения CSS-правила

Уважаемые читатели! Что бы вы добавили в приведённый здесь список малоизвестных возможностей инструментов разработчика Chrome?


RUVDS.com
1 059,31
RUVDS – хостинг VDS/VPS серверов
Поделиться публикацией

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

    +11
    О, в этом месяце такого поста ещё не было
      +1

      Зато новый, улучшенный, перевод:


      Вам когда-нибудь нужно было узнать о том, где описано некое CSS-правило? Эту задачу очень легко решить, нажав на клавишу Ctrl и щёлкнув мышью по интересующему вас правилу.

      Кто на ком стоял ­— можно долго ломать голову… Если я уже вижу перед собой «правило» (что бы это не значило) — зачем мне по нему щелкать?..

        +1
        Это вы зря, случаи разные бывают.
        1. удостоверится что правило подъехало из нужного файла
        2. удостоверится что файл не из кэша (когда надо проверить соседнее правило на который селекторы могут на странице еще отсутствовать)
        3. банально понять из какого файла растут ноги
        4. посмотреть соседние правила (иногда тупо быстрее перейти по ссылке)
          0
          Так там же в каждом блоке правил указана ссылка на источник, вплоть до номера строки:
          Заголовок спойлера
          image
            0
            Бывают случаи когда ссылки нет, но переход при этом все равно работает. В любом случае, иногда быстрее перейти по свойству, чем по ссылке.
            Спорить конечно можно долго, но тут больше оценивается количество функционала, которое как раз таки может удовлетворить больше вкусов)
      +4

      А что же тогда известные возможности???

        0
        ПКМ — Просмотреть код
        0

        Про снятие полного скриншота страницы возможность оказалась полезной, не знал о ней ранее, приходилось использовать сторонние сервисы.

          0
          1) Не показано, что в консоли создаётся temp1. У вас на скрине пустая консоль
          2) Не указано, что нужно нажать на иконку с глазом
            0
            Хабр (или автор), похоже, сконвертировал гифки в PNG.
              0

              Хабр. В мобильной версии гифки заменены картинкой. Чтоб посмотреть гифку — кликните по ней

            +4
            Кеш при разработке практически всегда отключаю (уж очень он мешает).
            Некоторые пункты взял на вооружение, спасибо
              0
              Вместо «Store as global variable» на элементах удобнее использовать $0… $4 — указатели на DOM элементы, выбранные в инспекторе, где $0 — текущий, $1 — предыдущий выбранный и т. д. Кстати подобный подход практикуют разработчики сторонних расширений, например Vue Devtool, $vm0 — выбранный компонент
                0
                3 из 10 новье, как то скромно.
                Ruvds вы чего, качественней бы подборку, лафхаками теперь давайте исправляйтесь.
                  0

                  Неплохо бы упомянуть ещё console.dir(). У console.log() есть фатальный недостаток: крупные объекты он по умолчанию выводит свёрнутыми, и подгружает свойства объекта только после клика — на этот момент они могут быть неактуальными и лишь запутывают разработчика. console.dir() выводит объект сразу развёрнутым. Однако, злоупотреблять им не стоит, так как можно быстро забить оперативку старыми объектами. Также мгновенная подгрузка не распространяется на вложенные объекты, поэтому для просмотра многоуровневых объектов лучше использовать отладчик.

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

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