Ctrl shift i что это в браузере

Взаимодействие с DOM с помощью консоли

Средство «Консоль» — это отличный способ взаимодействия с веб-страницей в браузере. В средствах разработки вы обычно взаимодействуете с DOM с помощью средства «Проверка » для выбора элементов и с помощью средства «Элементы» для изменения модели DOM, например для добавления или изменения атрибутов или стилей элементов.

Средство Console также можно использовать для взаимодействия с DOM с помощью кода JavaScript. Например, можно найти элементы в дереве DOM и управлять ими с помощью API DOM.

Дополнительные сведения о средстве проверки см. в статье Анализ страниц с помощью средства проверки. Дополнительные сведения о средстве Elements см. в статье Проверка, изменение и отладка HTML и CSS с помощью средства Elements.

Поиск элемента в дереве DOM

Чтобы найти элемент в дереве DOM из средства Консоли , выполните следующие действия:

1. Перейдите на веб-страницу, которую вы хотите проверить. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.
2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство «Консоль» откроется в средствах разработки рядом с веб-страницей.
3. Введите или вставьте следующий код в консоль и нажмите клавишу ВВОД.

document.querySelector('main'); 

Элемент

из дерева DOM отображается в консоли:

В консоли наведите указатель мыши на результирующий HTML-элемент

или нажмите клавиши SHIFT+TAB. На отображаемой веб-странице DevTools выделяет соответствующий

элемент:

Изменение модели DOM веб-страницы

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

1. Перейдите на веб-страницу, которую вы хотите изменить. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.
2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство «Консоль» откроется в средствах разработки рядом с веб-страницей.
3. Вставьте следующий код в консоль:

document.querySelector("h1").style.backgroundColor = "lightgrey"; 

За заголовком страницы отображается серый фон:

Получение ссылки на элемент

На сложной веб-странице может быть трудно найти нужный элемент для изменения. Но вы можете использовать средство проверки , чтобы помочь вам. Предположим, вы хотите изменить текст первой ссылки в элементе Section 1 отображаемой страницы:

Чтобы получить ссылку на элемент link, который требуется изменить, выполните следующие действия:

1. Перейдите на веб-страницу, которую вы хотите проверить. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.
2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство «Консоль» откроется в средствах разработки рядом с веб-страницей.
3. Щелкните инструмент Проверка (), а затем на отображаемой веб-странице наведите указатель мыши на ссылку, например Ссылку 1:
4. Щелкните ссылку с наведенным курсором на отрисованную веб-страницу. DevTools открывает инструмент Элементы с выбранным соответствующим элементом:
5. Нажмите кнопку . рядом с элементом в дереве DOM и выберите Копировать>путь JS: Ниже приведен путь JS, который вы скопировали:

document.querySelector("body > main > section:nth-child(1) > ul > li:nth-child(1) > a") 

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

Используйте все API-интерфейсы DOM, которые нужно изменить в дереве DOM в консоли. Чтобы сделать его более удобным, консоль поставляется с несколькими вспомогательными служебными методами.

Полезные служебные функции консоли

Многие удобные методы и сочетания клавиш доступны в качестве служебных функций в средстве консоли . Некоторые из этих служебных функций очень полезны для взаимодействия с деревом DOM веб-страницы и описаны ниже. Дополнительные сведения см. в разделе Функции и селекторы средств консоли.

Получение элементов с помощью функций и сочетаний клавиш $

Символ $ имеет особое значение в средстве Консоли :

• Функции $() и $$() являются более короткими версиями document.querySelector() функций и document.querySelectorAll() .
• $0 , $1 , $2 , $3 и $4 — это сочетания клавиш для элементов, которые вы недавно выбрали в инструменте Элементы . $0 всегда является последним выбранным элементом. Таким образом, в предыдущем примере Получение ссылки на элемент после выбора элемента с помощью средства «Проверка » можно изменить его текст с помощью $0.textContent = «Updated link» того же эффекта.
• $x() позволяет выбрать элементы DOM с помощью XPath.

Получение всех ссылок со страницы

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

1. Перейдите на веб-страницу, с которой вы хотите получить ссылки. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.
2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство «Консоль» откроется в средствах разработки рядом с веб-страницей.
3. Чтобы получить список всех ссылок на странице, введите следующий код в консоли и нажмите клавишу ВВОД:

$$(‘a’) является сокращением от document.querySelectorAll(‘a’) .

Разверните список ссылок, зарегистрированных в консоли, а затем разверните первый объект ссылки. Отображаются свойства ссылки:

$$('a').map(a => < return >); 

$$('a').map(a => < return >).filter(a => < return a.url.startsWith("https"); >); 

console.table($$('img'), ['src','alt']) 

let headings = $$('main [id]').filter(el => < return el.nodeName.startsWith('H'); >).map(el => < return `$: $#$\n`; >); console.log(headings.join("\n")); 

copy($$('img').map(img => img.src).join("\n")); 

Очистка консоли

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

Вывод списка прослушивателей событий, назначенных элементу

Чтобы получить список всех прослушивателей событий, назначенных элементу, используйте служебную getEventListeners() функцию:

1. Перейдите на веб-страницу, которую вы хотите проверить. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.
2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство «Консоль» откроется в средствах разработки рядом с веб-страницей.
3. Щелкните средство «Проверка «, а затем на отображаемой веб-странице щелкните одно из изображений, чтобы выбрать его. Отобразится инструмент Элементы , а выбранный элемент изображения выделен в дереве DOM:
4. Откройте консоль , введите следующий код и нажмите клавишу ВВОД:

getEventListeners($0); 

В приведенном выше фрагменте $0 кода является ярлыком для выбранного в данный момент элемента в инструменте Элементы . Служебная getEventListeners() функция возвращает объект, содержащий все прослушиватели событий, назначенные изображению.

Мониторинг событий, активированных на странице

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

Мониторинг всех событий в элементе

Чтобы начать мониторинг событий, выполните приведенные далее действия.

1. Перейдите на веб-страницу, которую вы хотите отслеживать. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.
2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство «Консоль» откроется в средствах разработки рядом с веб-страницей.
3. Чтобы начать мониторинг событий, активируемых в элементе, например для одного из элементов, введите следующий код в консоли и нажмите клавишу ВВОД:

monitorEvents(document.querySelector('img')); 

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

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

Мониторинг определенных событий в элементе

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

1. Перейдите на веб-страницу, которую вы хотите отслеживать. Например, откройте демонстрационную страницу взаимодействия DOM в консоли DevTools в новой вкладке или окне.
2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство «Консоль» откроется в средствах разработки рядом с веб-страницей.
3. Чтобы начать мониторинг только событий указателя мыши, мыши и щелчка, которые активируются для первого элемента на странице, введите следующий код в консоли и нажмите клавишу ВВОД:

monitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']); 

Мониторинг событий в окне

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

Вставьте следующий код в консоль:

monitorEvents(window, ['resize', 'scroll']); 

Остановить мониторинг событий

При мониторинге событий в DOM консоль может заиметь. Чтобы остановить события мониторинга, используйте служебную unmonitorEvents() функцию:

unmonitorEvents(document.querySelector('img')); unmonitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']); unmonitorEvents(window, ['resize', 'scroll']); 

Сохранение скриптов взаимодействия DOM в виде фрагментов кода

Если вы несколько раз вводите один и тот же код взаимодействия DOM в консоли, вместо этого попробуйте сохранить код в виде фрагмента кода, а затем запустить его. Фрагменты кода сохраняются в средстве «Источники» , и их можно запустить оттуда или из меню «Команда«. Дополнительные сведения см. в статье Запуск фрагментов Кода JavaScript на любой веб-странице.

См. также

• Журнал сообщений в средстве консоли
• Запуск JavaScript в консоли

Сочетания клавиш в Microsoft Edge

Сочетания клавиш — это клавиши или комбинации клавиш, с помощью которых можно выполнять задачи, обычно требующие применения мыши. Ниже приведен список для новый Microsoft Edge и Microsoft Edge для Mac.

Нажмите клавишу

CTRL + SHIFT + B

Отобразить или скрыть панель избранного

ALT + SHIFT + B

Установить фокус на первый элемент на панели избранное

CTRL + D

Сохранить текущую вкладку в избранное

CTRL + SHIFT + D

Сохранить все открытые вкладки в избранное в новой папке

CTRL + SHIFT + E

Открытие поиска на боковой панели

ALT + D

Выделить URL-адрес в адресной строке для редактирования

CTRL + E

Открыть поисковый запрос в адресной строке

ALT + E

Открыть меню «Параметры и другое» ( )

CTRL + F

Открыть поиск на странице

ALT + F

Открыть меню «Параметры и другое» ( )

CTRL + G

Перейти к следующему результату поиска на странице

CTRL + SHIFT + G

Перейти к предыдущему результату поиска на странице

CTRL + H

CTRL + SHIFT + I

Открыть средства разработчика

ALT + SHIFT + I

Открыть диалоговое окно отправки отзыва

CTRL + J

CTRL + K

Открыть поисковый запрос в адресной строке

CTRL + SHIFT + K

Дублировать текущую вкладку

CTRL + L

Выделить URL-адрес в адресной строке для редактирования

CTRL + SHIFT + L

Вставить и найти или вставить и перейти (если это URL-адрес)

CTRL + M

Отключить звук текущей вкладки (переключатель)

CTRL + SHIFT + M

Выполнить вход с учетной записью другого пользователя или воспользоваться просмотром в качестве гостя

CTRL + N

Открытие нового окна

CTRL + SHIFT + N

Открыть новое окно InPrivate

CTRL + O

Открыть файл с компьютера в браузере Edge

CTRL + SHIFT + O

CTRL + P

Печать текущей страницы

CTRL + SHIFT + P

Печать с помощью диалогового окна системы

Перезагрузить текущую страницу

CTRL + SHIFT + R

Перезагрузить текущую страницу, игнорируя кэш содержимого

CTRL + S

Сохранение текущей страницы

CTRL + T

Открыть новую вкладку и переключиться на нее

CTRL + SHIFT + T

Повторно открыть последнюю закрытую вкладку и перейти к ней

ALT + SHIFT + T

Установить фокус на первый элемент на панели инструментов панели приложений

CTRL + U

CTRL + SHIFT + U

Запустить или остановить озвучивание текста

CTRL + SHIFT + V

Вставить без форматирования

CTRL + W

Закрыть текущую вкладку

CTRL + SHIFT + W

Закрытие текущего окна

CTRL + SHIFT + Y

CTRL + 0 (ноль)

Сбросить масштаб страницы

CTRL + 1, 2. 8

Перейти к определенной вкладке

CTRL + 9

Перейти к последней вкладке

CTRL + ENTER

Добавить www. в начало адресной строки элемент www., а в конец — элемент .com

CTRL + TAB

Переход к следующей вкладке

CTRL + SHIFT + TAB

Перейти к предыдущей вкладке

CTRL + Плюс (+)

CTRL + Минус (—)

CTRL + \ (в PDF-файле)

Переключиться в PDF-файле между макетами «По ширине» и «По размеру страницы»

CTRL + [ (в PDF-файле)

Повернуть PDF-файл против часовой стрелки на 90*

CTRL + ] (в PDF-файле)

Повернуть PDF-файл по часовой стрелке на 90*

CTRL + SHIFT + DELETE

Открыть параметры очистки данных браузера

Установить фокус на кнопку «Параметры и другое» ( )

ALT + СТРЕЛКА ВЛЕВО

ALT + СТРЕЛКА ВПРАВО

ALT + HOME

Открыть домашнюю страницу на текущей вкладке

ALT + F4

Закрытие текущего окна

Найти текущую вкладку

Выделить URL-адрес в адресной строке

CTRL + F4

Закрыть текущую вкладку

Перезагрузить текущую вкладку

SHIFT + F5

Перезагрузить текущую вкладку, игнорируя кэш содержимого

Сместить фокус на следующую панель

SHIFT + F6

Сместить фокус на предыдущую панель

CTRL + F6

Сместить фокус на панель веб-содержимого

Включить или выключить клавишную навигацию

Войти или выйти из иммерсивного средства чтения

Установить фокус на кнопку «Параметры и другое» ( )

F10 + ENTER

Открыть меню «Параметры и другое» ( )

SHIFT + F10

Открыть контекстное меню

Перейти в полноэкранный режим (переключение)

Открыть средства разработчика

Прекратить загрузку страницы; закрыть диалог или всплывающее окно

Прокрутить веб-страницу вниз на один экран

SHIFT + ПРОБЕЛ

Прокрутить веб-страницу вверх на один экран

Прокрутить веб-страницу вниз на один экран

CTRL + PGDG

Переход к следующей вкладке

Прокрутить веб-страницу вверх на один экран

CTRL + PGUP

Переход к предыдущей вкладке

Домашняя страница

Перейти в верхнюю часть страницы, переместить фокус клавиатуры на первый элемент панели

Перейти в нижнюю часть страницы, переместить фокус клавиатуры на последний элемент панели

Перейти к следующей точке табуляции

SHIFT + TAB

Переход к предыдущей точке табуляции

COMMAND + SHIFT + B

Отобразить или скрыть панель избранного

COMMAND + SHIFT + C

Открыть средства разработчика

COMMAND + D

Сохранить текущую вкладку в избранное

COMMAND + SHIFT + D

Сохранить все открытые вкладки в избранное в новой папке

COMMAND + SHIFT + E

Открытие поиска на боковой панели

COMMAND + F

Открыть поиск на странице

COMMAND + CTRL + F

Включить или выключить полноэкранный режим

COMMAND + OPTION + F

Поиск в Интернете

COMMAND + G

Перейти к следующему результату поиска на странице

COMMAND + SHIFT + G

Перейти к предыдущему результату поиска на странице

COMMAND + SHIFT + H

Открыть домашнюю страницу на текущей вкладке

COMMAND + OPTION + J

Открыть консоль JavaScript

COMMAND + L

Выделить URL-адрес в адресной строке для редактирования

COMMAND + OPTION + L

CTRL + M

Отключить или включить звук вкладки

COMMAND + M

COMMAND + OPTION + M

Свернуть все окна приложения на переднем плане

COMMAND + SHIFT + M

Выполнить вход с учетной записью другого пользователя или воспользоваться просмотром в качестве гостя

COMMAND + N

Открытие нового окна

COMMAND + SHIFT + N

Открыть новое окно в режиме InPrivate

COMMAND + O

Открыть файл с компьютера в браузере Edge

COMMAND + P

Печать текущей вкладки

COMMAND + Q

COMMAND + R

Перезагрузить текущую вкладку

COMMAND + SHIFT + R

Перезагрузить текущую вкладку, игнорируя кэш содержимого

COMMAND + S

Сохранить текущую вкладку

COMMAND + T

Открыть новую вкладку и переключиться на нее

COMMAND + SHIFT + T

Повторно открыть последнюю закрытую вкладку и перейти к ней

COMMAND + SHIFT + U

Запустить или остановить озвучивание текста

COMMAND + SHIFT + V

Вставить текст без форматирования

COMMAND + W

Закрыть текущую вкладку

COMMAND + SHIFT + W

Закрытие текущего окна

COMMAND + Y

COMMAND + 0 (ноль)

COMMAND + 1, 2. 8

Перейти к определенной вкладке

COMMAND + 9

Перейти к последней вкладке

COMMAND + СТРЕЛКА ВЛЕВО

Перемещение курсора в начало первого слова в текущей строке

COMMAND + СТРЕЛКА ВПРАВО

Перемещение курсора в конец последнего слова в текущей строке

COMMAND + DELETE

Удалить все текстовое поле или всю строку текста

COMMAND + ВВОД

Выполнить поиск по введенному запросу в новой вкладке

COMMAND + SHIFT + DELETE

Открыть параметры очистки данных браузера

COMMAND + Плюс (+)

COMMAND + Минус (—)

CTRL + \ (в PDF-файле)

Переключиться в PDF-файле между макетами «По ширине» и «По размеру страницы»

CTRL + [ (в PDF-файле)

Повернуть PDF-файл против часовой стрелки на 90*

CTRL + ] (в PDF-файле)

Повернуть PDF-файл по часовой стрелке на 90*

COMMAND + [

COMMAND + ]

CTRL + Fn + СТРЕЛКА ВИНИЗ

Переход к следующей вкладке

CTRL + Fn + СТРЕЛКА ВВЕРХ

Перейти к предыдущей вкладке

Войти или выйти из иммерсивного средства чтения

Открыть средства разработчика (переключатель)

Esc (в полноэкранном режиме)

Выйти из полноэкранного режима

Прекратить загрузку страницы; закрыть диалог или всплывающее окно

Прокрутить веб-страницу вниз на один экран

SHIFT + ПРОБЕЛ

Прокрутить веб-страницу вверх на один экран

Переход к следующему элементу управления

SHIFT+TAB

Перейти к предыдущему элементу управления

CTRL + TAB

Перейти к следующей вкладке

SHIFT + CTRL + TAB

Перейти на предыдущую вкладку

Общие сведения о средствах разработки

Браузер Microsoft Edge поставляется со встроенными средствами веб-разработки, называемыми Microsoft Edge DevTools. DevTools — это набор средств веб-разработки, который отображается рядом с отображаемой веб-страницей в браузере. DevTools предоставляет эффективный способ проверки и отладки веб-страниц и веб-приложений. Вы даже можете редактировать исходные файлы и создавать проекты веб-сайтов в среде DevTools.

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

• Проверяйте, изменяйте и изменяйте стили элементов веб-страницы с помощью динамических инструментов с визуальным интерфейсом. Проверьте, где в браузере хранится содержимое, чтобы создать веб-страницу, включая .html форматы файлов , .css , .js и .png .
• Эмулируйте поведение веб-сайта на разных устройствах и имитируйте мобильную среду в комплекте с разными сетевыми условиями. Проверьте сетевой трафик и проверьте расположение проблем.
• Отладка JavaScript с помощью отладки точек останова и с помощью динамической консоли. Поиск проблем с памятью и отрисовки в веб-приложениях.
• Найдите проблемы со специальными возможностями, производительностью, совместимостью и безопасностью в продуктах, а также используйте средства разработки для устранения обнаруженных проблем со специальными возможностями.
• Используйте среду разработки для синхронизации изменений в Средствах разработки с файловой системой и из Интернета.

Открытие средств разработки

В Microsoft Edge можно открыть средства разработки с помощью мыши или клавиатуры любым из следующих способов. Какое средство открывается, зависит от способа открытия средств разработки.

Основные способы:

Дополнительные способы:

Действие	Результирующий инструмент
На панели инструментов Microsoft Edge выберите Параметры и прочее (>Дополнительные инструменты>Средства разработчика.	Ранее использовавшийся инструмент или средство приветствия .
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS).	Средство «Консоль «.
Нажмите клавиши CTRL+SHIFT+C (Windows, Linux) или COMMAND+OPTION+C (macOS).	Инструмент «Элементы » с деревом DOM, развернутый для отображения элемента.
Нажмите клавиши SHIFT+F10 , чтобы открыть контекстное меню. Чтобы выбрать команду Проверить , нажмите клавишу СТРЕЛКА ВВЕРХ , а затем ВВОД.	Инструмент «Элементы » с деревом DOM, развернутый для отображения элемента.
Нажмите клавиши TAB или SHIFT+TAB , чтобы переместить фокус на элемент страницы. Затем нажмите клавиши SHIFT+F10 , чтобы открыть контекстное меню. Чтобы выбрать команду Проверить , нажмите клавишу СТРЕЛКА ВВЕРХ , а затем ВВОД.	Инструмент «Элементы » с деревом DOM, развернутый для отображения элемента страницы с фокусом.

Откройте DevTools, щелкнув правой кнопкой мыши элемент на веб-странице.

Хороший способ открыть Средства разработки — щелкнуть правой кнопкой мыши элемент на веб-странице и выбрать пункт Проверить:

Откроется DevTools с выделенным правой кнопкой мыши элементом в дереве DOM в инструменте Элементы :

Откройте средства разработки с помощью панели инструментов Microsoft Edge

На панели инструментов Microsoft Edge выберите Параметры и другое ( . ) >Дополнительные средства>Средства разработчика:

Автоматическое открытие средств разработки при открытии новой вкладки

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

В командной строке откройте Microsoft Edge, передав —auto-open-devtools-for-tabs флаг следующим образом: Командная строка Windows:

start msedge --auto-open-devtools-for-tabs 

Windows PowerShell:

Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs" 

Терминал macOS:

/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabs 

Оболочка bash в Linux:

microsoft-edge --auto-open-devtools-for-tabs 

Отключение ускорения запуска

Важно: При запуске с помощью auto-open-devtools-for-tabs не должно быть запущенных процессов Microsoft Edge, поэтому может потребоваться отключить ускорение запуска в edge://settings/system .

Функция ускорения запуска обеспечивает минимальное выполнение процесса Microsoft Edge в фоновом режиме. Это мешает auto-open-devtools-for-tabs работе функции, и ее необходимо отключить для ее использования. Дополнительные сведения см. в разделе Справка по повышению запуска.

Отключение сочетания клавиш F12

Чтобы запретить нажатию клавиши F12 открыть средства разработки, выполните приведенные далее действия.

1. В Microsoft Edge перейдите по адресу edge://settings/system .
2. Прокрутите вниз до раздела Средства разработчика и отключите переключатель Использовать клавишу F12, чтобы открыть переключатель Средства разработчика.

Поддержка клавиатуры

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

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

Вы можете закрепить Средства разработки в правой, левой или нижней части браузера или отстыковать их в отдельном окне. См. раздел Изменение размещения средств разработки (отстыковка, закрепление вниз, закрепление слева).

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

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

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

1. Если фокус еще не установлен на средства разработки, щелкните в каком-то месте в средствах разработки.
2. Нажмите клавиши CTRL++ или CTRL+— (Windows или Linux). Или нажмите клавиши COMMAND++ или COMMAND+— (macOS).

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

Восстановление масштаба до 100%:

1. Убедитесь, что фокус находится на нужной части браузера, в средствах разработки или на отрисоченной странице.
2. Нажмите клавиши CTRL+0 , CTRL+NumPad0 (Windows или Linux) или COMMAND+0 (macOS).

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

1. В разделе Параметры средств разработки нажмите кнопку Закрыть (x) в правом верхнем углу.
2. Измените уровень масштабирования devTools, как описано выше.
3. Нажмите кнопку Параметры ().

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

1. Нажмите кнопку меню Настройка и управление Средства разработки (), а затем выберите Выполнить команду.
2. В меню команд начните вводить zoom, а затем выберите команду zoom:
   • Сброс масштаба
   • Увеличение масштаба
   • Уменьшение масштаба

Обзор пользовательского интерфейса

Пользовательский интерфейс DevTools имеет следующие main области:

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

  

  По умолчанию панель действий содержит следующие средства:

  • Кнопка переключения средства проверки ().
  • Кнопка «Эмуляция устройства » ().
  • Средство приветствия ().
  • Инструмент «Элементы » («).
  • Консольный инструмент ().
  • Средство «Источники » («).
  • Средство «Сеть » («).
  • Средство производительности ().
  • Средство «Память » («).
  • Средство приложения ().

  По умолчанию панель быстрого просмотра содержит следующие средства:

  • Консольный инструмент ().
  • Средство «Проблемы » («).

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

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

  Изменение расположения панели действий

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

  Панель действий может находиться в одном из следующих расположений:

  • Сверху (по умолчанию): панель действий всегда будет горизонтальной.
  • Слева:панель действий всегда будет вертикальной.
  • Адаптация к расположению закрепления. Панель действий будет находиться в горизонтальной или вертикальной ориентации в зависимости от места закрепления средств разработки.
    • Если средства разработки закреплены в левой или правой части окна браузера, панель действий будет вертикальной.
    • Если средства разработки закреплены в нижней части окна браузера или отстыкованы в собственном окне, панель действий будет горизонтальной.

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

    Если места недостаточно для отображения всех имен инструментов, на горизонтальной панели действий отображаются некоторые вкладки со значками и именами инструментов, а также некоторые вкладки со значками со подсказками:

    

    Чтобы изменить расположение панели действий, выполните одно из следующих действий:

    • Нажмите кнопку Настройка и управление Средствами разработки (), а затем выберите расположение на панели действий:
    • На панели действий щелкните Переместить панель действий влево () или Переместить панель действий в верхнюю часть ().
    • Используйте меню Команд. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), введите слова панель действий, а затем выберите Переместить панель действий влево или Переместить панель действий в начало. См. раздел Совет по использованию power tip: Use the Command Menu(Командная команда).

    Изменение расположения быстрого просмотра

    По умолчанию панель Быстрого просмотра находится в нижней части devTools. Вы также можете поместить панель быстрого просмотра в правой части средства разработки.

    Чтобы отобразить панель быстрого просмотра , нажмите клавишу ESC.

    

    Чтобы изменить расположение панели быстрого просмотра , на панели быстрого просмотра нажмите кнопку Закрепить быстрое представление справа или док-панель быстрого просмотра вниз ().

    

    Функции панели действий

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

    Панели инструментов с вкладками, содержащие вкладки и страницы

    Помимо средства проверки и эмуляции устройства, Средства разработки делятся на набор инструментов с вкладками, таких как инструменты «Элементы» , «Консоль» и » Источники «. В меню команд средства называются панелями. Вкладка инструмента содержит панель, содержащую пользовательский интерфейс средства.

    Вкладки более высокого уровня:

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

    Вкладки нижнего уровня:

    На панели некоторых инструментов есть один или несколько наборов вкладок (панелей с вкладками). Например, инструмент «Элементы » содержит набор вкладок, включая стили, прослушиватели событий и вкладки Специальных возможностей . Для других инструментов панель инструмента содержит страницы, перечисленные слева.

    Панель действий и панель быстрого просмотра

    Есть две панели инструментов: панель действий в верхней части средства разработки и панель быстрого просмотра внизу при нажатии клавиши ESC.

    Панель действий содержит следующие функции:

    • Инструменты значков:
      • Кнопка переключения средства проверки ().
      • Кнопка Эмуляция устройства ().

    «Emulate Microsoft-recommended hardware and network performance presets» checkbox is selected —>

    • Вкладки инструментов:
      • Средство приветствия .
      • Инструмент «Элементы «. Постоянного.
      • Консольное средство. Постоянного.
      • Средство «Источники «. Постоянного.
      • Средство «Сеть «.
      • Средство повышения производительности .
      • Средство «Память «.
      • Средство приложения .
    • Иконки:
      • Кнопка Переместить панель действий влево ().
      • Кнопка «Другие инструменты» («)
      • Кнопка меню «Настройка и управление средствами разработки («)
      • Кнопка «Справка).
      • Закрыть Кнопка DevTools ().

    

    Функции панели действий описаны ниже.

    Закрепление и изменение порядка инструментов на панели действий

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

    

    1. Щелкните Другие инструменты (+), чтобы получить список всех доступных средств:
    2. Выберите средство, чтобы закрепить его на панели действий. Затем средство отображается на панели действий при каждом открытии средств разработки.

    Если на панели действий недостаточно места для отображения всех закрепленных инструментов, некоторые средства могут переполняться в меню Дополнительные инструменты :

    

    Чтобы открепить средство от панели действий, щелкните правой кнопкой мыши вкладку средства и выберите команду Удалить из панели действий:

    

    Средство проверки

    

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

    

    Эмуляция устройства

    

    Нажмите кнопку Эмуляция устройства (), чтобы отобразить текущий веб-сайт в режиме эмулированного устройства. Средство эмуляции устройства позволяет запускать и тестировать реакцию продукта при изменении размера браузера. Он также дает оценку макета и поведения на мобильном устройстве.

    

    Средство приветствия

    Содержит сведения о новых функциях DevTools, способах связи с командой и содержит сведения о некоторых функциях.

    Инструмент «Элементы»

    Позволяет проверять, редактировать и отлаживать HTML и CSS. Вы можете изменить в инструменте, отображая изменения в реальном времени в браузере.

    Средство «Элементы » всегда присутствует на панели действий.

    Консольное средство

    В средстве «Консоль» можно:

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

    Средство «Консоль» всегда присутствует на панели действий и на панели быстрого просмотра .

    Средство «Источники»

    Средство «Источники » — это редактор кода и отладчик JavaScript. Вы можете редактировать проекты, поддерживать фрагменты кода и отлаживать текущий проект.

    Средство «Источники» всегда присутствует на панели действий.

    Средство «Сеть»

    Средство «Сеть» позволяет отслеживать и проверять запросы или ответы из кэша сети и браузера. Вы можете фильтровать запросы и ответы в соответствии со своими потребностями и моделировать различные условия сети.

    Средство повышения производительности

    Средство «Память»

    Средство приложения

    Кнопка «Дополнительные инструменты»

    

    Чтобы добавить средство на панель действий, нажмите кнопку Другие инструменты («) .

    Меню «Настройка средств разработки» и управление ими

    

    Кнопка Настройка и управление средствами разработки () открывает раскрывающееся меню для следующих способов:

    • Закрепление средств разработки.
    • Закрепление панели действий.
    • Выберите тему.
    • Показывать сочетания клавиш.
    • Измените параметры средства разработки.
    • Откройте эмуляцию устройства.
    • Переключите панель Быстрого просмотра .
    • Выполните команду.
    • Выполните поиск кода.
    • Откройте файл.

    Кнопка «Справка»

    Кнопка Справка () открывает раскрывающееся меню, предоставляющее доступ к документации по devTools, заметкам о выпуске и инструменту «Обратная связь ( ).

    Чтобы отправить сообщение о проблемах, проблемах или предложить идеи с помощью команды Разработчиков Microsoft Edge, нажмите кнопку Отзыв . Откроется диалоговое окно Отправить отзыв . Введите сведения для описания того, что произошло, и включите снимок экрана. См . статью Обращение к команде разработчиков Microsoft Edge.

    Кнопка «Закрыть средства разработки»

    

    Нажмите кнопку Закрыть средства разработки () в правом верхнем углу devTools, чтобы закрыть Средства разработки и использовать все окно для отображения текущей веб-страницы.

    Функции панели быстрого просмотра

    Используйте панель быстрого просмотра , чтобы открыть второе средство ниже или справа от средства, которое уже выбрано на панели действий:

    1. Выберите средство на панели действий.
    2. На панели быстрого просмотра щелкните Другие инструменты (+), а затем выберите другое средство из списка.

    Например, откройте средство отрисовки на панели «Быстрое представление » под средством «Сеть «, открытым на панели действий:

    

    Чтобы скрыть или развернуть быстрое представление, щелкните Свернуть быстрое представление () или Развернуть быстрое представление () или нажмите клавишу ESCAPE .

    Обзор всех средств

    Сводку по каждому средству см. в статье Общие сведения о всех средствах в разделе Сведения о списке инструментов.

    Инструмент, вкладка или панель

    Слова «tool», «tab» и «panel» являются несколько взаимозаменяемыми. В меню команд средства называются панелями; Например, инструмент «Элементы » называется панелью «Элементы «. Чтобы переключиться на инструмент Элементы , перейдите на вкладку Элементы . Есть кнопка «Дополнительные инструменты » (+) и список, используемые для выбора инструментов, которые также называются панелями.

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

    Сведения о панели действий и средствах быстрого просмотра

    Кнопка Дополнительные инструменты (+) отображается как на панели действий , так и на панели быстрого просмотра . При открытии средства из списка Дополнительные средства , расположенного на панели действий, средство отображается на панели действий. При открытии средства из списка Дополнительные средства на панели быстрого просмотра средство открывается на панели быстрого просмотра .

    Задача	Действия
    Открытие средства на панели действий в верхней части средства разработки	На панели действий в верхней части средства разработки щелкните Другие инструменты (+), а затем выберите средство.
    Открытие средства на панели быстрого просмотра	Когда в средствах разработки будет фокус, нажмите клавишу ESC , чтобы отобразить панель быстрого просмотра , если она еще не показана. На панели быстрого просмотра нажмите кнопку Дополнительные инструменты (+) и выберите средство.
    Перемещение средства с панели быстрого просмотра на панель действий	Когда в средствах разработки будет фокус, нажмите клавишу ESC , чтобы отобразить быстрый просмотр. На панели быстрого просмотра щелкните правой кнопкой мыши вкладку средства и выберите Переместить в верхнюю панель действий или Переместить в левую панель действий.
    Перемещение средства из панели действий на панель быстрого просмотра	На панели действий щелкните правой кнопкой мыши вкладку средства, а затем выберите Пункт Быстрый просмотр вниз или Перейти в сторону Быстрого просмотра.
    Открытие средства на панели инструментов по умолчанию (панель действий или быстрое представление)	Когда в средствах разработки будет фокус, откройте меню Команд , нажав клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS). Введите имя средства, а затем выберите команду Показать .

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

    • Средство проверки . См . статью Использование средства проверки для обнаружения проблем со специальными возможностями путем наведении указателя мыши на веб-страницу.
    • Средство эмуляции устройства . См. раздел Эмуляция мобильных устройств (эмуляция устройств).
    • Меню «Команда«. См . раздел Выполнение команд с помощью меню команд Microsoft Edge DevTools.

    См. также

    Совет по использованию power: используйте меню команд

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

    

    В меню команд средства называются панелями; Например, инструмент «Элементы » называется панелью «Элементы «. Чтобы переключиться на инструмент Элементы , перейдите на вкладку Элементы .

    

    1. Чтобы открыть меню «Команда», выполните одно из следующих действий:
       • Нажмите кнопку Настройка и управление Средствами разработки () и выберите Выполнить команду.
       • Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS).

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

  • В меню Команд начните вводить имя средства, например изменения, а затем выберите команду Показать , например Показать изменения. В меню Команды отображаются соответствующие команды:
  • Нажмите клавишу ВВОД , чтобы выбрать команду Показать , например Показать изменения. Выбранное средство откроется на панели Быстрого просмотра в нижней части экрана: Инструмент «Изменения » полезен при редактировании CSS. В этом примере меню команд предоставляет быструю альтернативу выбору Дополнительных средств (+) и последующему выбору Изменений. Этот пример также предоставляет альтернативу редактированию .js файла в средстве «Источники «, а затем щелкните правой кнопкой мыши и выберите Локальные изменения.

  Настройка средств разработки

  Вы можете настроить Средства разработки в соответствии с вашими потребностями в соответствии с тем, как вы работаете. Чтобы изменить параметры, нажмите кнопку Настройка и управление средствами разработки (), а затем выберите Параметры () или нажмите клавишу F1.

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

  

  Вы также можете изменить параметры дополнительных функций, таких как:

  • Добавление локальных файлов в рабочую область.
  • Фильтрация кода библиотеки с помощью списка «Игнорировать«.
  • Определите устройства , которые необходимо включить в режим имитации и тестирования устройств. Дополнительные сведения см. в разделе Эмуляция мобильных устройств (эмуляция устройств).
  • Выберите профиль регулирования сети.
  • Определение имитированных расположений.
  • Настройка сочетаний клавиш. Например, чтобы использовать те же сочетания клавиш в средствах разработки, что и в Visual Studio Code, выберите пункт Сопоставить ярлыки из предустановленного>Visual Studio Code.

  

  Пробные экспериментальные функции

  

  Команда DevTools предоставляет новые возможности в виде экспериментов в DevTools. Вы можете включить или отключить каждый из экспериментов. Чтобы просмотреть полный список экспериментальных функций в Microsoft Edge DevTools, в средствах разработки выберите Параметры (), а затем выберите Эксперименты.

  Чтобы просмотреть последние функции, доступные в DevTools, скачайте Microsoft Edge Canary, который выполняет сборку ночью.

  • Экспериментальные функции
  • Новые возможности средств разработки Microsoft Edge

  См. также

  • Сведения о списке инструментов
  • Проверка и изменение текущей веб-страницы
  • Эмулировать поведение продукта на разных устройствах
  • Проверка, настройка и изменение стилей элементов
  • Отладка JavaScript
  • Динамическая консоль
  • Проблемы со специальными возможностями, производительностью, совместимостью и безопасностью
  • Проверка сетевого трафика
  • Проверка места хранения содержимого в браузере
  • Оценка производительности
  • Проблемы с памятью
  • Проблемы с отрисовкой
  • Использование среды разработки
  • Синхронизация изменений в средствах разработки с файловой системой
  • Переопределение файлов из Интернета

  Как запустить консоль (панель разработчика) в большинстве браузеров.

  

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

  Выглядит это примерно так:

  

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

  Для тех, кто хочет посмотреть как эта панель помогает на практике, в веб-разработке, посмотрите этот курс «Консоль браузера. Эффективная работа.»

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

  Чаще всего, в Windows — это будет комбинация клавиш:

  Ctrl + Shift + I

  Для компьютеров на Mac OS подобная комбинация выглядит следующим образом:

  ⌥ + ⌘ + I (или Shift + Cmd + I)

  Эта комбинация клавиш должна работать и для браузера Opera

  

  И в браузере Firefox

  Единственное исключение из этого правила Internet Explorer, здесь консоль вызывается клавишей F12.

  

  Нужно просто запомнить эти комбинации клавиш.

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

  Для тех, кто хочет посмотреть как эта панель помогает на практике, в веб-разработке, посмотрите этот курс «Консоль браузера. Эффективная работа.»

  Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

  Похожие публикации:
  1. Как включить телевизор эриссон без пульта
  2. Как восстановить контакты exchange на iphone
  3. Сколько телевизоров можно подключить к одной антенне цифрового телевидения
  4. Ток нулевой последовательности что это