Подробности
Эта функция предназначена для «локального» решения проблем с работой скриптов и других элементов при загрузке различных интернет-страниц в Opera. Также это отличная возможность научиться WEB-программированию, так сказать, на живом примере на рабочих местах.
Чтобы было проще понять, разделим дальнейшее повествование на несколько логических блоков.
Виды ошибок
В скриптах и алгоритмах чаще всего встречаются три типа проблем:
- Синтаксический — наличие идентификатора мешает корректной работе кода.
- Забывчивость разработчиков и отсутствие описания переменных в условиях. В этом случае возникает проблема при доступе к реальному сценарию.
- Логично — такой код будет работать, но исполнение ордеров будет, мягко говоря, посредственным.
Открытие
Окно панели разработчика по умолчанию в Opera открывается с помощью сочетания клавиш Ctrl + Shift + I .
Включает в себя несколько блоков:
- Элементы — именно здесь размещается основной код скрипта.
- Консоль. – показывает доступные ошибки и предупреждения.
- Источник — сообщает о «аппетитах» активного окна и общей структуре.
- Сеть — иллюстрирует количество объектов на странице, их тип, размер и другие параметры.
Общие советы и рекомендации, которые не вписываются ни в одну категорию.
Как найти инструменты разработки
Если инструменты разработчика для вас полная загадка, найти их может быть непросто!
Как и в главном меню, вы можете легко получить доступ к инструментам разработчика, нажав F12 в Windows или Cmd ⌘, Option ⌥ и I в Mac, или щелкнув правой кнопкой мыши страницу и выбрав «Проверить элемент»
В Safari необходимо сначала включить панель инструментов разработчика, установив флажок в меню «Настройки» > «Дополнения» > «Показать меню разработчика в строке меню.
В Opera вы должны включить панель инструментов разработчика через Дополнительные инструменты > Включить инструменты разработчика.
Поскольку Firebug является расширением Firefox, вам необходимо установить надстройку с http://getfirebug.com/.
Используйте самую последнюю версию инструментов разработчика
Инструменты разработчика постоянно совершенствуются, и зачастую экспериментальные версии браузеров могут предложить вам что-то дополнительное.
Chrome Canary — это экспериментальная версия Chrome. Canary может работать параллельно с Chrome, поэтому вы можете одновременно проверять наличие обновлений в текущем выпуске.
Вы можете еще больше улучшить работу с инструментами разработчика Chrome, перейдя на chrome://flags и включив «Включить экспериментальные инструменты разработчика». Не забудьте нажать кнопку «Перезапустить» внизу страницы, чтобы применить изменения.
Firefox Aurora дает вам возможность испытать новейшие функции Firefox. К сожалению, Aurora нельзя открыть одновременно с Firefox.
Webkit Nightly — это ночная версия Safari. Поскольку это ночная версия, она менее стабильна, чем другие браузеры. Вот только с инструментами разработчика в Safari, с которыми в текущем релизе полный бардак, ночная сборка избавляет от большинства этих проблем, позволяя работать с ними более-менее нормально. Webkit Nightly можно запустить вместе с Safari, чтобы проверить наличие проблем с отображением.
Теперь новые версии браузеров выходят с периодичностью всего в 12 недель, и при этом браузеры автоматически обновляются, изменения происходят постепенно и вряд ли будут радикальными; и это не займет много времени (> 12 недель), чтобы пользователи могли использовать эти версии. Важно как можно больше протестировать как текущую версию, так и версию для разработчиков.
Открепить и переместить панель инструментов разработчика
Иногда мы не хотим закреплять наши инструменты внизу экрана, где они находятся по умолчанию. Большинство инструментов разработчика предлагают другой вариант вложения.
В инструментах разработчика Chrome значок в правом нижнем углу позволяет изменить настройки вывода для ваших инструментов разработчика. Быстрое нажатие переключает между креплением снизу и справа. Нажав и удерживая этот значок, вы можете выбрать вариант вложения — включая вложения в отдельном окне. Вы также можете щелкнуть и перетащить пустую область на панели вкладок, чтобы переместить инструменты разработчика в Chrome.
В инструментах разработчика Firefox и Safari рядом с кнопкой закрытия можно найти еще один вариант их закрепления — открепить их в отдельном окне.
Если вы закрепите Инструменты разработчика Safari в новом окне, у вас будет возможность повторно закрепить их внизу и справа от окна браузера; однако в текущей версии инструменты разработчика необходимо разархивировать, прежде чем их можно будет переместить.
Чтобы изменить закрепленное местоположение, щелкните стрелку вниз рядом со значком Firebug на главной панели инструментов с надписью «Местоположение пользовательского интерфейса Firebug». У вас будет несколько вариантов: сверху/снизу/слева/справа/в отдельном окне. Firebug также имеет значки в правом верхнем углу, чтобы быстро изменить или свернуть и закрыть его.
Firefox DevTools имеет значки дока в правом верхнем углу панели инструментов для переключения между нижней и правой границами, а также для открытия в отдельном окне.
Читайте также: Internet Explorer portable: где скачать портативную версию, как распаковать
Прикрепить Инструменты разработчика для разработки адаптивных страниц
При отладке мобильных сайтов щелчок правой кнопкой мыши позволяет правильно использовать доступное пространство и дает возможность быстро изменить область, общую для инструментов разработчика и области просмотра браузера, для тестирования различной ширины.
Значок в левом нижнем углу инструментов разработчика Chrome и Opera позволяет изменить настройки инструментов разработчика. Один щелчок переключает между нижним и правым вложениями.
В настройках инструментов разработчика Chrome в разделе «Общие» вы также можете изменить внешний вид инструментов, разделив панели по вертикали.
В Opera также есть возможность разделить панели по вертикали в настройках в разделе «Общие».
В Firefox Aurora вы также можете прикрепить панель к правому краю и воспользоваться этой техникой.
Firebug был первым, кто предложил эту штуку.
Изучите сочетания клавиш
изучение сочетаний клавиш поможет вам легче ориентироваться в инструментах разработчика.
Горячие клавиши для Chrome перечислены в меню настроек, которое можно найти, щелкнув значок шестеренки в правом нижнем углу страницы. Нажатие «Cmd» ⌘, Shift и / в Chrome также вызывает список сочетаний клавиш — еще один быстрый способ добраться до настроек.
Горячие клавиши для Internet Explorer описаны в онлайн-документации.
Сочетания клавиш для инструментов разработчика Firefox перечислены на MDN.
Сочетания клавиш Opera также можно найти в меню настроек, щелкнув значок шестеренки в правой части панели док-станции.
