Инструменти за разработване

Смяна на кадрите: Page Down / Page Up

Opera предлага няколко инструмента в помощ на уеб разработчиците. Сред тях най-важен е Opera Dragonfly -- средство за дистанционно дебъгване на уеб страници.

Конзолата за разработчици е средство за анализ и/или интерактивно модифициране на уеб страница по време на разработване или дебъгване. Редакторът на изходен код е по-просто средство за преглеждане на изходния код на уеб страници и правене на бързи промени в него.

Opera Dragonfly

Забележка: За да ползвате Opera Dragonfly, JavaScript трябва да е включен.

Opera Dragonfly е JavaScript приложение за дебъгване на локални и отдалечени уеб страници. Отваря се от менюто Инструменти > Повече > Разработка. Потребителският интерфейс е с три раздела:

„Скрипт“ -- за дебъгване на JavaScript,
„DOM“ -- за дебъгване на HTML и CSS,
„Конзола“ -- за следене на грешките.

Opera Dragonfly все още се разработва. Повече информация ще намерите в следните статии:

Introduction to Opera Dragonfly (Въведение в Opera Dragonfly)
Opera Dragonfly Architecture (Архитектура на Opera Dragonfly)
The Opera Dragonfly blog (Блогът на Opera Dragonfly)

Конзолата за разработчици

Подобно на другите JavaScript приложения на Dev.Opera, конзолата за разработчици може да се хване и пусне върху произволна лента в Opera. Когато отворите конзолата, пред страницата излиза малък прозорец за анализ. Прозорецът има пет раздела: DOM, JS, CSS, HTTP и About (Относно).

Забележка: За да ползвате JavaScript приложенията от Dev.Opera, изскачащите прозорци не бива да са блокирани.

Конзолата за разработчици се отваря в раздела „DOM“, като списъкът с възли в свит в „document“. Разгърнете го от знака „+“. Когато щракнете върху възел, страницата премигва, за да видите мястото на съответния възел в нея.

И обратно -- когато щракнете в страницата, се отваря списък с DOM възлите и се откроява възелът в мястото на щракването. За да намерите съответното място в страницата, задръжте Shift докато с мишката сканирате страницата.

Разделът „DOM“ има следните ключови функции:

От „Search“ (Търсене) можете да претърсвате DOM дървото за произволен клас от възли. Това става със стандартни CSS селектори. Например с p > a търсите отношение родител-дете, а с #menu търсите елемент по идентификатора му.
Със „Snapshot“ (Снимка) правите пълна снимка на DOM.

Конзолата за разработици може да се ползва за интерактивно модифициране на уеб страници. С бутона „Remove“ (Премахване) можете да премахвате възли. Всяко CSS свойство може да се редактира от раздела „CSS“ -- за целта натиснете бутона „Show rules“ за съответния стилов лист. Резултатът от промените се изобразява незабавно и може да се запази за по-късна употреба.

По-подробно изложение за конзолата за разработчици ще намерите в Dev.Opera.

Редакторът на изходен код

Opera разполага с по-просто средство за анлиз и модифициране на уеб страници -- редакторът на изходен код. За да разгледате изходния код на активната страница, изберете Изглед > Изходен код; или натиснете Ctrl+F3; или щракнете с десния бутон върху страницата и изберете „Изходен код“.

Редакторрът на изходен код се отваря в нов подпрозорец. Синтактичното оцветяване на кода улеснява четенето му. Има два начина да редактирате страницата:

Да запишете кеша и веднага да видите резултата -- щракнете върху „Прилагане на промените“; или натиснете Ctrl+R.
Да запишете кода където желаете -- щракнете върху „Запис“; или натиснете Ctrl+S.

Имайте предвид, че ако редактирате локално записано копие, бутонът „Прилагане на промените“ ще запише промените направо в това копие.

Ако предпочитате да отваряте и редактирате кода във външна програма, можете да посочите такава в настройките за програми.