Андрей Смирнов
Время чтения: ~10 мин.
Просмотров: 5

Как создать аккаунт разработчика в App Store и Google Play

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

Подробности

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

  • разработчикам расширений, верстальщикам сайтов;
  • людям, изучающим HTML и CSS;
  • тестерам готового продукта.

Kartinka-Rezhim-razrabotchika-v-Google-Chrome.pngКак правило, особое отображение информации на странице открывает человеку возможность увидеть профессиональную верстку. За счет этого его обучаемость просто взрывается.

Для активации особого режима работы достаточно:

  1. Запустить Google Chrome и кликнуть ЛКМ по главной кнопке в правом верхнем углу экрана.
  2. В системном меню навести курсор на «Дополнительные инструменты».
  3. Затем выбрать пункт «Инструменты разработчика».Punkt-Instrumenty-razrabotchika-v-osnovnom-menyu-Google-Chrome.png

После этого правую половину пользовательского интерфейса займет окно со множеством вкладок, гигатоннами кода и элементов верстки.

Как говорилось выше, для активации особого режима достаточно использовать волшебное сочетание клавиш <keybtn>Ctrl</keybtn> +<keybtn>Shift</keybtn> + <keybtn>I</keybtn>.

Дополнение

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

Список представлен ниже:

  • Поиск в исходном коде – сочетание клавиш <keybtn>Ctrl</keybtn> + <keybtn>Shift</keybtn> + <keybtn>F</keybtn> активирует миниатюрную поисковую строку, использование которой упрощает нахождение регулярных выражений или однотипных команд.
  • Пара кареток и выделений – теперь можно работать на нескольких строках одновременно. Достаточно зажать Ctrl, выделить нужные поля, и приступать к работе.
  • Переход к строке – после открытия файла во вкладке Sources зажимай <keybtn>Ctrl</keybtn> + <keybtn>G</keybtn>, после чего вводим номер строки (мгновенный переход обеспечен).Poisk-po-stroke-v-instrumentah-razrabotchika-Google-Chrome.png
  • «Прическа» для минимизированных исходников – в режиме разработчика есть кнопка (левый нижний угол), которая автоматически «трансформируют» сокращенные исходники в удобочитаемую форму.
  • Режим устройства – это отличная возможность проверить адаптивность разработанного сайта на разных платформах. Также присутствует эмуляция сенсорного касания к дисплею.

Это далеко не полный перечень возможностей инструмента, но и они дают понять, насколько в Google заморочились ради пользователей.

Подведем итоги

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

Автор оригинала: Swagat Kumar Swain

  • Перевод

Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.09dff7238f5648bdf08e82ff875a8e61.png На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.

<font>1. Выбор элементов DOM</font>

Если вы знакомы с jQuery, не мне вам рассказывать о важности конструкций вроде $(‘.class’) и $(‘id’). Для тех, кто не в курсе, поясню, что они позволяют выбирать элементы DOM, указывая назначенные им классы и идентификаторы. Консоль разработчика обладает похожей функциональностью. Здесь «$», однако, отношения к jQuery не имеет, хотя делает, в сущности, то же самое. Это – псевдоним для функции document.querySelector(). Команды вида $(‘tagName’), $(‘.class’), $(‘#id’) и $(‘.class #id’) возвращают первый элемент DOM, совпадающий с селектором. При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет. Есть здесь и ещё одна конструкция: $$. Её использование выглядит как $$(‘tagName’) или $$(‘.class’). Она позволяет выбрать все элементы DOM, соответствующие селектору и поместить их в массив. Работа с ним ничем не отличается от других массивов. Для того, чтобы выбрать конкретный элемент, можно обратиться к нему по индексу. Например, команда $$(‘.className’) предоставит нам массив всех элементов страницы с указанным при её вызове именем класса. Команды $$(‘.className’)[0] и $$(‘.className’)[1]  дадут доступ, соответственно, к первому и второму элементу полученного массива.ed9035fffa26314a2cbe8f2c8069e23b.png<font>Эксперименты с командами $ и $$</font>

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

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

document.body.contentEditable=true

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

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

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

getEventListeners($(‘selector’))

В результате её выполнения будет выдан массив объектов, содержащий список событий, на которые может реагировать элемент.bc5af9147706da499c122dc364eaf697.png<font>Обработчики событий</font> Для того, чтобы найти обработчик для конкретного события, можно использовать такую конструкцию:

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

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

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

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

<font>4. Мониторинг событий</font>

Если вы хотите понаблюдать за возникновением событий, привязанных к конкретному элементу 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’)) позволяет прекратить мониторинг и логирование событий в консоли.

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

В консоли 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

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

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

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)

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

<font>7. Просмотр кода элемента</font>

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

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

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

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

dir($(‘selector’))

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

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

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

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

<font>10. Очистка консоли и памяти</font>

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

clear()

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

<font>11, 12, 13, 14…</font>

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

sudoku-quest.pngSuccess story

Sudoku Quest installs increase 88% on Google Play using store listing experiments.

Sudoku Quest by HashCube

Store listing experiments

Find the store listing content that drives the most installs.

Create App campaigns to drive valuable app installs from Google Search, Play Store Search and recommendations, YouTube, and the Google Display Network.

Acquisition reports

Get reports on how well your app or game is acquiring users by channel and country with multiple breakdown and comparison options. See which channels drive retained users and buyers over time.

Translation services

Request a translation for your app or game, in-app products, and ad campaigns from a qualified third-party translation service.

Games services

Find out more about your players, where they come from, how they progress through your game, purchase in-app products, and more.

Subscriptions dashboard

See how your subscriptions are performing and make better decisions to grow your business. Understand and analyze total subscribers, revenue, retention, and churn across multiple dimensions.

Get started with the Play Console today

Resources

Play Console app

Get quick access to your app’s statistics, get notifications for important updates, and reply to reviews.

Policy center

Understand Google Play’s developer policies and deliver trusted apps to a global audience.

Help center

Visit the help center to learn how to use the Google Play Console and contact developer support.

Academy for App Success

Learn quickly about getting the most out of the Play Console, understanding Play Policies, and using best practices.

Используемые источники:

  • https://chromeum.ru/faq/developer-mode-in-google-chrome
  • https://habr.com/post/316132/
  • https://developer.android.com/distribute/console

Рейтинг автора
5
Подборку подготовил
Максим Уваров
Наш эксперт
Написано статей
171
Ссылка на основную публикацию
Похожие публикации