Как открыть консоль в браузере "яндекс" и других браузерах. Консоль разработчика Google Chrome: десять неочевидных полезностей

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В заключение

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

Для обзора возможностей консоли.

Печать в консоли

Ввод текста в консоль доступен из всех модулей и контролируется через 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 ConVar my_variable("my_variable", "42", FCVAR_ARCHIVE, "My favorite number"); void MyFunction_f(void) { Msg("This is my function\n"); } ConCommand my_function("my_function", MyFunction_f, "Shows a message.", FCVAR_CHEAT);

Это обычное использование когда имя объекта и команды одинаковое и переменные используются только в одном исходнике описываются как 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 \n"); return; } Msg("I say: %s\n", engine->Cmd_Argv(1)); } ConCommand my_say("my_say", MySay_f, "say something", 0);

Это пример как построить простой спивок авто завершения. Неполный параметр не используется здесь; он содержит символы введеные так давно (включая само имя команды) :

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, некоторые консольные переменные не должны быть записаны в демо файлы.

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]")

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

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

Здравствуйте, дорогие друзья. Панель (консоль) разработчика в браузере – это незаменимый инструмент для каждого владельца сайта, с помощью которого можно быстро просмотреть html код страницы и css стили. А также узнать об ошибках, возникших при загрузке сайта и проверить сайт на адаптивность.

Именно работу с html кодом, css стилями и адаптивностью в панели разработчика мы сегодня и рассмотрим. Это те инструменты, которые требуются для решения большинства задач.

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

Допустим, вы пришли на мой блог, и вас заинтересовало, какой я шрифт использую или цвет и так далее. В общем, это может быть любой элемент на сайте. И вы захотели сделать также у себя на сайте.

Тогда вы смотрите через панель разработчика в браузере на нужный элемент, где видны html код и css стили к нему.

Другой вариант использования панели, – это когда вы хотите что-то сделать на сайте, но пока не знаете, как это будет выглядеть.

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

Открытие панели вебмастера и знакомство с интерфейсом

Панель разработчика присутствует в каждом современном браузере. Для того чтобы её открыть нужно нажать на клавиатуре клавишу F12.

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

Мне больше нравится панель в браузере Firefox.

Сама панель поделена на две половины и содержит вкладки и инструменты для работы.

В панели можно просматривать HTML код страницы и редактировать его тут же. Для этого выбираете нужный элемент, нажимаете правую кнопку мышки и в меню выбираете «Править как HTML (Edit as HTML)» .

Для работы со стилями нужно перейти к разделу панели CSS, где можно добавлять стили или отключать имеющиеся, убрав чекбокс напротив них. Менять можно всё.

Здесь же можно узнать в каком файле находятся стили, и на какой строке.

Как проанализировать html элемент на сайте и узнать его стили css

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

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

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

И если со стилями всё достаточно просто, то при работе с кодом html нужно понимать его целостность. То есть каждый элемент имеет теги, в которых он находится. Это могут быть абзацы, ссылки, изображения и так далее. Чаще всего это блоки DIV, которые имеют открывающий тег < div> и закрывающий div> . И в панели это всё хорошо видно.

При копировании или редактировании важно понимать, где блок начинается и где он заканчивается. Допустив здесь малейшую ошибку можно нарушить всю вёрстку шаблона.

В видеоуроке на этом моменте я остановлюсь подробно. А если хотите быстро освоить базовые знания по html и css, советую перейти на страницу «Бесплатно» и скачать курсы Евгения Попова.

Как скопировать код html из панели в файлы сайта

Идей для применения панели разработчика может быть много. Поэкспериментировав в панели, полученный результат нужно перенести в файлы сайта. И тут есть некоторая трудность. Дело в том, что в панели отображается html код, а большинство современных сайтов, в том числе и на платформе WordPress, созданы с помощью языка программирования PHP. А это, как небо и земля.

Итак, рассмотрим пример копирования баннера с моего блога и переноса его на другой сайт.

Для этого нужно открываю панель разработчика, исследуя нужный элемент. Определив начало блока ДИВ, нажимаете правую кнопку мушки и выбираете пункт меню «Копировать внешний HTML»

Код скопирован в буфер обмена, и теперь его нужно вставить в то место, где вы хотите видеть этот баннер.

Процесс этот описывать достаточно сложно, поэтому предлагаю посмотреть видеоурок, в котором всё подробно рассказано и показано.

Как перенести стили из панели разработчика в файлы сайта

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

, для меня это удобнее. Так как при работе в Notepad++ есть подсветка кода и нумерация строк. А это сильно помогает, когда нужно непросто скопировать стили, а внести изменения в имеющиеся. По номеру строки эти стили легко найти.

Как проверить адаптивность шаблона в панели разработчика

Для перевода панели в адаптивный режим нужно нажать сочетание клавиш CTRL+SHIFT+M или кнопку в панели разработчика, которая в разных браузерах расположена по-разному.

Заключение

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

Использование панели и навыки работы с кодом и стилями незаменимы при работе с сайтами и партнёрскими программами.

Берите инструмент на вооружение, он вам пригодится ещё много раз.

Если же остались вопросы, буду рад ответить на них в комментариях.

Друзья, желаю вам успехов. До встречи в новых статьях.

С уважением, Максим Зайцев.