Как переместить консоль вниз в Chrome

Обновлено: 21.11.2024

Тестирование веб-сайта или веб-приложения и его пользовательского интерфейса может быть сложным и занимать много времени, особенно если вы не используете соответствующие инструменты отладки, такие как консоль Chrome, также известную как инструменты разработчика Chrome.

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

Компания Google приложила немало усилий, чтобы сделать Chrome DevTools максимально удобным для разработчиков. Настолько, что вопрос больше не в том, что вы можете сделать с помощью этих инструментов разработчика, встроенных непосредственно в браузер Google Chrome. Теперь все зависит от того, как много вы знаете о консоли Chrome.

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

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

Как открыть консоль Chrome

Обычным способом доступа к Chrome DevTools является нажатие кнопки Настройка и управление Google Chrome (три вертикальные точки в правом верхнем углу строки меню браузера Chrome), прокрутка вниз до дополнительные инструменты и выберите инструменты разработчика.

Сочетание клавиш: Ctrl + Shift + I для Windows и Cmd + Options + I для Macintosh.

Кроме того, вы можете получить доступ к консоли Chrome, щелкнув правой кнопкой мыши любой элемент на веб-сайте и выбрав параметр "Проверить элемент".

Панель консоли Chrome появится сбоку или внизу окна браузера, если вы воспользуетесь любым из способов, упомянутых выше. Вы можете разблокировать панель консоли Chrome в отдельном окне или изменить положение док-станции, нажав кнопку Настройка и управление инструментами разработчика (три вертикальные точки в правом верхнем углу панели инструментов разработчика) и выбрав свой предпочтительную позицию рядом с параметром Dock side.

10 советов по консоли Chrome, которые должен знать каждый разработчик

1. Моделирование мобильных устройств

Одним из наиболее важных аспектов тестирования веб-сайтов является определение того, насколько отзывчивы дизайны ваших страниц, а также их критические точки по отношению к различным устройствам. Вы можете использовать Chrome DevTools для тестирования медиа-запросов или определения разрешения, при котором веб-сайт не работает, чтобы вы могли указать, где применять медиа-запрос, имитируя различные мобильные устройства.

Чтобы получить доступ к режиму устройства консоли Chrome, где вы можете имитировать различные мобильные устройства, нажмите на панель инструментов переключения устройств (маленький значок телефона и планшета) в верхнем левом углу панели консоли Chrome. Это изменит окно веб-сайта на адаптивный режим.

Сочетание клавиш: Ctrl + Shift + M (Cmd + Shift + M).

Набор инструментов, который появится в окне веб-сайта, позволит вам выбрать устройства и разрешение, которые вы хотите имитировать, а также добавить мобильные устройства, которых нет в списке.

2. Проверить сетевую активность

Перейдите на вкладку сети в окне DevTools. Это откроет сетевую панель с пустым журналом, потому что инструмент регистрирует сетевую активность только тогда, когда он открыт. Нажмите Ctrl + R (Cmd + R) или перезагрузите веб-сайт, чтобы просмотреть сетевой журнал своей страницы.

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

.

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

3. Дросселирование сети

Подобно моделированию мобильного устройства, вы можете использовать консоль Chrome для имитации различных скоростей Интернета. Эта функция может быть полезна, если вы хотите протестировать работу веб-сайта на определенной скорости, например, на мобильном устройстве 3G.

В строке меню панели «Сеть» нажмите «В сети» (дросселирование) и выберите скорость интернета по вашему выбору. Чтобы добавить настраиваемый сетевой профиль, нажмите кнопку добавить в раскрывающемся меню и введите предпочтительную скорость загрузки и выгрузки.

4. Добавить фрагмент скрипта

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

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

Используйте Ctrl + Shift + P или Cmd + Shift + P (Mac), чтобы открыть командное меню, введите фрагменты и нажмите создать новые фрагменты.

Используйте Ctrl + Enter или Cmd + Enter, чтобы запустить код, или нажмите значок Выполнить фрагмент под текстовым окном.

5. Сделать скриншоты веб-сайта

Chrome DevTools позволяет делать скриншоты различных частей веб-сайта. Откройте командное меню с помощью Ctrl + Shift + P или Cmd + Shift + P (Mac) и введите скриншот. Выберите нужный тип скриншота. DevTool автоматически сделает снимок экрана и загрузит изображение в виде файла .jpg в каталог загрузок по умолчанию.

6. Включить режим редактирования текста контента

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

Нажмите клавишу ввода, чтобы включить эту функцию.

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

Управлять цветом на веб-сайте проще с помощью палитры цветов с набором инструментов. Пипетка позволяет выбирать цвета непосредственно с веб-страниц и устанавливать их в свойствах цвета. Вы можете настроить оттенок и непрозрачность цветов с помощью палитры цветов, а также конвертировать между RGBA, HEX и HSLA простым щелчком мыши.

Чтобы получить доступ к палитре цветов, выберите элемент, цвет которого вы хотите изменить. Это должно открыть вкладку элемента и панель таблицы стилей справа. Найдите свойство CSS элемента и щелкните соответствующее поле цвета, чтобы открыть палитру цветов.

8. Изменить свойство CSS

Консоль Chrome предлагает простой доступ для настройки свойства CSS любого элемента на веб-сайте. Нажмите кнопку выбора (Ctrl + Shift + C или Cmd + Options + C), наведите курсор на элемент, который вы хотите изменить, чтобы просмотреть его свойства, щелкните элемент.

Это должно выделить корень HTML элемента на панели элементов и свойства CSS в правой части панели DevTools. Перейдите на панель «Стили» и прокрутите до свойств, которые вы хотите редактировать для внесения изменений в режиме реального времени. Вы можете просмотреть полные свойства любого стиля, нажав Ctrl + щелчок (Cmd + щелчок) на свойстве.

9. Критический момент JavaScript

Найти и исправить ошибки JavaScript гораздо проще с помощью точек останова, чем с помощью метода console.log(). Это связано с тем, что в последнем методе вам необходимо вручную получить доступ к исходному коду и вставить операторы console.log() в соответствующий код перед перезагрузкой страницы для просмотра журналов. Точки останова не обязательно требуют от вас понимания структуры кода, прежде чем вы сможете приостановить соответствующий код.

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

Кроме того, вы можете использовать прослушиватель событий на панели отладчика, чтобы установить точку останова со ссылкой на конкретное событие, на которое вы ориентируетесь в сценарии, например щелчок мыши или воспроизведение мультимедиа. Обновите страницу с помощью Ctrl + R (Cmd + R) и используйте инструменты панели отладчика для перемещения шагов.

10. Сохранить элемент HTML как глобальную переменную JS

Независимо от того, просматриваете ли вы сложный объект, зарегистрированный в консоли, или элемент DOM на сайте, вы можете автоматически сохранять глобальную ссылку на них. Это очень удобно при отладке, так как вы можете просто проверять их как глобальную переменную.

Щелкните правой кнопкой мыши объект в консоли или HTML-блок элемента на вкладке «Элемент» и выберите «Сохранить как глобальную переменную» в раскрывающемся меню. Консоль Chrome автоматически сохранит элемент как глобальную переменную и сделает его доступным в консоли. Имя переменной будет «tempN», где N представляет количество раз, когда вы сохраняли переменные с помощью этого метода. Первая переменная, очевидно, будет называться «temp1», а вторая — «temp2».

Заключение

Умение и скорость — это атрибуты знакомства с инструментами, и Chrome DevTools это очень важно. Чем больше у вас информации, тем лучше и быстрее вы будете использовать инструменты, что, в свою очередь, сократит время, затрачиваемое на отладку.

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

Вы можете изменить место прикрепления DevTools в браузере. По умолчанию Microsoft Edge DevTools закреплен справа от окна браузера.Вы также можете прикрепить DevTools к нижней или левой части окна или открепить DevTools к отдельному окну.

Чтобы изменить расположение DevTools в окне браузера:

Пристыковать слева или справа позволяет DevTools рядом с вашей веб-страницей, и это отлично подходит для эмуляции мобильных устройств (эмуляция устройства). Параметры Закрепить слева и Закрепить справа лучше всего подходят для дисплеев с высоким разрешением.

Открепить DevTools в отдельном окне

Открепите DevTools в отдельном окне, если вы хотите работать с несколькими мониторами или если вам нужно работать с полноэкранным приложением и вам нужно много места для пользовательского интерфейса DevTools. На следующем изображении показаны инструменты DevTools, отстыкованные в отдельном выделенном окне:

Поскольку WebTools теперь имеет собственное выделенное окно, создаваемая веб-страница теперь занимает все окно браузера:

Закрепите DevTools в левой части браузера

На следующем изображении показаны DevTools, закрепленные в левой части окна браузера:

Закрепите DevTools в нижней части браузера

Прикрепить к низу помогает, если у вас недостаточно места на горизонтальном дисплее или вы хотите отладить длинный текст в DOM или консоли. На следующем изображении показаны DevTools в нижней части окна браузера:

Закрепите DevTools в правой части браузера

На следующем изображении показаны DevTools в правой части окна браузера, которое является расположением по умолчанию:

Измените место прикрепления DevTools с помощью командного меню

Откройте меню команд. Для этого нажмите кнопку меню «Настройка и управление DevTools» ( ), а затем нажмите «Выполнить команду». Или нажмите Shift + Ctrl + P в Windows/Linux или Command + Shift + P в macOS.

В настоящее время Google Chrome является одним из самых популярных веб-браузеров, используемых сегодня разработчиками. По данным StatCounter, по состоянию на сентябрь 2019 года доля Google Chrome на мировом рынке браузеров составляет 63,72%. Chrome DevTools может значительно улучшить ваш рабочий процесс, помогая разрабатывать, тестировать и отлаживать веб-сайты прямо в браузере. Многие из вас, вероятно, регулярно используют Chrome DevTools, но ознакомьтесь с этими дополнительными советами и рекомендациями, чтобы повысить свою продуктивность.

Что такое Google Chrome DevTools?

Инструменты разработчика Google Chrome, также известные как Chrome DevTools, представляют собой инструменты веб-разработки и отладки, встроенные прямо в браузер. Они предоставляют разработчикам более глубокий доступ к своим веб-приложениям и браузеру. Вы можете делать все, от тестирования области просмотра на мобильном устройстве до редактирования веб-сайта на лету и даже измерения производительности всего веб-сайта или отдельных ресурсов.

Чтобы использовать последнюю версию инструментов разработчика, вы можете использовать Chrome Canary, экспериментальную версию Chrome, которая обновляется каждую ночь. Chrome Canary можно запускать параллельно с Chrome, чтобы вы могли проверять любые проблемы, которые могут возникнуть.

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

Мы упомянем некоторые сочетания клавиш Chrome DevTools ниже, но вы можете увидеть их полный список на веб-сайте Google Developer.

Открытие Chrome DevTools

Существует несколько способов открыть Chrome DevTools, а это значит, что вы можете использовать наиболее удобный для вас способ.

Открыть из меню браузера

Вы можете открыть Chrome DevTools из меню Chrome. Перейдите в раздел «Дополнительные инструменты» и нажмите «Инструменты разработчика» .

Открыть правой кнопкой мыши

Вы также можете открыть Chrome DevTools из контекстного меню. Щелкните правой кнопкой мыши любой элемент страницы и выберите "Проверить" (или "Проверить элемент" ).

Открывать с помощью сочетаний клавиш

Вы также можете использовать следующие сочетания клавиш:

Советы и рекомендации

Ниже перечислены лишь некоторые из сотен функций, которые можно выполнять с помощью Chrome DevTools. Кроме того, это хороший ускоренный курс по инструментам, если вы еще не пользовались ими.

Быстрое переключение файлов

Вы можете легко получить доступ к любому файлу в текущем проекте или веб-странице, нажав Cmd + P ( Ctrl + P ), когда Chrome DevTools открыт и выполняет поиск имени.

Красивый принт

Знаете ли вы, что в Chrome DevTools встроена функция красивой печати? Вы можете легко изменить форматирование свернутого кода, нажав <> .

Редактировать элемент HTML

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

Изменить свойство CSS

Как и при редактировании HTML, вы также можете изменить CSS в Chrome DevTools и просмотреть, как будет выглядеть результат. Это, пожалуй, одно из самых распространенных применений этого инструмента. Просто выберите элемент, который вы хотите изменить, и на панели стилей вы можете добавить/изменить любое свойство CSS, которое хотите.

Искать исходный код

Вы можете быстро найти весь исходный код, нажав Cmd + Opt + F ( Ctrl + Shift + F ).

Точки останова JavaScript

При отладке JavaScript иногда бывает полезно установить точки останова. Вы можете установить точки останова в Chrome DevTools, щелкнув номер строки, на которой вы хотите сделать перерыв, а затем нажмите Cmd + R ( Ctrl + R ), чтобы обновить страницу. Затем страница будет запущена прямо до этой точки останова.

Перейти к номеру строки

Вы можете автоматически перейти к строке кода, нажав Cmd + O ( Ctrl + O ) и используя синтаксис строки. В приведенном ниже примере мы ввели :375:18, чтобы перейти к строке 375, столбцу 18.

Несколько курсоров

Вам приходилось что-то добавлять к нескольким строкам? Вы можете легко добавить несколько курсоров, нажав Cmd + Click ( Ctrl + Click ) и введя информацию в несколько строк одновременно.

Положение стыковки

Вы также можете изменить положение док-станции Chrome DevTools. Вы можете отстыковать его в отдельном окне или закрепить в левой, нижней или правой части браузера. Положение док-станции можно изменить, нажав Cmd + Shift + D ( Ctrl + Shift + D ) или через меню.

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

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

Чтобы войти в режим устройства, нажмите на маленький значок телефона и планшета в Chrome DevTools или нажмите Cmd + Shift + M ( Ctrl + Shift + M ). Затем вы можете выбрать, какое устройство и разрешение эмулировать, добавить сетевой дроссель и даже определить ориентацию устройства.

Цветовая палитра и средство выбора

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

Изменить цветовой формат

Вы можете переключаться между RGBA, HSL и шестнадцатеричным форматированием, нажимая Shift + клик по цветовому блоку.

Переключить состояние элемента

Вы когда-нибудь пытались выяснить, откуда берется скрытый стиль, скажем, селектор :hover? В инструментах разработчика Firefox вы можете увидеть это при выборе элемента, но не в Chrome DevTools. Однако есть кое-что получше, которое называется Toggle Element State. Это позволяет принудительно задать состояние элемента, например :hover , чтобы затем использовать панель стилей для просмотра свойств.

Скопировать изображение как URI данных (в кодировке base64)

Вы можете сохранить любое изображение с веб-страницы как URI данных или, скорее, в кодировке base64. Нет необходимости использовать бесплатный онлайн-конвертер, так как он уже встроен в Chrome DevTools. На панели «Сеть» щелкните изображение, а затем щелкните его правой кнопкой мыши, чтобы выбрать параметр «Копировать изображение как URI данных».

Вы получите изображение в следующем формате:

Сетевая диафильм

Функция сетевой киноленты позволяет вам видеть, как ваша страница отображается от начала до конца, делая снимки экрана в процессе загрузки. Это может быть отличным способом увидеть, как ваш шрифт отображается, и если вы имеете дело с такими проблемами, как FOIT или FOUT.

На панели «Сеть» щелкните значок настроек, установите флажок «Создавать снимки экрана», а затем нажмите Cmd + R ( Ctrl + R ), чтобы обновить страницу. После обновления страницы вы увидите, как ваша страница отображается от начала до конца.

Отслеживание эффективности

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

На панели «Производительность» нажмите Cmd + E ( Ctrl + E ), а затем Ctrl + R ( Cmd + R ), чтобы обновить страницу. Запишите количество времени, которое вы хотите контролировать. Затем вы можете нажать «Стоп» и оценить результаты.

DOMContentLoaded

У нас есть отличная статья о том, как заблокировать DOM и как это исправить. Эта функция позволяет вам видеть точное время DOMContentLoaded и общее время загрузки. Проверка этих значений может быть полезна для повышения общей производительности вашего веб-сайта или приложения.

На панели «Сеть» щелкните значок настроек, установите флажок «Показать обзор», а затем нажмите Cmd + R ( Ctrl + R ), чтобы обновить страницу. Синяя линия будет отображаться для DOMContentLoaded, а красная — для общего времени загрузки. Обычно все, что осталось от синей линии или касается ее, является ресурсами, которые блокируют DOM, или также называются ресурсами, блокирующими отрисовку.

Профили регулирования сети

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

На панели «Сеть» щелкните раскрывающийся список «Дроссель», а затем «Добавить». . В «Профилях регулирования сети» нажмите «Добавить пользовательский профиль». и добавьте профиль с вашими характеристиками.

Проверка безопасности

На панели «Безопасность» нажмите Cmd + R ( Ctrl + R ), чтобы обновить страницу. Затем он отобразит соответствующую информацию о безопасности.

Проверка HTML-кода Google AMP

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

Обзор

Как видите, в Chrome DevTools есть множество функций, которые помогут вам лучше разрабатывать, быстрее отлаживать и более эффективно измерять производительность вашего веб-сайта или приложения. Советы, упомянутые выше, являются лишь некоторыми из многих доступных функций. У вас есть любимая функция DevTools, которую мы пропустили? Если да, сообщите нам об этом в комментариях ниже.

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

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

Шаг 1. Чтобы открыть консоль в Chrome, используйте сочетание клавиш: Cmd + Option + J (на Mac) или Ctrl + Shift + J (в Windows). В качестве альтернативы вы можете щелкнуть правой кнопкой мыши веб-страницу и нажать «Проверить», чтобы открыть консоль разработчика.

Шаг 2. Перейдите на вкладку "Консоль" в этом окне.

Шаг 3. Повторите действие, которое вызывает у вас затруднения, и сделайте полный скриншот диалогового окна консоли.

Шаг 1. Чтобы открыть консоль в Firefox, используйте сочетание клавиш: Cmd + Option + K (на Mac) или Ctrl + Shift + J (в Windows). В качестве альтернативы вы можете щелкнуть правой кнопкой мыши веб-страницу и выбрать «Проверить элемент», чтобы отобразить окно разработчика.

Шаг 2. Выберите вкладку "Консоль" в этом окне.

Шаг 3. Повторите действие, которое вызывает у вас затруднения, и сделайте полный скриншот диалогового окна консоли.

Шаг 1. Чтобы открыть консоль в Safari, необходимо сначала включить «Меню разработки» в строке меню Mac. Для этого откройте Safari в строке меню Mac в верхней части экрана и выберите «Настройки».

Шаг 2. Открыв диалоговое окно «Настройки», нажмите «Дополнительно» вверху и установите флажок «Показать меню «Разработка» в строке меню». После этого вы можете выйти из окна.

Шаг 3: Чтобы открыть консоль, вы можете использовать это сочетание клавиш: Cmd + Option + C. В качестве альтернативы вы можете щелкнуть правой кнопкой мыши веб-страницу и выбрать «Проверить элемент», после чего появится окно разработчика.

Шаг 4. В открывшемся окне перейдите на вкладку "Консоль".

Шаг 5. Повторите действие, которое вызывает у вас затруднения, и сделайте полный скриншот диалогового окна консоли.

Шаг 1. Чтобы открыть консоль в Microsoft Edge, вы можете использовать следующую комбинацию клавиш: Control + Shift + I. В качестве альтернативы вы можете щелкнуть правой кнопкой мыши и выбрать в меню пункт "Проверить":

Шаг 2. В открывшемся окне перейдите на вкладку "Консоль".

Шаг 3. Повторите действие, которое вызывает у вас затруднения, и сделайте полный скриншот диалогового окна консоли.

Шаг 1. Чтобы открыть консоль в настольном приложении monday.com, выберите «Консоль разработчика» в меню «Вид» на панели инструментов.

Шаг 2. Консоль откроется в главном окне приложения. Однако может открыться и новое окно. В любом из окон перейдите на вкладку "Консоль".

Шаг 3. Повторите действие, которое вызывает у вас затруднения, и сделайте полный скриншот диалогового окна консоли.

Если у вас есть какие-либо вопросы, свяжитесь с нашей командой, используя нашу контактную форму . Мы доступны 24/7 и рады помочь!

Чтобы получить доступ к DevTools на любой веб-странице или в приложении в Google Chrome, вы можете использовать один из следующих вариантов:

  • Откройте меню Chrome в правом верхнем углу окна браузера и выберите "Инструменты" > "Инструменты разработчика".
  • Нажмите правой кнопкой мыши на любом элементе страницы и выберите "Проверить элемент".

Чтобы открыть диалоговое окно «Общие настройки», введите ? или F1, когда окно инструментов разработчика открыто. Нажмите Esc, чтобы закрыть диалоговое окно настроек.

Все панели

< /tr>
Windows/Linux Mac
Показать диалог общих настроек ? , F1 ?
Следующая панель Ctrl + ] Cmd + ]
Предыдущая панель Ctrl + [ Cmd + [
Назад в истории панели Ctrl + Alt + [ Cmd + Alt + [
Вперед по истории панели Ctrl + Alt + ] Cmd + Alt + ]
Перейти к панели 1-9 (если включено в общих настройках) Ctrl + 1-9 Cmd + 1-9
Переключить консоль / закрыть диалоговое окно настроек при открытии Esc Esc
Обновить страницу F5 , Ctrl + R Cmd + R
Обновить страницу, игнорируя кэшированное содержимое Ctrl + F5 , Ctrl + Shift + R Cmd + Shift + R< /td>
Поиск текста в текущем файле или панели Ctrl + F Cmd + F
Поиск текста по всем источникам Ctrl + Shift + F Cmd + Alt + F
Поиск по имени файла (кроме на временной шкале) Ctrl + O , Ctrl + O Cmd + O , Cmd + O
Восстановить размер текста по умолчанию Ctrl + 0 Shift + 0
Увеличить Ctrl + +< /td> Shift + +
Уменьшить масштаб Ctrl + - Shift + -

Панель элементов ◊

Windows / Linux Mac
Отменить изменение Ctrl + Z< /td> Cmd + Z
Повторить изменение Ctrl + Y Cmd + Y , Cmd + Shift + Z
Навигация Вверх, вниз Вверх, вниз
Развернуть/свернуть узел Вправо, Влево Вправо, Влево
Развернуть узел Один клик на теге Одиночный щелчок на теге
Редактировать атрибут Enter , Двойной щелчок на атрибуте Enter , дважды щелкните атрибут
Скрыть элемент H H
Включить редактирование как HTML F2

Щелкнув элемент правой кнопкой мыши, вы можете:

  • Принудительно использовать псевдосостояния элемента: ( :active , :hover , :focus , :visited )
  • Установите точки останова для элементов: (изменение поддерева, изменение атрибута, удаление узла)
  • Очистить консоль

Боковая панель стилей ◊

< /tr> < td>Вверх, Вниз < tr>

Эмуляция псевдосостояния элемента ( :active , :hover , :focus , :visited )

Добавить новые селекторы стиля

Панель ресурсов

Панель сети ◊

Понимание информации, отображаемой в каждом столбце

Панель источников ◊

Не останавливаться на исключениях

Пауза для всех исключений (включая обнаруженные в блоках try/catch)

Пауза для необработанных исключений (обычно тех, которые вам нужны)

Панель временной шкалы ◊

Windows/Linux Mac
Редактировать правило Один щелчок< /td> Один щелчок
Вставить новое свойство Один щелчок по пробелу Один щелчок по пробелу
Перейти к строке объявления свойства правила стиля в исходном коде Ctrl + щелчок по свойству Cmd + щелчок по свойству
Перейти к строке объявления значения свойства в исходном коде Ctrl + щелчок по значению свойства Cmd + щелкнуть по значению свойства
Перейти к строке объявления свойства правила стиля в исходном коде Ctrl + щелчок по свойству Cmd + щелчок по свойству
Перейти к строке объявления значения свойства в исходном коде Ctrl + щелчок по значению свойства Cmd + щелкнуть по значению свойства
Прокрутка значения определения цвета Shift + щелчок по палитре цветов Shift + щелчок по палитре цветов
Просмотреть au для завершения предложений Ctrl + Space Cmd + Space
Редактировать следующее/предыдущее свойство Tab , Shift + Tab Tab , Shift + Tab
Увеличение/уменьшение значения Вверх, Вниз
Увеличить/уменьшить значение на 10 Shift + Up , Shift + Down Shift + Up , Shift + Down
Увеличить/уменьшить значение на 10 PgUp , PgDown PgUp , PgDown
Увеличить/уменьшить значение на 100 Shift + PgUp , Shift + PgDown Shift + PgUp , Shift + PgDown
Увеличить/уменьшить значение на 0,1 Alt + Up , Alt + Down Opt + Up , Opt + Down
Windows/Linux Mac
Начать/остановить запись Ctrl + E Cmd + E
Сохранить данные временной шкалы Ctrl + S Cmd + S
Загрузить данные временной шкалы Ctrl + O Cmd + O

Панель профилей ◊

Windows/Linux Mac
Начать/остановить запись Ctrl + E Cmd + E
  • Профилировщик ЦП: показывает, где тратится время выполнения функций JavaScript на вашей странице.
  • Профилировщик кучи: показывает распределение памяти по объектам JavaScript вашей страницы и связанным узлам DOM.

Быстрые клавиши поиска

Поиск или переход к определенным файлам, методам или номерам строк в веб-приложении на панели "Источники"

Консоль ◊

Windows/Linux Mac
Поиск скриптов, таблиц стилей и фрагментов по имени файла Ctrl + O ⌘ + O
Поиск текста в текущем файле Ctrl + F ⌘ + F
Поиск текста по всем источникам Ctrl + Shift + F ⌘ + Alt + F
Фильтр/переход к функции JavaScript/правилу CSS при просмотре файла Ctrl + Shift + O ⌘ + Shift + O
Открыть диалоговое окно номера строки при просмотре файла Ctrl + K ⌘ + L
Оценить код, выбранный в скриптах, в консоли Ctrl + Shift + E ⌘ + Shift + E
< tr> < tr>
Windows / Linux Mac
Следующее предложение Вкладка Tab
Предыдущее предложение Shift + Tab Shift + Tab
Принять предложение Вправо Вправо
Предыдущая команда/строка Вверх< /td> Вверх
Следующая команда / строка Вниз Вниз
Очистить консоль Ctrl + L Cmd + K , Opt + L
Многострочный ввод< /td> Shift + Enter Ctrl + Return
Выполнить Enter Return

Щелкните правой кнопкой мыши на консоли:

Скринкастинг

Windows/Linux Mac
Увеличение и уменьшение масштаба щипком Alt + Scroll , Ctrl + Cick и перетащите двумя пальцами Opt + Scroll , Cmd + Cick и перетащите двумя пальцами
Инструмент проверки элемента Ctrl + Shift + C Cmd + Shift + C

Эмуляция

Windows / Linux Mac
Увеличение и уменьшение масштаба щипком Shift + Прокрутка Shift + Прокрутка

Консольный API ◊

API командной строки ◊

< /tr>
Command Description
$$ Возвращает массив элементов, соответствует заданному селектору CSS.
$0 Выбранный в данный момент объект в инспекторе.
$_ Предварительно оцененный оператор
$1 Предварительно выбранный объект в инспекторе.
$n(index) Доступ к массиву последних 5 проверенных элементов.
dir(object)< /td> Выводит интерактивный список всех свойств объекта. Это выглядит идентично представлению, которое вы увидите на вкладке DOM.
dirxml(node) Печатает исходное XML-дерево HTML или XML. элемент. Это выглядит идентично представлению, которое вы увидите на вкладке HTML. Вы можете щелкнуть любой узел, чтобы просмотреть его на вкладке HTML.
clear() Очищает консоль.
copy() Копирует все переданное ему в буфер обмена.
inspect(object[, tabName]) Проверяет объект на наиболее подходящей вкладке или вкладке, определяемой необязательным аргументом tabName.
keys(object) Возвращает массив, содержащий имена всех свойств объекта.
values(object) Возвращает массив, содержащий значения всех свойств объекта.< /td>
monitorEvents(object[, types]) Включает регистрацию всех событий, отправляемых объекту. Необязательные типы аргументов могут указывать конкретное семейство событий для регистрации. Наиболее часто используемые значения для типов — «мышь» и «ключ». Полный список доступных типов включает «композицию», «контекстное меню», «перетаскивание», «фокус», «форму», «ключ», «загрузку», «мышь», «мутацию», «рисование», «прокрутку». , "text", "ui" и "xul".
unmonitorEvents(object[, types]) Отключает ведение журнала для всех отправляемых событий к объекту.
performance
performance.timing
performance.memory
performance.navigation
profile([title]) Включает Профилировщик JavaScript. Необязательный аргумент title будет содержать текст, который будет напечатан в заголовке отчета о профиле.
profileEnd() Отключает профилировщик JavaScript и печатает свой отчет.

Флаги ◊

< /tr>
Функция Описание
-disable-javascript Отключить JavaScript из команды строка.
-disable-images Отключить изображения.
-disable-java Отключить Java.
-disable-plugins Отключить подключаемые модули.
-disable-popup-blocking Отключить блокировку всплывающих окон.
-start-maximized Запустить полноэкранный режим Chrome

Например: "C:\Documents and Settings\%username%\Local Settings\Application Data\Google\Chrome" -disable-javascript

Темы DevTools ◊

Настройте скин для DevTools с помощью самих DevTools, отсоединив их и нажав Ctrl + Alt + I или ⌃ + Alt + I на Mac.
Переопределите классы/идентификаторы Devtools для вашей темы с помощью:

  • Windows: C:/Users/%username%/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css
  • Mac OSX: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
  • Ubuntu: ~/.config/chromium/Default/User StyleSheets/Custom.css

Другие ярлыки Chrome

Вот несколько дополнительных сочетаний клавиш Chrome, которые полезны для общего использования в браузере, не относящегося к DevTools. Просмотреть все ярлыки Chrome для Windows, Mac и Linux.

< tr>
Windows / Linux Mac
Найти далее Ctrl + G Cmd + G
Найти предыдущий Ctrl + Shift + G Cmd + Shift + G
Открыть новое окно в режиме инкогнито Ctrl + Shift + N Cmd + Shift + N
Включение и выключение панели закладок Ctrl + Shift + B Cmd + Shift + B
Просмотреть страницу истории Ctrl + H Cmd + Y
Просмотреть страницу загрузок Ctrl + J Cmd + Shift + J
Просмотреть диспетчер задач Shift + ESC Shift + ESC
Следующая страница в истории просмотра вкладок Alt + Right Alt + Right
Предыдущая страница в истории просмотра вкладок Backspace , Alt + Left Backspace , Alt + Left
Выделить содержимое в области веб-адреса F6 , Ctrl + L , Alt + D Cmd + L , Alt + D
Помещает ? в адресной строке для выполнения
поиска по ключевому слову с использованием поисковой системы по умолчанию		 Ctrl + K , Ctrl + E Cmd + K , Cmd + E

о страницах

Страница Описание
about:about Отображает все хром: //chrome-urls
about:stats Показать статистику страницы.
about:memory Отображение использования памяти в многопроцессорном браузере.
about:plugins Отображение установленных подключаемых модулей.
about:gistograms Показать время соединения.
about:dns Показать Информация DNS.
about:cache Отображение кэшированных веб-страниц.
about:network< /td> Отображение меню для различного мониторинга и тестирования сети.
view-cache:stats Отображение кэшированных документов.
chrome-resource:/favicon/ Отображение двоичных данных для файла PNG.
chrome-resource :/new-tab/ Шаблон для пустой вкладки.
about:version Отображение информации о браузере .< /td>

URL-адреса Chrome

Для отладки

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

  • chrome://сбой
  • chrome://убить
  • chrome://зависать
  • chrome://shorthang
  • chrome://gpuclean
  • chrome://gpucrash
  • chrome://gpuhang

Ссылки на инструменты разработки


Эта работа находится под лицензией Creative Commons Attribution 3.0 Unported License.
Шпаргалка Джареда Уильямса. Сообщите мне, если вы найдете что-то неправильное.
Внести вклад в шпаргалку | Внесите свой вклад в инструменты разработчика

Читайте также: