Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $ ? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.
На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.
Команды вида $(‘tagName’) , $(‘.class’) , $(‘#id’) и $(‘.class #id’) возвращают первый элемент DOM, совпадающий с селектором. При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет.
Есть здесь и ещё одна конструкция: $$ . Её использование выглядит как $$(‘tagName’) или $$(‘.class’) . Она позволяет выбрать все элементы DOM, соответствующие селектору и поместить их в массив. Работа с ним ничем не отличается от других массивов. Для того, чтобы выбрать конкретный элемент, можно обратиться к нему по индексу.
Например, команда $$(‘.className’) предоставит нам массив всех элементов страницы с указанным при её вызове именем класса. Команды $$(‘.className’) и $$(‘.className’) дадут доступ, соответственно, к первому и второму элементу полученного массива.
Эксперименты с командами $
и $$
Document.body.contentEditable=true
После её исполнения в консоли, документ, открытый в браузере, можно редактировать без необходимости поисков нужного фрагмента в HTML-коде.
GetEventListeners($(‘selector’))
В результате её выполнения будет выдан массив объектов, содержащий список событий, на которые может реагировать элемент.
Обработчики событий
Для того, чтобы найти обработчик для конкретного события, можно использовать такую конструкцию:
GetEventListeners($(‘selector’)).eventName.listener
Эта команда выведет код функции-обработчика события. Здесь eventName
– это массив, который содержит все события конкретного типа. Например, на практике это может выглядеть так:
GetEventListeners($(‘#firstName’)).click.listener
В результате мы получим код функции, связанной с событием click
элемента с идентификатором firstName
.
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
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)
Она позволяет вывести переменную и все её свойства в виде таблицы. Вот, как это выглядит.
Вывод массива объектов в виде таблицы
Dir($(‘selector’))
Она возвращает объект, содержащий свойства, связанные с заданным элементом DOM. Как и в прочих подобных случаях, содержимое этого объекта можно исследовать, просматривая его древовидную структуру.
2+3+4 9 //- Результат суммирования - 9 $_ 9 // Выводится последний полученный результат $_ * $_ 81 // Так как последний результат 9, получаем 81 Math.sqrt($_) 9 // Квадратный корень из последнего результата, который был равен 81 $_ 9 // Снова получаем 9 – результат предыдущего вычисления
Clear()
После нажатия на Enter чистая консоль будет готова к новым экспериментам.
Вот и всё.
Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $ ? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.
На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.
Команды вида $(‘tagName’) , $(‘.class’) , $(‘#id’) и $(‘.class #id’) возвращают первый элемент DOM, совпадающий с селектором. При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет.
Есть здесь и ещё одна конструкция: $$ . Её использование выглядит как $$(‘tagName’) или $$(‘.class’) . Она позволяет выбрать все элементы DOM, соответствующие селектору и поместить их в массив. Работа с ним ничем не отличается от других массивов. Для того, чтобы выбрать конкретный элемент, можно обратиться к нему по индексу.
Например, команда $$(‘.className’) предоставит нам массив всех элементов страницы с указанным при её вызове именем класса. Команды $$(‘.className’) и $$(‘.className’) дадут доступ, соответственно, к первому и второму элементу полученного массива.
Эксперименты с командами $
и $$
Document.body.contentEditable=true
После её исполнения в консоли, документ, открытый в браузере, можно редактировать без необходимости поисков нужного фрагмента в HTML-коде.
GetEventListeners($(‘selector’))
В результате её выполнения будет выдан массив объектов, содержащий список событий, на которые может реагировать элемент.
Обработчики событий
Для того, чтобы найти обработчик для конкретного события, можно использовать такую конструкцию:
GetEventListeners($(‘selector’)).eventName.listener
Эта команда выведет код функции-обработчика события. Здесь eventName
– это массив, который содержит все события конкретного типа. Например, на практике это может выглядеть так:
GetEventListeners($(‘#firstName’)).click.listener
В результате мы получим код функции, связанной с событием click
элемента с идентификатором firstName
.
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
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)
Она позволяет вывести переменную и все её свойства в виде таблицы. Вот, как это выглядит.
Вывод массива объектов в виде таблицы
Dir($(‘selector’))
Она возвращает объект, содержащий свойства, связанные с заданным элементом DOM. Как и в прочих подобных случаях, содержимое этого объекта можно исследовать, просматривая его древовидную структуру.
2+3+4 9 //- Результат суммирования - 9 $_ 9 // Выводится последний полученный результат $_ * $_ 81 // Так как последний результат 9, получаем 81 Math.sqrt($_) 9 // Квадратный корень из последнего результата, который был равен 81 $_ 9 // Снова получаем 9 – результат предыдущего вычисления
Clear()
После нажатия на Enter чистая консоль будет готова к новым экспериментам.
Вот и всё.
Подготовительный этап к публикации приложения на Google Play займет всего несколько минут. Для этого понадобиться выполнить следующие действия:
Для регистрации учетной записи разработчика вам необходимо выполнить следующие действия:
По окончанию проверки регистрации, вы будете уведомлены письмом на электронный адрес, указанный при регистрации.
После того как вы зарегистрировались и получили подтверждение по электронной почте, вы можете войти в консоль разработчика Google Play , которая будет вашим проводником при публикации приложения на Google Play . Ниже в этом разделе будут определены ключевые элементы управления консоли разработчика.
Страница All applications представляет краткий обзор ваших приложений, позволяет переходить на страницу статистики, отзывов или страницу загрузки нового приложения.
На странице данных учетной записи вы можете указать основные сведения о себе или своей компании. Эти данные действительно важны, поскольку позволяют идентифицировать вас среди разработчиков и пользователей Google Play.
Учетная запись разработчика содержит:
Консоль разработчика позволяет создавать яркие страницы для вашего приложения, называемые Store Listing page. Store Listing page это дом для вашего приложения в Google Play, это страница, на которой пользователи могут получить всю самую интересную информацию о приложении и загрузить его.
Вы можете загружать снимки экрана и видео, чтобы выделить ваше приложение среди других, вы можете добавить подробное описание функционала вашего приложения и добавлять заметки об обновлениях и многое другое. Информация на Store Listing page может быть обновлена в любое время.
Функции загрузки и публикации. Из консоли разработчика вы можете быстро загрузить релиз вашего приложения (apk файл) и опубликовать его по готовности. Также отмена публикации может быть осуществлена в любое время.
Управление условиями распространения .В консоли разработчика вы можете указать страны, в которых ваше приложение будет доступно для скачивания и указать поддерживаемые устройства.
Управление ценами и платежными системами
Статистика и отзывы . Данный пункт был описан ранее
Огромная библиотека приложений под названием Google Play является не только источником огромного количества самых разнообразных программ для мобильных устройств на базе операционной системы Android, но и способом заявить о себе. Речь идет о начинающих разработчиках софта, которые имеют отличную возможность проявить свои способности и пополнить виртуальные полки программного обеспечения своими творениями.
Хотите стать разработчиком компании Google, и разместить свое приложение в Плей Маркет? Для этого необходимо создать свой аккаунт и проплатить единичный вступительный взнос в размере двадцати пяти долларов. Более того, у каждого зарегистрированного разработчика есть возможность приглашать других, распределять соответственные роли и совместно производить то или иное программное обеспечение. Компания гарантированно берет на себе ведение статистики, организацию продажи и выплаты, взымая тридцать процентов от общей суммы дохода. При этом сами приложения вполне могут быть бесплатными – с рекламой или же без нее.
Что же касается статистики, ведение которой берет на себя компания Google, то в нее входит подробная информация об устройствах, количество самих установок или удалений и так далее. Это позволяет разработчику лично корректировать особенности своего приложения или же приложений в соответствии с поведением пользователей. Также компания предлагает свои личные рекомендации и советы по поводу оптимизации созданного софта, что позволит значительно повысить его популярность. Чтобы создать аккаунт, нужно перейти по следующей ссылке:
Для этого необходимо указать свое полное имя, а также никнейм, который связан с почтой Google. Попытайтесь придумать простое и одновременно уникальное имя (никнейм), чтобы оно было узнаваемым и легко запоминаемым. Все нюансы Вы узнаете, перейдя по ссылке выше.
После создания аккаунта необходимо перейти в консоль разработчика , а для этого существует следующая ссылка:
Помните, что этот вступительный взнос является одноразовым и Вы получаете право приглашать других разработчиков для совместного производства программного обеспечения. Таким образом, можно попросту собрать целую команду и совместно использовать всего один аккаунт, а сумму вступительного взноса просто разделить не всех.