~~NOTOC~~ ====== Использование 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'' для текущего активного документа. ===== Основные данные по консоли ===== {{ :docs:headers.png}} Когда ''Developer Console'' открывается, в одной из пяти различных вкладок становятся доступны различные инструменты: === DOM === [[#dom_inspector|Вкладка DOM]] позволяет пользователю просматривать, изменять различные свойства документа. === JS === [[#javascript_inspector|Вкладка JavaScript]] позволяет пользователю просматривать и производить поиск в JavaScript-объектах, открытых на веб-странице. === CSS === [[#css_inspection|Вкладка CSS]] позволяет пользователю просматривать и изменять любые таблицы стилей, применяемые к странице. Кроме того, вкладка позволяет экспортировать изменённые таблицы стилей для дальнейшего использования. === HTTP === Вкладка HTTP позволяет пользователю просматривать отправленные с сервера заголовки HTTP, просматривать и редактировать cookies, и позволяет вести запись запросов XMLHTTPRequest, отправленные документом. ===== DOM Inspector ===== {{ :docs:overview_dom.png}} ==== Дерево узла ==== При открытии инструмента ''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 ===== {{:docs:overview_js.png}} ==== Просмотр только требуемых объектов и атрибутов ==== По-умолчанию, вкладка Javascript, отображает все атрибуты, объекты и функции, прикрепленные к документу, включая и те, что устанавливаются браузером. Чтобы скрыть свойства, установленные браузером, и оставить только те объекты которые были изменены оформлением страницы или её скриптами, вы можете отметить флажок ''"only custom"''. ==== Разворачивание объектов ==== Функции и объекты, которые имеют содержимое, которое можно прочитать, имеют рядом с собой с знак ''+'', который может быть активизирован для просмотра содержимого объекта, атрибута или метода. Если там должны быть вложеные объекты, то вы получите вложенный список объектов и свойств. Чтобы снова свернуть объекты во вкладке — нажмите на '' '-' '' рядом с рассматриваемым объектом. ==== Поиск ==== Если вы будете искать определенный объект, то поле поиска позволит вам вести поиск во всех объектах, функциях и свойствах, и отображать только их — передайте фокус на поле поиска и введите выражение. Поиск ведётся по названиям объектов, и только от начала. ==== Просмотр отдельных узлов ==== {{:docs:dom_details_properties.png}} Во вкладке DOM есть под-вкладка под названием '' 'Properties' ''. Она работает и действует точно так же как и "большая" вкладка Javascript, но она вместо этого показывает свойства и методы для этого отдельного узла. ===== CSS Inspection ===== {{ :docs:overview_css.png}} Когда открыта вкладка ''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 '') в то время, когда экспортируемая таблица стилей во вкладке активна. ---- **Оригинал статьи:** [[http://dev.opera.com/tools/?page=2|Using the Opera Developer Console]] См. также: [[http://operafan.net/content/view/222/2/|Консоль разработчика в Opera - operafan]].