Реклама

Главная arrow Библиотека
 

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

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

Открываем Developer Console

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

Основные данные по консоли

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

DOM

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

JS

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

CSS

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

HTTP

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

DOM Inspector

Дерево узла

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

Выбор узлов в дереве узлов

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

Выбор узлов по нажатию в документе

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

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

Поиск в дереве узлов

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

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

Отфильтровывание узлов с пустыми параметрами

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

Удаление узлов

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

Открытие копии DOM-дерева

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

Просмотр узлов

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

Attributes

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

Properties

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

CSS

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

Styles

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

Metrics

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

Javascript Inspector

Просмотр только требуемых объектов и атрибутов

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

Разворачивание объектов

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

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

Поиск

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

Просмотр отдельных узлов

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

CSS Inspection

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

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

media

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

ownerNode

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

url

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

type

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

disabled

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

Включение и отключение таблиц стилей

На каждой таблице стилей есть кнопка, с надписью или 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.

 
docs/devcons.txt (424356 views) · Последние изменения: 2007/02/27 06:54