Как открыть devtools в яндекс

DevTools

• https://developers.google.com/web/tools/chrome-devtools/ — Документация по DevTools Chrome
• https://umaar.com/dev-tips — Полезные советы по DevTools

Режим разработчика в браузере Яндекс

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

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

Для чего нужен режим разработчика

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

Консоль разработчика предоставляет ряд возможностей для настройки и проверки страниц в реальном времени. Среди них:

• Просмотр HTML-код страницы.
• Наблюдение за процессом выполнения всех действий, совершающихся пользователями на конкретном вебсайте.
• Осмотр лог-файлов, где содержатся упоминания об ошибках, возникающих при работе скриптов и пр.

Сервис «инструменты разработчика» вряд ли понадобится обычным юзерам, которым не нужно тестировать, создавать и проверять страницы сайта на наличие ошибок. Зато он может понадобиться веб-мастерам, скажем, для отладки страницы, подгонки картинки под определённый размер и т.д.

Рядовому пользователю может понадобиться инструментарий разработчика, например, если ему понравился шрифт или цвет на конкретной странице, и он хочет узнать его название. Любой элемент можно просмотреть, открыв html код и css стили, использованные на данной странице. Затем можно скопировать необходимые данные (к примеру, стиль и код кнопки) и вставить на свой сайт.

Активация режима

Как включить режим разработчика? Интерфейс с инструментами включается несколькими способами. Для начала открываем Yandex browser на любой странице.

Первый способ – открыть консоль с инструментами:

1. В правом верхнем углу веб-обозревателя кликнуть по значку «настройки» (с тремя горизонтальными полосками).
2. В открывшемся списке выбираем пункт «дополнительно».
3. Далее нажимаем на «дополнительные «инструменты» («More tools»).
4. Выбираем нужный инструмент.

Второй способ для тех, кто не хочет открывать консоль с помощью мышки. Для этого можно воспользоваться горячими клавишами для активации требуемого инструмента, причём при любой раскладке клавиатуры и независимо от того, была ли нажата клавиша «Caps Lock»:

• Ctrl+U (при русской раскладке – буква «Г») – для просмотра кода страница («View page code»). Чтобы внести изменения, кликаем на кнопку «Править».
• Ctrl+Shift+J («О») – для открытия консоли Java («JavaScript console»). Инструменты открываются после нажатия на вкладку «Console».
• Ctrl+Shift+I (Ш) – чтобы выбрать инструменты разработчика («Developer tools»).

Инструменты разработчика можно открыть всего одной клавишей – «F12». Далее кликнуть по той же вкладке «Console». На системе Mac инструментарий разработчика включается нажатием Cmd» ⌘, «Option» ⌥ и «I».

Пользоваться консолью могут и разработчики расширений. Для этого нужно:

1. Открыть яндекс браузер.
2. Вставить в адресную строку ссылку browser://extensions/ (тот же способ работает и в Chrome).
3. Перейти по ней.

Вас направят сюда:

Ставим галочку сверху, где написано «Режим разработчика». После этого пользователю предоставляется выбор того, что нужно сделать с расширениями:

• Для обновления установленных в браузере расширений нажимаем на «обновить расширения».
• Если нужно протестировать его, выбираем опцию «Загрузить распакованное расширение», а затем нажимаем на нужный файл.

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

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

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 и базами данных

DevTools для «чайников»

Недавно на базе Владимирского Института информационных технологий и радиоэлектроники прошла очередная встреча VLADIMIR TECH TALKS. Технологический митап, организованный международным IT-разработчиком Altenar в формате открытого и доверительного разговора про насущные проблемы в области разработки ПО, собрал немало участников из числа начинающих и продвинутых программистов. Делимся содержанием наиболее интересных докладов.

Наиболее заметным стало выступление независимого WEB-разработчика Антона Грибанова. Он поделился своим опытом использования DevTools. На самом деле, обзорных статей по заявленной тематике для профессионалов немало. С ними легко можно ознакомиться на профильных ресурсах (тык, тык, тык, тык).

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

Говорим по понятиям

Инструменты разработчика (от англ. «development tools» или сокращённо «DevTools») ─ это программы, позволяющие создавать, тестировать и отлаживать (debug) программное обеспечение.

Современные браузеры, Safari, Firefox, Microsoft Edge, Chrome, Яндекс и другие, имеют встроенные инструменты разработчика, позволяющие просмотреть исходный код сайта. Отдельно устанавливать их не требуется. С их помощью можно просматривать и отлаживать HTML сайта, его CSS и Javascript. Также можно проверить сетевой трафик, потребляемый сайтом, его быстродействие и много других параметров.

В правом углу размещенной выше иллюстрации можно увидеть структуру web-страницы и стили, примененные к текущему элементу.

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

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

HTML (англ. HyperText Markup Language) ─ это скелет веб-страницы. Для того, чтобы вся эта история начала двигаться и нужен Javascript (календарики, выпадающее меню, всплывающие окна, анимация и прочее, делается с помощью JS). Для придания странице божеского вида вам понадобится CSS (каскадные таблицы стилей).

Представим HTML-документ в простейшей форме:


Фактически HTML-документ состоит из элементов (строка с открывающим и закрывающим тегом и, собственно, само содержимое).

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

Атрибут — используется для определения характеристик html-элемента и помещается внутри открывающего тега элемента. Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения. Смотрите на пример ниже, в нем используется атрибут disabled, у которого явно не задано значение.

Если внутри какого-либо тега используется еще один или даже несколько других — это называется вложенность тегов html.

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

Используем DevTools на практике

Потрогать изначально скрытые браузером DevTools можно весьма просто, использовав сочетание клавиш или перейдя в раздел «Дополнительные инструменты / Инструменты Разработчика». Также можно ткнуть курсором в любое место страницы, нажать на правую клавишу мыши и выбрать «Просмотреть код».

Рассмотрим несколько вкладок из DevTools. И первый — режим эмуляции из мобильных устройств. Несмотря на десктопный браузер, страница у вас будет отображаться так, если бы вы на нее зашли с мобильного устройства. Вторая вкладка — Elements. Она демонстрирует структуру html страницы. С ее помощью браузер видит web-страницу после всего того, что с ней сделал Javascript. И Network — это сетевые запросы страницы (список web-ресурсов, загружаемых страницей для отображения демонстрируемого контента).

В панели Elements располагается дерево элементов. Здесь можно открывать теги, смотреть их содержимое, при этом в документе будет подсвечиваться текущий выбранный тег. Также можно посмотреть различные атрибуты, например, «Класс» или «Размер».

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

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

Скачиваем видео из Instagram Stories
С помощью DevTools задача скачать видео из сторис Instagram утрачивает свою сакральность. Все до безобразия элементарно. Переходим на вкладку Network. Для удобства выбираем фильтр Media. Он покажет аудио- и видеофайлы, которые запрашивает страница. А дальше запускаем понравившееся нам видеоизображение, с прямой ссылкой на место его хранения. Ну, а далее открываем его в новом табе и выбираем место его нового хранения (например, на вашем диске).

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

Скачиваем фото из Instagram
В принципе ничего не мешает в случае понравившегося изображения сделать скриншот или попытаться «Сохранить изображение как», но качество и результативность этих упражнений устроит далеко не всех. Для пытливых умов опять-таки на помощь приходит инструментарий DevTools. Выбираем «Просмотреть код», находим ссылку на изображение в атрибуте src.

Второй способ через вкладку Network. Переходим по вкладке, ставим фильтр Img и обновляем страницу. Кстати, изображения можно отсортировать по размеру, контентные картинки, как правило, на странице самые большие по размеру. Точно также, правой клавишей кликаем на файл и «Сохранить как» в наиболее удобном для вас месте.

Удаление блокираторов контента
Бывает так, что хочется посмотреть какой-либо контент, но без регистрации сайт этого сделать не дает. И снова, здравствуйте DevTools. Обычно контент закрывается плашкой или прозрачным слоем. Открываем инструменты разработчика, определяем в коде блок-элемент закрывающий нужный нам участок контента и нажимаем Delete element.

Разблокировка форм ввода
Нередко всевозможные государственные структуры, разрабатывая на Javascript различные свои электронные формы для заполнения, препятствуют нашему любимому Copy/Paste (вставка и выделение текста). В этом случае снова приходится прибегать к помощи DevTools.
В инструментах разработчика идем в Настройки. Прокручиваем до поля Debugger и нажимаем галочку Disable JavaScript. Теперь можно вставлять текст.

Второй путь ─ открываем инструменты разработчика, нажимаем заветное сочетание клавиш и выбираем поиск по командам. Там выбираем JavaScript и одним из пунктов будет выключить JavaScript. Выключаем и радуемся жизни. Кстати, после вашего Copy/Paste JavaScript не помешало бы включить обратно, поскольку некоторые формы без него могут и не работать.

Версия для печати web-страниц
Надо признать, что сайтов, требующих использования описываемых дальше костылей, становится все меньше и меньше, но они по-прежнему периодически встречаются. Тем не менее, выбираем нужный нам сайт, удаляем во вкладке Elements через инструмент разработчика с помощью Delete elements ненужные элементы и части кода (реклама, контакты, ссылки и прочее). Далее отправляем все на печать и радуемся жизни.

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

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

Скачиваем видео из вКонтакте
Предлагаемый ниже рецепт несколько хитрее, чем был в случае с Instagram stories ранее, но тоже вполне земной. Заходим на мобильную версию ресурса (по сути это два разных в сравнении с десктопной версией сайта). Открываем инструмент разработчика, заходим во вкладку Сеть, в фильтрах выбираем Прочее и включаем воспроизведение видео. Далее в списке появится ссылка на проигрываемое видео, ну а дальше по накатанной: правая клавиша мыши, открываем в новой вкладке и сохраняем в любимое место на компьютере.

Давайте чаще встречаться!

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

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