Как открыть файл в консоли хрома

Консоль разработчика

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

Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.

Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).

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

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

Google Chrome

В её JavaScript-коде закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.

Нажмите F12 или, если вы используете Mac, Cmd + Opt + J .

По умолчанию в инструментах разработчика откроется вкладка Console (консоль).

Она выглядит приблизительно следующим образом:

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

• В консоли мы можем увидеть сообщение об ошибке, отрисованное красным цветом. В нашем случае скрипт содержит неизвестную команду «lalala».
• Справа присутствует ссылка на исходный код bug.html:12 с номером строки кода, в которой эта ошибка и произошла.

Под сообщением об ошибке находится синий символ > . Он обозначает командную строку, в ней мы можем редактировать и запускать JavaScript-команды. Для их запуска нажмите Enter .

Многострочный ввод

Обычно при нажатии Enter введённая строка кода сразу выполняется.

Чтобы перенести строку, нажмите Shift + Enter . Так можно вводить более длинный JS-код.

Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе Отладка в браузере.

Firefox, Edge и другие

Инструменты разработчика в большинстве браузеров открываются при нажатии на F12 .

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

Safari

Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).

Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:

Теперь консоль можно активировать нажатием клавиш Cmd + Opt + C . Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.

Итого

• Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.
• В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12 . В Chrome для Mac используйте комбинацию Cmd + Opt + J , Safari: Cmd + Opt + C (необходимо предварительное включение «Меню разработчика»).

Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.

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

Консоль разработчика Google Chrome: десять неочевидных полезностей

Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.

На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.

1. Выбор элементов DOM

Если вы знакомы с jQuery, не мне вам рассказывать о важности конструкций вроде $(‘.class’) и $(‘id’). Для тех, кто не в курсе, поясню, что они позволяют выбирать элементы DOM, указывая назначенные им классы и идентификаторы. Консоль разработчика обладает похожей функциональностью. Здесь «$», однако, отношения к jQuery не имеет, хотя делает, в сущности, то же самое. Это – псевдоним для функции document.querySelector().

Команды вида $(‘tagName’), $(‘.class’), $(‘#id’) и $(‘.class #id’) возвращают первый элемент DOM, совпадающий с селектором. При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет.

Есть здесь и ещё одна конструкция: $$. Её использование выглядит как $$(‘tagName’) или $$(‘.class’). Она позволяет выбрать все элементы DOM, соответствующие селектору и поместить их в массив. Работа с ним ничем не отличается от других массивов. Для того, чтобы выбрать конкретный элемент, можно обратиться к нему по индексу.

Например, команда $$(‘.className’) предоставит нам массив всех элементов страницы с указанным при её вызове именем класса. Команды $$(‘.className’)[0] и $$(‘.className’)[1] дадут доступ, соответственно, к первому и второму элементу полученного массива.

Эксперименты с командами $ и $$

2. Превращаем браузер в текстовый редактор

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

document.body.contentEditable=true

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

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

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

getEventListeners($(‘selector’))

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

Обработчики событий

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

getEventListeners($(‘selector’)).eventName[0].listener

Эта команда выведет код функции-обработчика события. Здесь eventName[0] – это массив, который содержит все события конкретного типа. Например, на практике это может выглядеть так:

getEventListeners($(‘#firstName’)).click[0].listener

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

4. Мониторинг событий

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

Команда monitorEvents($(‘selector’)) позволяет организовать мониторинг всех событий, связанных с элементом, которому соответствует селектор. При возникновении события делается запись в консоли. Например, команда monitorEvents($(‘#firstName’)) позволит логировать все события, связанные с элементом, идентификатор которого – firstName.

5. Измерение времени выполнения фрагмента кода

В консоли Chrome доступна функция вида console.time(‘labelName’), которая принимает в качестве аргумента метку и запускает таймер. Ещё одна функция, console.timeEnd(‘labelName’), останавливает таймер, которому назначена переданная ей метка. Вот пример использования этих функций:

console.time('myTime'); //Запускает таймер с меткой myTime console.timeEnd('myTime'); //Останавливает таймер с меткой myTime //Вывод: myTime:123.00 ms

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

Cкажем, мне нужно выяснить длительность исполнения цикла. Сделать это можно так:

console.time('myTime'); // Запускает таймер с меткой myTime for(var i=0; i < 100000; i++)< 2+4+5; >console.timeEnd('mytime'); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

6. Вывод значений переменных в виде таблиц

Предположим, у нас имеется такой массив объектов:

var myArray=[,,,]

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

console.table(variableName)

Она позволяет вывести переменную и все её свойства в виде таблицы. Вот, как это выглядит.

Вывод массива объектов в виде таблицы

7. Просмотр кода элемента

Быстро перейти к коду элемента из консоли можно с помощью следующих команд:

Команда inspect($(‘selector’)) позволяет открыть код элемента, соответствующего селектору, в панели Elements инструментов разработчика Google Chrome. Например, команда inspect($(‘#firstName’)) позволит просмотреть код элемента с идентификатором firstName. Команда inspect($$(‘a’)[3]) откроет код четвёртой ссылки, которая присутствует в DOM.

8. Вывод списка свойств элемента

Если надо просмотреть список свойств элемента, консоль поможет и в этом. Здесь используется такая команда:

dir($(‘selector’))

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

9. Вызов последнего полученного результата

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

2+3+4 9 //- Результат суммирования - 9 $_ 9 // Выводится последний полученный результат $_ * $_ 81 // Так как последний результат 9, получаем 81 Math.sqrt($_) 9 // Квадратный корень из последнего результата, который был равен 81 $_ 9 // Снова получаем 9 – результат предыдущего вычисления

10. Очистка консоли и памяти

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

clear()

После нажатия на Enter чистая консоль будет готова к новым экспериментам.
Вот и всё.

11, 12, 13, 14…

Откровенно говоря, это – далеко не всё. Я показал лишь некоторые из неочевидных возможностей консоли Google Chrome. На самом деле, их намного больше. Уверен, вы сможете расширить мой список собственными находками.

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

А какие инструменты используете вы? Давайте-давайте, делитесь какими-нибудь приколюхами! 🙂

• JavaScript
• HTML
• разработка
• Google Chrome
• консоль разработчика

• Блог компании RUVDS.com
• Веб-разработка
• JavaScript
• Google Chrome
• HTML

Введение в Chrome DevTools. Console, Sources, Network

В первой части цикла про инструменты разработчика мы разобрались со вкладкой Elements, а теперь продолжаем знакомить с другими важными частями DevTools — вкладками Console, Sources и Network.

Бонус — расскажем, как сделать скриншот всей страницы в Chrome без плагинов.

Вкладка Console

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

Вкладка Sources

Теперь заглянем во вкладку Sources. Она показывает все подключенные к странице ресурсы. Чаще всего эта вкладка используется при отладке кода.

Например, так выглядит минифицированный CSS-файл на вкладке Sources.

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

Вкладка Network

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

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

Обычно вкладку Network используют, чтобы узнать состояние ресурса, который не отображается на странице, но был к ней подключен. Смотрим в таблицу — если есть какая-то ошибка, ресурс будет гореть красным. Если ошибок нет, то статус каждого запроса — 200. Это значит, что всё хорошо.

Но если на сайте будет ошибка, сообщение о ней отобразится и на вкладке Console.

Если нажать кнопку фильтра, появится возможность посмотреть, как загружаются определенные ресурсы — например, картинки или шрифты.

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

Проверка вёрстки на мобильных

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

Это незаменимый инструмент в работе над адаптивной вёрсткой.

Скриншоты страниц

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

Также есть возможность сделать скриншот всей страницы целиком — для этого выберите пункт Capture full size screenshot.

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.