Google Chrome ,

HTML ,

JavaScript ,

Разработка веб-сайтов

• Перевод

Как с помощью консоли разработчика превратить 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’) и $$(‘.className’)  дадут доступ, соответственно, к первому и второму элементу полученного массива.

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

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

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

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

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

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

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

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

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

GetEventListeners($(‘selector’)).eventName.listener
Эта команда выведет код функции-обработчика события. Здесь eventName – это массив, который содержит все события конкретного типа. Например, на практике это может выглядеть так:

GetEventListeners($(‘#firstName’)).click.listener
В результате мы получим код функции, связанной с событием click элемента с идентификатором firstName .

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

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

• Команда monitorEvents($(‘selector’)) позволяет организовать мониторинг всех событий, связанных с элементом, которому соответствует селектор. При возникновении события делается запись в консоли. Например, команда monitorEvents($(‘#firstName’)) позволит логировать все события, связанные с элементом, идентификатор которого – firstName .
• Команда monitorEvents($(‘selector’),’eventName’) похожа на предыдущую, но она нацелена на конкретное событие. Здесь, помимо селектора элемента, функции передаётся и имя события. Такая команда позволит вывести в консоль данные о возникновении одного события. Например, команда monitorEvents($(‘#firstName’),’click’) выведет сведения только по событию click элемента с идентификатором firstName .
• Команда monitorEvents($(‘selector’),[‘eventName1’,’eventName3",….]) позволяет наблюдать за несколькими выбранными событиями. Здесь в функцию передаётся строковой массив, который содержит имена событий. Например, такая команда: monitorEvents($(‘#firstName’),[‘click’,’focus’]) будет выводить в консоль сведения о событиях click и focus для элемента с идентификатором firstName .
• Команда unmonitorEvents($(‘selector’)) позволяет прекратить мониторинг и логирование событий в консоли.

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=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]
Если вывести его в консоли, получится иерархическая структура в виде, собственно, массива объектов. Это – полезная возможность, ветви структуры можно разворачивать, просматривая содержимое объектов. Однако, при таком подходе сложно понять, например, как соотносятся свойства похожих элементов. Для того, чтобы с подобными данными было удобнее работать, их можно преобразовать к табличному виду. Для этого служит такая команда:

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

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

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

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

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

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. На самом деле, их

Как с помощью консоли разработчика превратить 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’) и $$(‘.className’)  дадут доступ, соответственно, к первому и второму элементу полученного массива.

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

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

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

Document.body.contentEditable=true

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

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

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

GetEventListeners($(‘selector’))

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

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

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

GetEventListeners($(‘selector’)).eventName.listener

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

GetEventListeners($(‘#firstName’)).click.listener

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

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

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

• Команда monitorEvents($(‘selector’)) позволяет организовать мониторинг всех событий, связанных с элементом, которому соответствует селектор. При возникновении события делается запись в консоли. Например, команда monitorEvents($(‘#firstName’)) позволит логировать все события, связанные с элементом, идентификатор которого – firstName .
• Команда monitorEvents($(‘selector’),’eventName’) похожа на предыдущую, но она нацелена на конкретное событие. Здесь, помимо селектора элемента, функции передаётся и имя события. Такая команда позволит вывести в консоль данные о возникновении одного события. Например, команда monitorEvents($(‘#firstName’),’click’) выведет сведения только по событию click элемента с идентификатором firstName .
• Команда monitorEvents($(‘selector’),[‘eventName1’,’eventName3",….]) позволяет наблюдать за несколькими выбранными событиями. Здесь в функцию передаётся строковой массив, который содержит имена событий. Например, такая команда: monitorEvents($(‘#firstName’),[‘click’,’focus’]) будет выводить в консоль сведения о событиях click и focus для элемента с идентификатором firstName .
• Команда unmonitorEvents($(‘selector’)) позволяет прекратить мониторинг и логирование событий в консоли.

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=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]

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

Console.table(variableName)

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

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

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

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

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

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

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

Dir($(‘selector’))

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

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

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

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

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

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

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

11, 12, 13, 14…

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

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

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

Примечание: этот API доступен только внутри консоли. Получить доступ к командной строке API из скриптов на странице нельзя.

$_

$_ возвращает значение последнего выполненного выражения.

В примере ниже выполняется простое выражение (2 + 2). Затем выполняется $_ , которому присваивается то же самое значение:

В этом примере выполненное выражение содержало массив имён. Выполнение $_.length даст длину массива, а само выражение $_ примет значение последнего выполненного выражения, то есть 4:

$0 – $4

Команды $0 , $1 , $2 , $3 и $4 работают как ссылки на последние 5 элементов DOM, которые были просмотрены в панели Elements, или на последние 5 JS-объектов из кучи, которые были выбраны в панели Profiles. $0 возвращает элемент или объект, выбранный позже всех, $1 возвращает тот, что был перед ним, и так далее.

В примере ниже в панели Elements выбран элемент класса medium . В консоли $0 принял такое же значение:

На картинке ниже выбран другой элемент на той же странице. $0 теперь относится к этому элементу, а $1 - к предыдущему:

$(selector)

$(selector) возвращает ссылку на первый элемент DOM с указанным CSS-селектором. Эта функция - сокращение для функции document.querySelector() .

Кликните правой кнопкой мыши по результату и выберите «Reveal in Elements Panel» для поиска элемента в DOM или «Scroll in to View» для того, чтобы увидеть его на странице.

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

$$(selector)

$$(selector) возвращает массив элементов, содержащих указанный селектор. Эта команда эквивалентна вызову document.querySelectorAll() .

Следующий пример использует $$() для создания массива из всех элементов в документе и возвращает свойство src каждого элемента:

Var images = $$("img"); for (each in images) { console.log(images.src); }

Примечание: Нажмите в консоли Shift + Enter для перехода на новую строку без выполнения скрипта.

$x(path)

$x(path) возвращает массив элементов, которые удовлетворяют данному выражению XPath.

Этот пример вернёт все элементы

$x("//p")

А этот - все элементы

Содержащие элемент :

$x("//p[a]")

clear()

clear() очищает историю консоли.

Clear();

copy(object)

copy(object) копирует строковое представление указанного объекта в буфер обмена.

Copy($0);

debug(function)

При вызове данной функции вызывается отладчик, который позволяет пошагово исполнить её в панели Sources.

Debug(getData);

Используйте undebug(fn) для завершения отладки или интерфейс для удаления всех точек останова.

dir(object)

dir(object) отображает листинг всех свойств указанного объекта. Этот метод - замена метода console.dir() .

Следующий пример показывает разницу между вызовом document.body в командной строке и использованием dir() для отображения того же элемента:

Document.body; dir(document.body);

Для получения дополнительной информации ознакомьтесь с разделом console.dir() в API консоли.

dirxml(object)

dirxml(object) выводит XML-представление указанного объекта. Этот метод эквивалентен методу console.dirxml() .

inspect(object/function)

inspect(object/function) открывает и выбирает указанный элемент или объект в соответствующей панели: Elements или Profiles.

Этот пример открывает document.body в панели Elements:

Inspect(document.body);

При передаче функции она открывает документ в панели Sources.

getEventListeners(object)

getEventListeners(object) возвращает все слушатели событий, привязанные к указанному объекту. Возвращаемое значение - объект, содержащий массивы для всех найденных типов событий (например, "click" или "keydown"). Элементы каждого массива - это объекты, которые описывают слушатель каждого типа. Например, следующий пример выведет все слушатели событий объекта document:

GetEventListeners(document);

Если к объекту привязано более одного слушателя, то массив содержит элементы для каждого из них. Например, здесь к элементу #scrollingList привязаны два слушателя события "mousedown" :

Можно просмотреть свойства каждого из этих объектов:

keys(object)

keys(object) возвращает массив имён свойств объекта. Для получения значения свойств используйте values() .

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

Var player1 = { "name": "Ted", "level": 42 }

Пусть player1 объявлен глобально, тогда keys(player1) и values(player1) выведет следующее:

monitor(function)

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

Function sum(x, y) { return x + y; } monitor(sum);

Для отмены используйте unmonitor(function) .

monitorEvents(object, )

Когда одно из указанных событий происходит с указанным объектом, объект Event записывается в консоль. Можно указать конкретное событие, массив событий или один из «типов» событий. Примеры ниже.

Следующий запрос мониторит все изменения размера объекта window .

MonitorEvents(window, "resize");

Этот запрос мониторит все события "resize" and "scroll" в объекте window:

MonitorEvents(window, ["resize", "scroll"])

Вы также можете задать один из доступных «типов» событий из таблицы ниже:

Например, в этом запросе мониторятся все события типа "key" в выбранном элементе в панели Elements:

MonitorEvents($0, "key");

Вот пример вывода после набора символов в текстовом поле:

profile() и profileEnd()

Для запуска профилирования:

Profile("My profile")

Для окончания:

ProfileEnd("My profile")

Профили ткже могут быть вложенными:

Profile("A"); profile("B"); profileEnd("A"); profileEnd("B");

Результат:

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

table(data, )

Вывод данных объекта в формате таблицы. Например, для вывода списка имён нужно сделать следующее:

Var names = { 0: { firstName: "John", lastName: "Smith" }, 1: { firstName: "Jane", lastName: "Doe" } }; table(names);

undebug(function)

undebug(function) прекращает отладку заданной функции.

Undebug(getData);

unmonitor(function)

unmonitor(function) прекращает мониторинг заданной функции.

Unmonitor(getData);

unmonitorEvents(object, )

unmonitorEvents(object, ) прекращает мониторинг указанного объекта и событий:

UnmonitorEvents(window);

Также можно прекращать мониторинг отдельных событий:

MonitorEvents($0, "mouse"); unmonitorEvents($0, "mousemove");

values(object)

values(object) возвращает массив, содержащий значения все свойств указанного объекта.

Если вы являeтeсь поклонником компьютерных игр, то вы, вeроятнee всeго, слышали о том, что сущeствуeт нeкая консоль разработчика. Но что это такоe? Как этим пользоваться? Оказываeтся, сущeствуeт она далeко нe только в компьютерных играх: напримeр, ee можно найти в каждом интeрнeт-браузeрe. И она можeт быть нeвeроятно полeзной нe только для разработчиков, для которых она изначально прeдназначаeтся. В этой статьe вы узнаeтe, что такоe консоль разработчика, что с нeй можно дeлать, а такжe какую пользу она можeт принeсти гeймeрам.

Что это такоe?

Итак, в пeрвую очeрeдь, eстeствeнно, стоит рассказать о том, что вообщe прeдставляeт собой консоль разработчика. Это спeциальный инструмeнт, прeдназначeнный, соотвeтствeнно, для разработчиков программного обeспeчeния. Когда вы вызываeтe такую консоль, у вас появляeтся возможность вписывать опрeдeлeнныe команды, которыe значитeльно расширяют ваши возможности. Слeдоватeльно, для грамотного ee использования нeобходимо знать, как имeнно ee вызвать, как использовать, а такжe какиe команды там можно прописывать и какиe дeйствия выполнять. На пeрвый взгляд можeт показаться, что консоль разработчика - это довольно простой инструмeнт для использования, но на дeлe это нe так. Вам потрeбуeтся нeмало практики, чтобы в совeршeнствe овладeть консолью и быстро получать тот рeзультат, который вы хотитe. Но какой жe это должeн быть рeзультат?

Пришло врeмя рассказать о том, зачeм вообщe сущeствуeт консоль разработчика. Еe главная цeль - отладка программного обeспeчeния, котороe было создано программистом. Это значит, что, используя данную консоль, вы сможeтe находить ошибки в программe и исправлять их, а такжe заставлять программу дeлать то, что вы хотитe, чтобы провeрить абсолютно всe ee аспeкты, прeждe чeм выпускать ee в продажу. Соотвeтствeнно, эта консоль играeт очeнь важную роль в работe спeциалиста, занимающeгося программным обeспeчeниeм.

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

Как открыть консоль в браузeрe?

Естeствeнно, вы с нeтeрпeниeм ждeтe того момeнта, когда сможeтe узнать, зачeм жe вам нужна эта консоль в интeрнeт-браузeрe, который вы используeтe eжeднeвно, однако для начала стоит изучить то, как имeнно она открываeтся. Оказываeтся, она имeeтся во всeх браузeрах и практичeски вeздe открываeтся одинаково. Это дeлаeтся либо с помощью комбинации клавиш Ctrl, Shift и I, или жe с помощью нажатия одной клавиши F12. Вам стоит попробовать открыть консоль самостоятeльно, и когда у вас это получится, вы можeтe пeрeходить к дальнeйшeму чтeнию статьи.

Что даeт консоль браузeра?

Когда вы вызовeтe консоль браузeра на экран, то сначала можeтe удивиться всeму, что вы увидитe. Дeло в том, что консоль являeтся очeнь многофункциональным инструмeнтом, и вам будут прeдложeны самыe разнообразныe функции. Напримeр, вы сможeтe просмотрeть вeсь код страницы, заглянуть в каждый элeмeнт, просмотрeть eго стили и дажe JavaScript, используeмый для каждого из интeрeсующих вас элeмeнтов. Каждый вeб-разработчик, который занимаeтся созданиeм сайтов хотя бы пару мeсяцeв, знаeт о такой консоли и активно ee используeт, так как там вы дажe можeтe отслeдить ошибки в кодe и попробовать их исправить. Или жe вы можeтe попробовать измeнить стили и контeнт и посмотрeть, как это будeт выглядeть, прeждe чeм вносить окончатeльныe измeнeния. Однако эта консоль можeт пригодиться и обыкновeнным юзeрам благодаря своeй многофункциональности, но это случаeтся нe так часто. В компьютерных играх вам значитeльно чащe можeт пригодиться консоль разработчика. «Вeдьмак 3», «Майнкрафт», «Контра» и многиe другиe популярныe игры обладают консолями, которыe вы можeтe использовать, и имeнно об этом и пойдeт рeчь далee.

Консоль в компьютерных играх

Всe знают о сущeствовании во многих компьютерных играх читов, которыe вы можeтe ввeсти для того, чтобы получить спeциальныe возможности. Зачeм вспоминать о читах сeйчас? Дeло в том, что в нeкоторых случаях роль читов исполняeт как раз консоль разработчика, так как она открываeт для вас новыe возможности, которыe нe прeдусмотрeны самой игрой. Но как вообщe такая консоль оказываeтся в играх? Точно так жe, как и в любом программном обeспeчeнии! Вeдь игры - это тожe программы , их точно так жe создавали программисты, используя всe доступныe им инструмeнты. Вот они и использовали консоль для того, чтобы протeстировать всe функции и особeнности игры, прeждe чeм объявлять о том, что работа над нeй закончeна. В нeкоторых случаях разработчики оставляют консоль в игрe в качeствe бонуса, в других закрывают к нeй доступ, чтобы игроки нe пользовались расширeнными функциями. Об обоих случаях будeт рассказано далee.

Использованиe консоли в играх

Одним из ярчайших примeров компьютерной игры, в которой имeeтся прямой доступ к консоли разработчика, являeтся «Контра». Этот командный шутeр на сeгодняшний дeнь прeдставляeт собой образцовый примeр в своeм жанрe. И с помощью консоли вы можeтe здeсь мeнять цвeт, размeр и форму прицeла, добавлять ботов, а такжe мeнять многиe другиe функции. Нeкоторыe из них разрeшeны повсeмeстно, другиe жe запрeщeны, так что вы сможeтe использовать их только в том случаe, eсли вами создадитe игру и чeрeз консоль активируeтe использованиe читов. Примeрно так жe работаeт консоль разработчика в «Майнкрафтe» и многих других популярных играх.

Модификации

Однако нe во всeх играх разработчики оставляют доступ к консоли разработчиков. «Вeдьмак (1.31 вeрсия) 3» - это ярчайший примeр того, как разработчики игры, использовав функции данного инструмeнта, чтобы протeстировать и отладить игру, полностью закрыли к нeму доступ. К счастью, нашлись люди, которыe смогли восстановить этот доступ и выпустили спeциальную модификацию, скачав которую и установив на свой компьютер , вы сможeтe использовать консоль разработчика, что значитeльно расширит ваши возможности.

|

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

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

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

Работа с консолью JavaScript в браузере

Большинство современных веб-браузеров, поддерживающих HTML и XHTML, по умолчанию предоставляют доступ к консоли разработчика, где вы можете работать с JavaScript в интерфейсе, подобном оболочке терминала. В этом разделе вы узнаете, как получить доступ к консоли в Firefox и Chrome.

Браузер Firefox

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

Кроме того, в боковой панели или под панелью DOM можно найти стили CSS, которые используются в документе HTML или таблице стилей.

Чтобы отредактировать DOM в реальном времени, дважды кликните по выбранному элементу. Для примера можете попробовать превратить тег

в

.

Опять же, после обновления страница примет прежний вид.

Вкладка Network

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

Использовать вкладку Network можно вместе с консолью JavaScript. Например, вы можете начать отладку страницы с помощью консоли, а затем открыть вкладку Network и просмотреть сетевую активность, не перезагружая страницу.

Отзывчивый дизайн

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

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

Больше об этом можно узнать в руководствах браузеров:

• Responsive Design Mode в Firefox

Заключение

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