|

Современные браузеры предоставляют встроенные инструменты разработки для 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 в современных веб-браузерах. Также здесь можно найти информацию о других полезных инструментах разработки.

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

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

Что это такое?

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

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

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

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

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

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

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

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

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

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

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

Модификации

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

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

Для чего нужна консоль в браузере

Всего есть три причины для создания консоли в браузере:

1. Для отладки самого браузера еще на стадии проектирования.
2. Для обучения молодых специалистов функциям того или иного браузера.
3. Для отладки профессионалами своих интернет-страниц в реальном времени.

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

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

Как открыть консоль разработчика в «Яндексе»

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

Инструкция о том, как в браузере «Яндекс» открыть консоль:

1. Запустите браузер от «Яндекса», после чего дождитесь его полной загрузки в оперативную память, это займет всего лишь несколько секунд.
2. Теперь откройте любую интернет-страничку, например, Google, но это совсем неважно, подойдет любая.
3. Для открытия инструментов «Яндекс» нажмите следующие клавиши: «Ctrl + Shift + I»
4. Если вы хотите работать именно с JavaScript - это такой язык программирования, то необходимо будет зажать следующие клавиши: «Ctrl + Shift + J»

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

Открытие консоли в других браузерах

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

1. Google Chrome. Есть два варианта: зайти в настройки, где будет кнопка открытия консоли, либо нажать сочетание клавиш «Ctrl + Shift + I».
2. Opera. В меню «Средства разработки» будет кнопка «Исходный код», либо же сочетание клавиш «Ctrl+ U».
3. Firefox. В настройках браузера, либо «Ctrl + Shift + J».
4. Safari. F12, или зайти в «Дополнения», где будет «Показывать меню для разработчика»

В заключение

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

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) возвращает массив, содержащий значения все свойств указанного объекта.