Opera Dragonfly — потужний інструмент прямо з коробки





Opera Dragonfly - потужний інструмент прямо з коробки

Хей народ! Сьогодні я повідаю вам про таку клевой штуці як Opera Dragonfly! Вона поставляється разом з браузером прямо з коробки, але багато про її існування навіть не здогадуються. Що це таке? Це відмінний інструмент для веб-розробника, який допоможе швидко розібрати сторінку на елементи, подивитися стилі кожного div’a, кожної кнопки, і все це буквально в один клік. Навіщо це потрібно? Читайте далі.

Почнемо з того, як викликати Opera Dragonfly. Дуже просто: Йдемо в головне меню — Сторінка — Засоби розробки — Opera Dragonfly.

Opera Dragonfly - потужний інструмент прямо з коробки

Або можна просто натиснути Ctrl + Shift + I. Після цього запуститься наша бабка Opera Dragonfly - потужний інструмент прямо з коробки

Ви можете побачити її в нижній частині вікна.

Давайте познайомимося з усіма можливостями:

Перегляд DOM;

Перегляд і редагування CSS;

Отладчик JavaScript;

Перегляд HTTP запитів;

Налагодження сторінки для мобільних пристроїв;

Віддалене підключення до будь комп’ютерам і пристроям зі встановленим браузером Opera, що підтримує даний інструмент для здійснення налагодження веб-сторінок.

Почнемо по порядку. DOM це абревіатура Document Object Model, що в перекладу означає об’єктна модель документа, ну це і так зрозуміло Opera Dragonfly - потужний інструмент прямо з коробки

Таким чином кожна html сторінка з себе представляє складний документ, зміст якого підпорядковується суворим правилам. А Опера драгонфлай допоможе розібрати будь-яку сторінку на об’єкти. Chrome таке теж вміє, але так як це там реалізовано мені не дуже до душі. Та й можливостей у порівнянні з Opera набагато менше.

Ось як виглядає мій блог в бабку:

Opera Dragonfly - потужний інструмент прямо з коробки

Можна приховувати код того чи іншого об’єкта за допомогою кнопок «+». Всі об’єкти вкладені одна в одну і мають ієрархію, все структуровано і логічно пов’язано. Можете побродити по коду своїх або чужих сайтів.

Але це тільки початок! Тепер ми можемо звернутися до стилів будь-якого об’єкта, наприклад, давайте подивимося на кнопку з мого блогу.

Opera Dragonfly - потужний інструмент прямо з коробки

Бабка дозволяє нам переглядати і змінювати стилі будь-якого об’єкта на сторінці. Зміни вступають в дію відразу ж, але, природно, не зберігаються. Якщо ви плануєте переробляти шаблон свого блогу під себе, то заходите в Opera Dragonfly, і починаєте міняти все зверху і до самого футера, або навпаки, кому як більше подобається Opera Dragonfly - потужний інструмент прямо з коробки

Вибираємо будь-який елемент, знаходимо назви його id або class’a в CSS і правимо як нам потрібно. Переглядаємо то що виходить і не забуваємо потім всі зміни перенести безпосередньо в CSS, адже, як я вже говорив, бабка зміни не зберігає, а тільки показує.

За допомогою цього потужного інструменту можна робити дуже багато корисного. Наприклад, я заходжу на якийсь сайт і бачу гарний елемент інтерфейсу. Хочу собі такий же, але якщо відкрити просто вихідний код сторінки, то там чорт ногу зломить, та й зіставляти всі з CSS вручну не вистачить ні сил ні бажання. Я просто заходжу в драгонфлай і отримую всю потрібну інформацію.

За великим рахунком я користуюся тільки цими можливостями і їх вистачає з головою, але зараз я хочу пройтися далі і подивитися що ж тут є ще.

На вкладці «Скрипти» можна побачити докладну інформацію про всі JavaScript скриптах. Переглянув свої, нічого підозрілого не помітив, до речі, раджу і вам перевірити, адже коли сайти ламають, то ставлять ліві посилання не безпосередньо в код, бо так їх легко спалити, а як-небудь через яваскрипт та інше. У мене я бачу тільки один скрипт від бібліотеки jquery і від лічильників Яндекс метрики і ЛайвІнтернет.

Вкладка «Мережа» виявилася теж дуже і дуже корисною. На ній можна відстежити по-перше, що саме завантажувалося в процесі формування сторінки, а по-друге, за який час. Наприклад, ось як виглядає час завантаження моєю головною:

Opera Dragonfly - потужний інструмент прямо з коробки

Також вона дозволяє відслідковувати http запити. Мені, наприклад, це потрібно коли я зловживаю написанням чергового парсеру (що це?) Opera Dragonfly - потужний інструмент прямо з коробки

Гаразд, досить, решта можете самі подивитися і спробувати, а то я тож цей пост пишу вже третій день = Перший раз так вийшло що стаття написана не за один раз від початку і до кінця.