Использование Developer Console в Opera

Developer Console в Opera (консоль разработчика) является основанным на веб-технологиях инструментом для проверки и анализа различных аспектов веб-страниц в процессе их создания или отладки. Developer Console отображает различные аспекты DOM, среды JavaScript и CSS, применённого к документу. Этот документ является кратим руководством по Developer Console, и ожидается, что пользователи знакомы с DOM и CSS. Начальное знакомство с JavaScript также приветствуется, но не обязательно.

Для того, чтобы открыть Developer Console необходимо перейти в подменю “Дополнительно” меню “Инструменты”, и выбрать опцию Developer Console. Когда вы сделаете это, Opera откроет экземпляр Developer console для текущего активного документа.

Когда Developer Console открывается, в одной из пяти различных вкладок становятся доступны различные инструменты:

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

Вкладка JavaScript позволяет пользователю просматривать и производить поиск в JavaScript-объектах, открытых на веб-странице.

Вкладка CSS позволяет пользователю просматривать и изменять любые таблицы стилей, применяемые к странице. Кроме того, вкладка позволяет экспортировать изменённые таблицы стилей для дальнейшего использования.

Вкладка HTTP позволяет пользователю просматривать отправленные с сервера заголовки HTTP, просматривать и редактировать cookies, и позволяет вести запись запросов XMLHTTPRequest, отправленные документом.

При открытии инструмента DOM Inspector по-умолчанию отображается свернутое дерево узлов, показывающее только узел #document. Чтобы развернуть дерево узлов - нажмите на маленький знак +, слева от узла. При разворачивании, значок станет - и при нажатии на него узел свёртнется.

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

Когда в консоли разработчика активна вкладка DOM, нажатие в любом месте страницы которую вы отлаживаете выберет соответствующий узел в DOM-дереве во вкладке в консоли разработчика.

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

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

Когда допустимый селектор будет введен, вы можете нажать ENTER для того, чтобы начать поиск. Когда поиск закончится, выведутся только те ветви дерева, что соответствуют поисковому запросу. Например, body > div отобразит только элементы div, которые являются прямыми потомками body.

По-умолчанию, для того чтобы избежать показа слишком большого количества ненужных узлов, в DOM-дереве скрываются узлы, содержащие только пустые параметры. Для того чтобы отображать в дереве узлы с пустыми параметрами, нужно отметить переключатель Show whitespace.

Вкладка DOM представляет возможность удаление любых ветвей DOM-дерева. Когда вы нажимаете на кнопку “Remove” в верхней части консоли DOM, текущий узел и все его дочерние узлы удаляются из документа.

Если нужна копия текущего отредактированного дерева, кнопка Snapshot откроет текстовое представление текущего состояния дерева с подсветкой синтаксиса.

Когда в дереве выбран элемент, нижняя половина DOM Inspection отображает пять дополнительных вкладок:

Атрибуты, которые были установлены в соответствующем элементе.

Свойства JavaScript, которые есть в текущем узле.

CSS-правила из каскада, которые применимы к текущему узлу. При этом и правила, которые перекрыты другими правилами с более высоким приоритетом, показываются тоже, но они отображаются перечеркнутыми.

Список значений стилевых свойств узла.

Обеспечивает графическое представление местоположения и размеров узла на экране, включая поля (margins), отбивки (padding), и границы (borders). Кроме того, эта вкладка предоставляет список других геометрических свойств, которые применяются к элементу.

По-умолчанию, вкладка Javascript, отображает все атрибуты, объекты и функции, прикрепленные к документу, включая и те, что устанавливаются браузером. Чтобы скрыть свойства, установленные браузером, и оставить только те объекты которые были изменены оформлением страницы или её скриптами, вы можете отметить флажок “only custom”.

Функции и объекты, которые имеют содержимое, которое можно прочитать, имеют рядом с собой с знак +, который может быть активизирован для просмотра содержимого объекта, атрибута или метода. Если там должны быть вложеные объекты, то вы получите вложенный список объектов и свойств.

Чтобы снова свернуть объекты во вкладке — нажмите на ‘-’ рядом с рассматриваемым объектом.

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

Во вкладке DOM есть под-вкладка под названием ‘Properties’ . Она работает и действует точно так же как и “большая” вкладка Javascript, но она вместо этого показывает свойства и методы для этого отдельного узла.

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

Информация, доступная для каждой таблицы стилей:

К какому media-типу(ам) применяется таблица стилей.

Где в текущем документе вставлена таблица стилей. Таблицы стилей могут быть или импортированы другими таблицами стилей, могут быть привязаны элементом link, или элементом style.

URL таблицы стилей, если таковые имеются. Когда таблица стилей существует как отдельный документ, будет активизируемая щелчком ссылка на таблицу стилей.

Тип содержимого таблицы стилей. Обычно, он будет читаться как text/css.

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

На каждой таблице стилей есть кнопка, с надписью или Enable или Disable в зависимости от того, отключена ли рассматриваемая таблица стилей, или включена, соответственно. Нажатием на этой кнопку, таблица стилей включается или отключается.

Примите во внимание, что таблицы стилей, которые не применяются к текущему media-типу, нельзя включить, так что включение таблицы стилей handheld для документа, в настоящий момент находящегося в режиме screen — невозможно.

При нажатии кнопки Show rules текстовое содеражимое в виде правил этой таблицы стилей “выезжают” текстовым полем и можно изменять вручную при этом наблюдая за изменением оформления страницы интерактивно.

Если вы изменили таблицу стилей, и хотите экспортировать новые правила для таблицы стилей — нажмите кнопку Export. Примите во внимание, что экспортируемая таблица стилей не всегда будет на 100 % соответствовать тому, что было в исходной таблице стилей:

• Имена шрифта заменяться на их расчитанные значения.
  Например, в системах Linux
  

  font-family: "Bitstream Vera Sans"

  
  может быть заменено на
  

  font-family: "Bitstream Vera Sans [bitstream]"

• Относительные адреса URI будут преобразованы в их абсолютные пути, и будут заключены в кавычки; таким образом
  

  background-image: url (/example.png);

  
  на странице/таблице стилей на http://www.example.com/ экспортируется как
  

   background-image: url ("http://www.example.com/example.png");

• Сокращенные варианты задания свойств расширяться в полную форму. Это означает что следующее правило:
  

  body {
    padding: 1em;
  }

  
  экспортируется так:
  

  body {
    padding-top: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
  }

• Именованные цвета свойствах, для которых нужно указывать цвет, преобразуются в эквивалентные им шестнадцатеричные значения, так, например, red преобразуется в #ff0000.

Сохранение экспортируемой таблицы стилей делается таким же образом, как и сохранение в браузере обычного документа — перейдя к пункту меню Файл > Сохранить как ( Ctrl + S ) в то время, когда экспортируемая таблица стилей во вкладке активна.

Оригинал статьи: Using the Opera Developer Console

См. также: Консоль разработчика в Opera - operafan.