Консоль разработчика Google Chrome: десять неочевидных полезностей. Использование консоли разработчика JavaScript
Консоль разработчика позволяет вам добавлять свои приложения под Android в Google.Play, отслеживать их статистику, менять описание и получать финансовые отчёты о продажах платных приложений. Сама консоль доступна по адресу https://play.google.com/apps/publish
Если вы зашли в консоль первый раз, то начать можно с настроек, где задаётся имя разработчика и права доступа других лиц.
Имя разработчика это публичное имя, которое выводится в описании каждого вашего приложения в Google.Play. Хотя его можно легко менять, лучше подойти к выбору имени ответственно, многие пользователи связывают приложения именно с именем разработчика.
Там же обязательно указывается адрес электронной почты и телефон. Они не публикуются и нужны для внутренних целей.
В пункте «Аккаунты и права доступа» вы можете пригласить любое количество других разработчиков и определить их права. Чтобы пользователи могли входить в консоль, у них обязательно должен быть аккаунт Google. В журнале активности можно отслеживать действия всех пользователей.
Финансовые отчёты доступны только для платных приложений. Предварительно необходимо перейти по ссылке «Настроить аккаунт продавца», указать ФИО и параметры банковского счёта или карты, куда будут присылаться заработанные деньги. Начисления происходят в долларах и переводятся при достижении порога в 100$. Поэтому лучше завести долларовую банковскую карту, это делается в любом банке, получить в том же банке реквизиты карты и указать их в своём профиле продавца. Так вы не будете зависеть от курса валют и получите именно ту сумму, которую вам начислил Google.
Для России минимальная цена на приложение установлена 30 рублей, максимальная 6 тысяч рублей. Для Украины цены лежат в диапазоне от 8 до 1650 гривен. Помните также, что Google забирает себе 30% комиссионных с каждой продажи, поэтому от установленной минимальной цены 30 рублей вы в реальности получите только 21 рубль. Это надо учитывать при подсчёте прибыли.
Для обзора возможностей консоли.
Contents
Печать в консоли
Ввод текста в консоль доступен из всех модулей и контролируется через Tier(). Есть 3 дополнительные команды Msg() , DevMsg() и Warning() которые поддерживают вывод форматированной строки, как sprintf() :
DevMsg (char const* pMsg, ...) - только в режиме разработчика Msg(char const* pMsg, ...) - всегда, белый текст Warning(char const *pMsg, ...) - всегда, красный текст
Для обратной совместимости с HL1 сохранены команды Con_Printf() и Con_DPrintf() .
Исполнение команд
Движок использует интерфейс сервера и клиента, чтобы исполнять команды (строки). Сервер использует интерфейс IVEngineServer::ServerCommand() :
Engine->ServerCommand("changelevel de_dust\n");
Клиент использует интерфейс IVEngineClient и выбирает между двумя командами, от этого зависит, будет ли команда исполняться сначала на клиенте или посылаться непосредственно серверу:
Engine->ServerCmd("say hello\n"); // послать команду на сервер
Engine->ClientCmd("say hello\n"); // выполнить команду на клиенте
Добавление новых команд и переменных
Консоль разработчика - это подсистема движка Source, которая дает доступ к различным модулям, это осуществляется через интерфейс ICvar (см. \public\icvar.h). Этот интерфейс регистрирует новые команды и ищет существующие. Этот интрефейс доступен через глобальную переменную CVAR в клиент-серверном коде (cv в коде движка). Консольные команды принадлежат классу ConCommand , а консольные переменные ConVar , которые оба происходят от базового класса ConCommandBase (см. \public\convar.h).
Добавление новых команд и переменных довольно просто и дуступно для использования и для серверных и для клиентских (одинаково для всего движка) модулей. Конструктор этих классов автоматически регистрирует новую команду/переменную в системе консоли. Этот короткий пример кода добавляет новую команду my_function и новую переменную my_variable инициализированную значение 42:
#include
Это обычное использование когда имя объекта и команды одинаковое и переменные используются только в одном исходнике описываются как static.
Использование класса ConVar
Для начала рассмотрим наиболее используемый ConVar конструктор:
ConVar(char const *pName, char const *pDefaultValue, int flags, char const *pHelpString)
Первый аргумент pName это имя переменной (без пробелов), следующий pDefaultValue ,всегда является строковым, даже для ConVar "s с числовыми значениями. Flags пределяет специальные характеристики переменной, все описания флагов начинаются с FCVAR_* , но об этом позже. Очень хорошо использовать pHelpString , чтобы пользователи могли понять для чего эта переменная предназначена. ConVars не огрнаичиваются определненным типом, их значение может быть целым или вещественным или строкой и вы можете его использовать как вам угодно. Так долго как у вас есть ConVar объект сам или указатель на него, вы можете смотреть и изменять его значение напрямую. Все эти примеры правильны и дадут одинаковый результат:
If (my_variable.GetInt() == 42) DoSomething(); if (my_variable.GetFloat() == 42.0f) DoSomething(); if (strcmp(my_variable.GetString(), "42")==0) DoSomething();
Для установки значения ConVar вы должны использовать функцию SetValue() , использующая любые типы данных:
My_variable.SetValue(42); my_variable.SetValue(42.0f); my_variable.SetValue("42");
В любое время вы можете вернуть значение ] назад к значению по-умолчанию использовав функцию Revert() .
Если ConVar создан в разных модулях, то в интерфейсе ICvar функция FindVar() спользуется для получения указателя на объект, если имя переменной установлено. Вот простой пример, который проверяет установлена ли ConVar sv_cheats определенная в модуле движка:
ConVar *pCheats = cvar->FindVar("sv_cheats"); if (pCheats && pCheats->GetInt() == 1) AllowCheating();
Диапозон правильных значений может быть определен для числовых ConVars используя другой конструктор. Тогда ConVar автоматически проверяется консольной системой всякий когда она изменяется вручную. Если введенное число выходит за границы диапозона, оно округляется к следующему правильному значению. Установка диапозона правильных значений от 1 до 100:
ConVar my_variable("my_variable", "42", 0, "helptext", true, 1, true, 100);
Иногда необходимо чтобы вы получали извещение когда пользователь или другая подсистема меняет значение вашей ConVar , поэтому может быть установлена функция обратного вызова:
Static void OnChangeMyVariable (ConVar *var, char const *pOldString) { DevMsg("ConVar %s was changed from %s to %s\n", var->GetName(), pOldString, var->GetString()); } ConVar my_variable("my_variable", "42", 0, "My favorite number", OnChangeMyVariable);
Использование класса ConCommand
Class ConCommand проще чем ConVar и у него только один конструктор:
ConCommand(char const *pName, FnCommandCallback callback, char const *pHelpString = 0, int flags = 0, FnCommandCompletionCallback completionFunc = 0);
Как и у ConVar pName определяет имя команды (без пробелов!). callback эта функция выполняемая когда пользователь исполняет эту команду, pHelpString и флаги имебт те же функции что и в ConVar. ConCommands поддерживает автозавершение для первого параметра, особенно используемый для которые обрабатывают файлы. Например, вы используете команду loadtext lt;textfilegt ; которая предполагает.txt файл для ввода, консоль ищет все доступные.txt файлы и позволяет пользователю выбрать один из списка. Если правильно то completionFunc проходит, она вызывается каждый раз когда консольной системе требуется список доступных аргументов.
Когда callback фунция выполняется, параметры введенные в консоле не подаются как аргументы функции. callback функциям необходимо запрашивать у движка как много аргументов поступило используя фунцию интерфейса движка Cmd_Argc() . Затем можно получить отдельные аргументы используя Cmd_Argv(index) , где index 1 это первый аргумент. Аргументы всегда возвращаются как строки.
Void MySay_f (void)
{
if (engine->Cmd_Argc() < 1)
{
Msg(""Usage: my_say
Это пример как построить простой спивок авто завершения. Неполный параметр не используется здесь; он содержит символы введеные так давно (включая само имя команды) :
Static int MySayAutoComplete (char const *partial, char commands[ COMMAND_COMPLETION_MAXITEвMS ][ COMMAND_COMPLETION_ITEM_LENGTH ]) { strcpy(commands, "hello"); strcpy(commands, "goodbye"); return 2; // number of entries } ConCommand my_say("my_say", MySay_f, "say something", 0, MySayAutoComplete);
Флаги FCVAR_
Консольные команды/переменные используют флаги, которые обладают определенными характеристиками и должны обрабатываться с осторожностью. Эти флаги используются конструктором и могут быть изменены с помощью ConCommandBase::AddFlags() (не используются сильно часто). Невозможно изменить эти флаги подругому как в исходных кодах чтобы избежать читов. Некоторые флаги должны быть установлены вручную, другие устанавливаются автоматически консольной системой:
FCVAR_LAUNCHER, FCVAR_GAMEDLL, FCVAR_CLIENTDLL, FCVAR_MATERIAL_SYSTEM, FCVAR_STUDIORENDER
Эти флаги устанавливаются в процессе регистрации и указывают на модуль, где команда создана (вам не нужно устанавливать их). Следующие флаги должны быть установлены вручную:
| FCVAR_CHEAT |
| Используются при отладке, не удаляются из релиза по причине того, что могут потребоваться разработчикам модов и карт. К сожелению мы неможем позволить нормальным игрокам использовать эти инструменты отладки так как это бы было нечестно по отношению к другим игрокам (читерство). Хорошее правило добавлять FCVAR_CHEAT по началу ко всем новым консольным командам которые вы добавляете, если это не конечная и законная опция для игроков. Опыт показывает что даже наиболее безвредные отладочные команды могут быть использоваться тем или иным образом как чит.
Игровой сервер устанавливая sv_cheats решает разрешены читы или нет. Если клиент подключился к серверу где читы запрешены (должны быть по умолчанию), всем клиентским консольным переменным помеченным как FCVAR_CHEAT возвращено их значение по умолчанию и оно не может быть изменено до тех пор как клиент остается подключен. Консольные команды помеченные FCVAR_CHEAT не могут быть также выполнены. |
| FCVAR_USERINFO |
| Некоторые консольные переменные содержат клиентскую информацию о которой должен знать сервер, такое как имаена пользователей или их четевые настройки. Эти переменные должны быть помечены флагом FCVAR_USERINFO , тогда они будут преданы серверу и обновляться каждый раз когда пользователь изменяет их. Когда пользователь изменяет эти переменные движок оповещает серверный код с помощью ClientSettingsChanged() . Затем сервер может запросить движок отдельные клиентские настройки с помощью GetClientConVarValue() . |
| FCVAR_REPLICATED |
| Игровой сервер и клиент используют общий код, поэтому важно чтобы обе стороны выполнялись по одиноковому пути используя одинаковые данные (например предсказание движения/оружий, правил игы). Если этот код использует консольные переменные, они должны иметь одинаковые значения на обоих сторонах. Флаг FCVAR_REPLICATED гарантирует рассылку значений всем клиентам. Пока подключены, клиенты немогут менять эти значения так как будут использовать серверные значения. |
| FCVAR_ARCHIVE |
| Некоторые консольные переменные содержат пользовательские настройки мы хотим их востанавливать кадый раз когда игра запущена (как имя или network_rate). Если консольная переменная помечена как FCVAR_ARCHIVE , она сохраняется в файл config.cfg когда игра завершается и она будет загружена при следующем запуске. (Также команда host_writeconfig сохранет все FCVAR_ARCHIVE значения в файл). |
| FCVAR_NOTIFY |
| Если консольная переменная помечена как FCVAR_NOTIFY , сервер отправляет сообщение всем клиентам всякий раз когда переменная изменена. Это должно быть использовано для перменных которые меняют правила игры, которые важны для всех игроков (mp_friendlyfire например). |
| FCVAR_PROTECTED |
| Жта консольная перменная содержащая частную информацию (пароль например), мы нехотим чтобы она была видна другим пользователям. Для этого должен быть установлен флаг FCVAR_PROTECTED чтобы пометить эту информацию как конфиденциальную. |
| FCVAR_SPONLY |
| Иногда исполнение команды или изменение переменной может быть правильно только в однопользовательском режиме, тогда пометьте эту команду как FCVAR_SPONLY . |
| FCVAR_PRINTABLEONLY |
| Некоторые важные переменные тяжелые или шировещательные (например правила игры) и важно что они содержат только печатные сиволы (например нет управляющих символов). |
| FCVAR_NEVER_AS_STRING |
| Этот флаг говорит движку никогда невыводить эту переменную как строку так как она содержит последовательность управляющих символов. |
| FCVAR_DEMO |
| Когда на чинаешь записывать демо файл, некоторые консольные перменные должны быть добавлены к записи чтобы быть уверенными что она правильна будет воспроизведена. |
| FCVAR_DONTRECORD |
| Это обратно FCVAR_DEMO, некоторые консольные переменные не должны быть записаны в демо файлы. |
Как с помощью консоли разработчика превратить 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 что-то полезное, экономящее время, достойное стать частью повседневного арсенала веб-программиста.
Если вы явля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 в современных веб-браузерах. Также здесь можно найти информацию о других полезных инструментах разработки.