Как перевести devtools на русский

DevTools: как открыть инструменты разработчика в браузере и почему они делают работу эффективнее

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

Вкладка Console в DevTools позволяет работать с JavaScript при просмотре любой страницы. Это может быть удобно в разных ситуациях:

1. Просмотр ошибок. Например, позволяет увидеть, что какие-то ресурсы (CSS, изображения и так далее) на странице не загрузились.
2. Обращение к HTML-элементам. Так можно сразу проверить правильность написания пути до элемента в JavaScript.
3. Отладка кода на JavaScript. Речь идет о тестировании и устранении ошибок непосредственно в браузере. Для этого вкладка дает множество инструментов.

Сначала разберемся, как открыть консоль в разных браузерах.

Профессия «Инженер по тестированию»

• Смените профессию за 4 месяца — короткий путь в IT
• Познакомьтесь с этапами разработки и жизненным циклом ПО
• Узнайте всё о техниках тест-дизайна
• Разберитесь с системами управления тестированием и системами баг-трекинга
• Научитесь работать с API и базами данных

Google Chrome

1. Нажмите значок с тремя точками в правом верхнем углу окна браузера.
2. В появившемся меню наведите курсор мыши на «Дополнительные инструменты» и выберите «Инструменты разработчика» в расширенном меню.
3. После этого в правой части экрана откроется раздел с DevTools.

Еще один способ — использовать горячие клавиши. В Chrome это Ctrl+Shift+I (или Command+option+I на Mac).

Microsoft Edge

1. Нажмите на значок «Настройки и другое» в правом верхнем углу экрана.
2. Затем кликните на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты разработчика».
3. После этого в правой части экрана откроется раздел с DevTools.

Как и в Chrome, открыть DevTools в Edge можно горячими клавишами Ctrl+Shift+ I (или Command+option+I на Mac).

Mozilla

1. Выберите меню-гамбургер в верхнем углу экрана.
2. Затем нажмите на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты веб-разработчика».
3. После этого в нижней части экрана откроется раздел с DevTools.

Горячие клавиши в Mozilla — Ctrl+Shift+I (или Command+option+I на Mac).

Opera

1. Щелкните на значок Opera в верхнем левом углу окна браузера.
2. Наведите курсор мыши на «Разработчик» в меню и выберите «Инструменты разработчика».
3. После этого в правой части экрана откроется раздел с DevTools.

В Opera DevTools можно открыть комбинацией клавиш Ctrl+Shift+I(или Command +option+I на Mac).

Safari

1. Выберите меню Safari в верхнем левом углу экрана.
2. Затем нажмите «Настройки» и перейдите в меню «Разработка» в верхней части экрана.
3. Выберите «Показать веб-инспектор» в раскрывающемся меню .
4. После этого откроется новое окно с инструментами разработчика.

Горячие клавиши для Safari — Command + option+ I.

Яндекс.Браузер

1. Нажмите на меню-гамбургер в верхнем правом углу окна браузера.
2. Затем кликните по пункту «Дополнительно» и выберите меню «Дополнительные инструменты».
3. После этого переходим к пункту «Инструменты разработчика» в следующем меню.

Для запуска консоли также можно нажать Ctrl + Shift + I.

Как использовать консоль

Обычно для быстрого выполнения кода и оценки результата его работы используются сторонние сайты. Другой вариант — NodeJS, которая дает доступ к REPL (Read Eval Print Loop) — интерактивному интерпретатору кода. Вкладка Console, по сути, выполняет те же функции и обладает множеством других возможностей.

Рассмотрим, как работает консоль, на примере Chrome DevTools. В ней можно проверять как простые инструкции вида 2 + 2 , так и большие функции.

Откроем Chrome DevTools, перейдем во вкладку Console, и вставим выражение 2 + 2 DevTools сразу выдаст ответ 4 . Таким образом можно не только складывать числа, а использовать любые методы из стандартной библиотеки JavaScript, например:

'hexlet'.toUpperCase() // => HEXLET [1, 2, 3, 4].map((number) => number ** 2) // => [1, 4, 9, 16] 

Помимо простых выражений, которые никак не связаны с сайтом, можно использовать и DOM API для доступа к элементам страницы. Код, указанный ниже, посчитает и вернет количество ссылок на главной странице ru.hexlet.io. Вы также можете самостоятельно перейти на любую страницу и «посчитать» количество ссылок или любых других элементов на ней:

document.querySelectorAll('a').length // => 73 

Кроме того, DevTools позволяет создавать переменные. Пока страница существует, созданные переменные будут существовать и вы можете взаимодействовать с ними в будущем:

const linksCount = document.querySelectorAll('a').length // => undefined 2 + 2 // => 4 linksCount // => 73 linksCount * 2 // => 146 

Однострочные выражения и инструкции — это довольно просто. Что, если хочется создать функцию, а нажатие на Enter сразу выполняет код? Для многострочных выражений используется перенос с помощью Shift + Enter. Эта опция позволяет писать и использовать красивые функции, которые, как и переменные, могут быть использованы в текущей сессии:

const getElementCount = (tag) =>  const elementCount = document.querySelectorAll(tag).length; return `Найдено $elementCount> элементов $tag>` > getElementCount('div') // => 'Найдено 105 элементов div' 

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

Профессия «Инженер по тестированию»

• Смените профессию за 4 месяца — короткий путь в IT
• Познакомьтесь с этапами разработки и жизненным циклом ПО
• Узнайте всё о техниках тест-дизайна
• Разберитесь с системами управления тестированием и системами баг-трекинга
• Научитесь работать с API и базами данных

Перевод «Developer Tools» на русский

средства разработчика — это перевод «Developer Tools» на русский. Пример переведенного предложения: Use Chrome Developer Tools to check for all the calls made from your ad within a browser. ↔ Проверять вызовы, отправляемые вашим объявлением, можно с помощью Инструментов разработчика Chrome.

Developer Tools

A feature of Internet Explorer 8 that enables you to review the internal representation of a Web page from the browser’s perspective. You can use the Developer Tools for a variety of tasks, including (but not limited to) viewing individual attributes, determining why a particular CSS rule is applied to an individual element, previewing different document compatibility modes, and so on. By exposing how the browser interprets a Web page, the Developer Tools provide many opportunities to research and resolve problems, and do it faster than has been possible with the previous versions of Internet Explorer.

+ Добавить перевод Добавить Developer Tools

DEVTOOLS на Русском — Русский перевод

Примеры использования Devtools в предложениях и их переводы

Ad loading
You can use Chrome DevTools to quickly identify areas that are being painted.
С помощью Chrome DevTools можно быстро определить области, на которые распространяется прорисовка.
Go to DevTools and hit the escape key on your keyboard.
Перейдите в DevTools и нажмите на клавиатуре клавишу Escape.
Rob Wu discovered a way for extensions to access devtools.

Роб Ву обнаружил способ, с помощью которого расширения могут получить доступ к инструментам разработчика.

Use Chrome DevTools‘ Timeline and JavaScript Profiler to assess the impact of JavaScript.

Для оценки влияния JavaScript используйте шкалу времени и средство профилирования JavaScript из Chrome DevTools.

We discussed fullstack JavaScript solutions, Google Chrome DevTools, and other topics.
Мы обсуждали fullstack JavaScript решения, Google Chrome DevTools и другие темы.
Люди также переводят
devulcanization
devyatkino
dew condensation
Svyat Mitin discovered an issue in the devtools.
Свят Митин обнаружил проблему в инструментах разработчика.
This article explains how to use the basic functions of your browser’s devtools.

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

To begin, open DevTools, go to the Timeline tab, hit record and interact with your site.

Для начала откройте DevTools, перейдите на вкладку Timeline, запустите запись и начните взаимодействовать со своим сайтом.

Firstly, open DevTools, go to the Timeline tab, hit record and interact with your site.

Прежде всего, откройте DevTools, перейдите на вкладку Timeline, запустите запись и начните взаимодействовать со своим сайтом.

You can also see that DevTools will tell you the tree size(1,618 elements in this case), and how many nodes were in need of layout.

Также видно, что программа DevTools сообщает размер дерева визуализации( в данном случае это 1618 элементов) и количество узлов, для которых его требовалось перерасчитать.

dew nor rain
dew point measurement
dew point sensor

If you have promoted an element to a new layer, use DevTools to confirm that doing so has given you a performance benefit.

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

If it’s not possible to avoid layout then the key is to once again use Chrome DevTools to see how long it’s taking, and determine if layout is the cause of a bottleneck.

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

This article explains how to use the basic functions of your browser’s devtools.
Эта статья научит Вас использовать базовые функции инструментов разработчика в Вашем браузере.
Check these pages: Chrome DevTools Overview and What are browser developer tools?
Помогут разобраться: Chrome DevTools OverviewWhat are browser developer tools?

Plugin«RM+ Devtools» allows to speed up the development of plugins for Redmine, reducing the number of restarts of the web-server, and also use of external tools of application developer on Rails.

Плагин« RM Devtools» позволяет ускорить разработку плагинов для Redmine, сократив число перезапусков web- сервера, а также задействовать внешние средства разработчика приложений на Rails.

Результатов: 15 , Время: 0.0241

Devtools на разных языках мира

Фразы по алфавиту

devout devo devrent valley devrient devries devrimci devscripts devs devteam released devteam devtools devuan devulcanization devyatkino dev devín dew condensation dew dew dew nor rain dew point measurement dew point sensor

Поиск в Английско-Русском словаре по букве

Как перевести devtools на русский

Заинтересованы в улучшении DevTools? Зарегистрируйтесь и примите участие в исследовании пользовательского опыта здесь.

# Пользуйтесь DevTools на своём языке

Chrome DevTools теперь поддерживает более 80 языков, позволяя вам работать на предпочитаемом вами языке! Откройте Settings, выберите предпочитаемый язык в выпадающем меню Preferences > Language и перезапустите DevTools. Задача в трекере Chromium: 1163928

# Новые устройства Nest Hub в списке девайсов

Теперь вы можете симулировать разрешения экранов устройств Nest Hub и Nest Hub Max в режиме устройств. Кликните на иконку Toggle Device Toolbar , выберите Nest Hub или Nest Hub Max в списке устройств. Задача в трекере Chromium: 1223525

# Информация об origin trials в свойствах фрейма

Вы можете получить информацию об origin trials сайта в детальном представлении фрейма вкладки Application. Origin trials дают вам доступ к новой или экспериментальной функции Chrome для добавления функциональности, которую ваши пользователи могут опробовать в течение ограниченного времени, прежде чем эта функция станет доступна для всех. Откройте страницу с origin trials (например, демо-страницу). Во вкладке Application прокрутите вниз до секции Frames и выберите верхний фрейм. Задача в трекере Chromium: 607555

# Новый значок для выражений от контейнера

Новый значок container добавляется рядом с элементами-контейнерами (элементы-предки, соответствующие критериям условий директивы @container ). Кликните на значок, чтобы переключить отображение наложения выбранного контейнера и всех его запрашивающих потомков на странице. Задача в трекере Chromium: 1146422

# Новый чекбокс для инвертирования фильтров сети

Используйте новый чекбокс Invert, чтобы инвертировать фильтры во вкладке Network. Например, вы можете написать «status-code: 404», чтобы показать только сетевые запросы со статусом 404. Установите флажок Invert, чтобы инвертировать фильтр (показать все сетевые запросы, не имеющие статуса 404). Задача в трекере Chromium: 1054464

# Предстоящее упразднение боковой колонки Console

Боковая колонка Console будет убрана в пользу перемещения интерфейса фильтра в панель инструментов. У Вас есть вопросы или отзывы? Дайте нам знать через эту задачу в трекере. Задача в трекере Chromium: 1232937

# Отображение необработанных заголовков Set-Cookie во вкладках Issues и Network

DevTools теперь отображает необработанные заголовки Set-Cookie во вкладке Issues. Раньше DevTools не показывали неправильно сформированные куки (с неправильным заголовком Set-Cookie ) в панели Network. С добавлением нового фильтра response-header-set-cookie в панели Network, пользователи могут отфильтровывать запросы с необработанным заголовком Set-Cookie . DevTools будет ссылаться с необработанных заголовков Set-Cookie во вкладке Issues на вкладку Network. Задача в трекере Chromium: 1179186

# Последовательное отображение нативных аксессоров как собственных свойств в консоли

Console теперь последовательно отображает нативные аксессоры в виде собственных свойств объекта. Например, при оценке выражения new Int8Array([1, 2, 3]) в Console, такие нативные аксессоры как length , byteOffset не отображались в превью. В последнем обновлении нативные аксессоры показываются в превью и значения подсчитываются при раскрытии. Задача в трекере Chromiums: 1076820, ​​1199247

# Правильная трассировка стека ошибок для встроенных скриптов с #sourceURL

DevTools теперь выполняет встроенные скрипты с #sourceURL и показывает правильные трассировки стека ошибок для отладки. Ранее DevTools отображал неправильное местоположение встроенных скриптов с #sourceURL , относительно окружающего документа, а не открывающего тега

# Изменение формата цвета в панели Computed

Теперь вы можете изменить формат цвета любого элемента в панели Computed, удерживая Shift и кликнув на превью цвета. Задача в трекере Chromium: 1226371

# Замена кастомных всплывающих подсказок на нативные HTML-подсказки

DevTools теперь применяет нативные HTML-подсказки во всех компонентах. В DevTools долгое время использовалась кастомная реализация всплывающих подсказок, из-за отсутствия стилизации нативной. К сожалению, поддержка кастомной реализации всплывающей подсказки является сложной задачей, и мы регулярно сталкивались с нетривиальными проблемами. Повторно взвесив преимущества кастомных реализаций, мы обнаружили, что нативных всплывающих подсказок HTML достаточно для DevTools, а их использование предотвращает множество проблем для наших пользователей. Задача в трекере Chromium: 1223391

# [Эксперимент] Скрытие задач во вкладке Issues

Чтобы включить эксперимент, установите флажок Enable hide issues menu в разделе Settings > Experiments.

Включите эксперимент hide issues menu, чтобы скрыть проблемы во вкладке Issues. Это способ сосредоточиться только на важных для вас проблемах. Во вкладке Issues наведите курсор на проблему, кликните на иконку меню справа и выберите Hide issues like this, чтобы скрыть её. Задача в трекере Chromium: 1175722

# Загрузите предварительные версии браузеров

Рассмотрите возможность использования Chrome Canary, Dev или Beta в качестве основного браузера для разработки. Они дают вам доступ к последним функциям DevTools, возможность протестировать новейшие API веб-платформы и найти проблемы на вашем сайте раньше, чем это сделают пользователи!

# Связь с командой Chrome DevTools

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

• Отправьте нам предложение или отзыв через crbug.com.
• Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options) >Справка (Help) >Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
• Твитните на @ChromeDevTools.
• Оставьте комментарии под What’s new in DevTools видео на YouTube.

# Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What’s New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

# Chrome 110

• Очистка вкладки Производительность при перезагрузке
• Обновления Регистратора (Recorder)
• Просмотр и подсветка кода в пользовательском сценарии в Регистраторе
• Настройка типов селекторов записи
• Редактирование пользовательского сценария во время записи
• Автоматическое красивое форматирование внутри файла
• Улучшенная подсветка синтаксиса и встроенный предварительный просмотр для Vue, SCSS и других
• Эргономичное и единообразное автодополнения в Консоли (Console)
• Другие важные моменты

# Chrome 109

• Recorder: опции копирования для шага, воспроизведение на странице, контекстное меню шага
• Показ настоящих названий функций в записях производительности
• Новые горячие клавиши во вкладках Консоль (Console) и Источники (Sources)
• Улучшенная отладка JavaScript
• Другие важные моменты
• [Эксперимент] Улучшенный UX в интерфейсе управления точками останова
• [Эксперимент] Автоматическое красивое форматирование внутри файла

# Chrome 108

• Подсказки для неактивных CSS-свойств
• Автоматическое определение XPath и текстовых селекторов во вкладке Recorder
• Пошаговое выполнение выражений, разделенных запятыми
• Улучшенные настройки Списка игнорируемых фреймворков
• Другие важные моменты

# Chrome 107

• Кастомизация сочетаний клавиш в DevTools
• Переключение между светлой и тёмной темами по сочетанию клавиш
• Подсветка объектов C/C++ в Инспекторе памяти (Memory Inspector)
• Поддержка полной информации об инициаторе для импорта HAR
• Начало поиска по DOM по нажатию по Enter
• Отображение иконок start и end для свойства флексбокса align-content
• Другие важные моменты