Консоль используется разработчиками для отладки сайтов — с ее помощью можно проверить отображение страницы у пользователя и проверить работу всех предусмотренных функций. В браузере Opera GX такой инструмент тоже есть, и открыть его можно несколькими способами. А для загрузки собственных расширений необходимо включить режим разработчика. Вот обо всем этом я сегодня и расскажу.
Открываем консоль
Открыть инструмент разработчика можно тремя способами. Первый – нажать на комбинацию клавиш Ctrl + Shift + I. Второй – нажать на меню управления и настройки (иконка в левом верхнем углу с изображением логотипа браузера), перейти в раздел «Разработка» и открыть нужную утилиту.
Открываю в меню раздел «Разработка» и нахожу в списке нужный мне инструмент
Третий способ – открыть любой сайт, кликнуть по любому месту на странице правой кнопкой мыши и выбрать элемент «Посмотреть код страницы». Можно, конечно, воспользоваться комбинацией клавиш Ctrl + Shift + C. В результате откроется вкладка «Elements», мне же нужна «Console». Жму на нее, чтобы открыть инструмент.
Можно также перейти к инструментам разработчика через контекстное меню страницы
Как включить режим разработчика для загрузки расширений
Для загрузки и скачивания собственных расширений сначала необходимо включить режим разработчика. Для этого захожу в раздел «Расширения» — можно через то же меню управления или нажатием на горячие клавиши Ctrl + Shift + E.
Для работы с расширениями необходимо перейти сначала в соответствующий раздел
В правом верхнем углу будет тумблер «Режим разработчика». Переключаю его для активации, после чего можно приступать к работе.
Переключаю в правом верхнем углу тумблер, и можно приступать к делу
Заключение
Для перехода к консоли в браузере Opera GX достаточно лишь сделать пару кликов мышью или воспользоваться горячими клавишами. В результате можно пользоваться всеми необходимыми функциями и инструментами разработчика, испытывать свои идеи на практике и постепенно воплощать их в жизнь.
Post Views: 8 337
Перейти к содержанию
Режим разработчика в Опере
На чтение 2 мин Просмотров 1.5к. Обновлено 07.06.2021
Если ваш день состоит из длительной работы за компьютером то, скорее всего вы замечали, что в браузере иногда возникают ошибки. Например: синтаксические, логические, проблемы при загрузке страниц, в запуске скриптов. Для их решения существуют специальные команды. В этой статье мы рассмотрим, как открыть консоль в Опере и устранить неполадки.
Содержание
- Вход с помощью клавиш
- Меню браузера
- Через контекстное меню
- В свойствах ярлыка
- Заключение
Вход с помощью клавиш
Горячие клавиши один из самых удобных способов. Применяя данный метод можно быстро открыть всю панель разработчика Опера, или её отдельную вкладку.
Достаточно ввести:
- Ctrl + Shift + I
- Ctrl + Shift + J
Для удобства есть возможность изменить комбинации.
- Нужно зайти в «Настройки».
- В поиске ввести «Сочетания клавиш».
- Нажать на «Настроить сочетание клавиш».
- Появится список «Инструмент» или «Консоль разработчика». Установите, что для вас комфортнее.
Меню браузера
Открываете меню, внизу списка наведите мышкой на «Разработка», рядом откроется «Инструменты разработчика». Откроется консоль, с которой можно продолжать работать.
Через контекстное меню
Правым кликом мыши на любом пустом месте откройте меню. В появившемся окне нажмите «Посмотреть код элемента». Зайдите в раздел Console.
В свойствах ярлыка
При работе, чтобы каждый раз не открывать панель, можно настроить индивидуальные параметры.
- Правой кнопкой мыши кликните на ярлык и нажмите «Свойства».
- Выбираете вкладку «Ярлык», затем «Объект».
- В поле «Объект» поставьте пробел после символов и введите
-auto-open-devtools-for-tabs
. Чтобы сохранить нажмите Ok. - Проверить данные, нужно запустив заново браузер.
Важно! После настройки во всех и ранее открытых вкладках, будут открываться инструменты.
Заключение
При помощи таких несложных действий, пользователь может увидеть и исправить недочеты. Это облегчит работу, и сохранит время.
Пользователи браузера Opera не понаслышке знают о том, что путешествие по всемирной паутине может застопориться благодаря неожиданному появлению консоли ошибок. Однако проблема вполне разрешима – консоль можно отключить.
Инструкция
Стоит понимать, что консоль ошибок в Opera находится не просто так. Ее появление является реакцией программы на те или иные ошибки. Одними из причин появления консоли ошибок могут быть неправильная настройка почтового клиента, встроенного в Opera (Opera Mail, M2) или некорректного обновления версии. Поэтому имеет смысл не убирать консоль (таким образом вы удаляете следствие проблемы, а не ее причину), а ознакомиться с ее содержимым и на основе прочитанного принять соответствующие меры.
Запустите браузер Opera и откройте меню настроек JavaScript. Сделать это можно несколькими способами и каждый из них будет описан в следующих трех шагах инструкции. Последний шаг – общий для всех. Если у вас возникают проблемы с большим количеством сайтов и проще нивелировать появление консоли ошибок сразу для всех, используйте способы, описанные в третьем и четвертом шагах инструкции. Если проблемы только с одним или несколькими сайтами, и проще блокировать консоль ошибок для каждого из них по отдельности, используйте пятый шаг инструкции.
Нажмите на кнопку с изображением значка Opera, которая находится в левом верхнем углу программы. Если у вас отображена главная панель, то кнопка со значком Opera будет находиться слева внизу от этой панели. Когда появится выпадающее меню, выберите в нем пункт «Настройки» > «Общие настройки» > вкладку «Расширенные» > секцию «Содержимое» > кнопку «Настроить JavaScript» в правой части окна.
Кликните горячие клавиши Ctrl+F12, выберите вкладку «Содержимое», секцию «Расширенные», а затем нажмите на кнопку «Настроить JavaScript».
Если у вас возникают проблемы только с одним сайтом, откройте его, нажмите функциональную клавишу F12, в появившемся окне выберите самый нижний пункт – «Настройки для сайта», а далее – откройте вкладку «Скрипты».
Уберите галочку возле пункта «Открывать консоль при ошибке» (он находится в нижней части окна) и нажмите ОК. Закройте браузер, а затем откройте вновь.
Войти на сайт
или
Забыли пароль?
Еще не зарегистрированы?
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
DevTools (инструменты разработчика) доступны во всех современных браузерах и полезны по нескольким причинам. Например, их можно использовать для отладки кода и тестирования изменений в HTML, CSS и JavaScript в режиме реального времени. В этой статье расскажем, как открывать DevTools в разных браузерах и на примере разберем, какие возможности они предоставляют.
Вкладка Console в DevTools позволяет работать с JavaScript при просмотре любой страницы. Это может быть удобно в разных ситуациях:
- Просмотр ошибок. Например, позволяет увидеть, что какие-то ресурсы (CSS, изображения и так далее) на странице не загрузились.
- Обращение к HTML-элементам. Так можно сразу проверить правильность написания пути до элемента в JavaScript.
- Отладка кода на JavaScript. Речь идет о тестировании и устранении ошибок непосредственно в браузере. Для этого вкладка дает множество инструментов.
Сначала разберемся, как открыть консоль в разных браузерах:
Google Chrome
- Нажмите значок с тремя точками в правом верхнем углу окна браузера.
- В появившемся меню наведите курсор мыши на «Дополнительные инструменты» и выберите «Инструменты разработчика» в расширенном меню.
- После этого в правой части экрана откроется раздел с DevTools.
Еще один способ — использовать горячие клавиши. В Chrome это Ctrl+Shift+I (или Command+option+I на Mac).
Microsoft Edge
-
Нажмите на значок «Настройки и другое» в правом верхнем углу экрана.
-
Затем кликните на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты разработчика».
-
После этого в правой части экрана откроется раздел с DevTools.
Как и в Chrome, открыть DevTools в Edge можно горячими клавишами Ctrl+Shift+ I (или Command+option+I на Mac).
Mozilla
- Выберите меню-гамбургер в верхнем углу экрана.
- Затем нажмите на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты веб-разработчика».
- После этого в нижней части экрана откроется раздел с DevTools.
Горячие клавиши в Mozilla — Ctrl+Shift+I (или Command+option+I на Mac).
Opera
- Щелкните на значок Opera в верхнем левом углу окна браузера.
- Наведите курсор мыши на «Разработчик» в меню и выберите «Инструменты разработчика».
- После этого в правой части экрана откроется раздел с DevTools.
В Opera DevTools можно открыть комбинацией клавиш Ctrl+Shift+I(или Command+option+I на Mac).
Читайте также:
Как сохранять фокус на протяжении всего обучения: советы от Хекслета
Safari
- Выберите меню Safari в верхнем левом углу экрана.
- Затем нажмите «Настройки» и перейдите в меню «Разработка» в верхней части экрана.
- Выберите «Показать веб-инспектор» в раскрывающемся меню .
- После этого откроется новое окно с инструментами разработчика.
Горячие клавиши для Safari — Command + option+ I.
Яндекс.Браузер
- Нажмите на меню-гамбургер в верхнем правом углу окна браузера.
- Затем кликните по пункту «Дополнительно» и выберите меню «Дополнительные инструменты».
- После этого переходим к пункту «Инструменты разработчика» в следующем меню.
Для запуска консоли также можно нажать Ctrl + Shift + I.
Как использовать консоль
Обычно для быстрого выполнения кода и оценки результата его работы используются сторонние сайты. Другой вариант — NodeJS, которая дает доступ к REPL (Read Eval Print Loop) — интерактивному интерпретатору кода. Вкладка Console, по сути, выполняет те же функции и обладает множеством других возможностей.
Рассмотрим, как работает консоль, на примере Chrome DevTools. В ней можно проверять как простые инструкции вида 2 + 2
, так и большие функции.
Откроем Chrome DevTools, перейдем во вкладку Console, и вставим выражение 2 + 2
DevTools сразу выдаст ответ 4
. Таким образом можно не только складывать числа, а использовать любые методы из стандартной библиотеки JavaScript, например:
'hexlet'.toUpperCase() // => HEXLET
[1, 2, 3, 4].map((number) => number ** 2) // => [1, 4, 9, 16]
Помимо простых выражений, которые никак не связаны с сайтом, можно использовать и DOM API для доступа к элементам страницы. Код, указанный ниже, посчитает и вернет количество ссылок на главной странице ru.hexlet.io. Вы также можете самостоятельно перейти на любую страницу и «посчитать» количество ссылок или любых других элементов на ней:
document.querySelectorAll('a').length // => 73
Кроме того, DevTools позволяет создавать переменные. Пока страница существует, созданные переменные будут существовать и вы можете взаимодействовать с ними в будущем:
const linksCount = document.querySelectorAll('a').length // => undefined
2 + 2 // => 4
linksCount // => 73
linksCount * 2 // => 146
Однострочные выражения и инструкции — это довольно просто. Что, если хочется создать функцию, а нажатие на Enter сразу выполняет код? Для многострочных выражений используется перенос с помощью Shift + Enter. Эта опция позволяет писать и использовать красивые функции, которые, как и переменные, могут быть использованы в текущей сессии:
const getElementCount = (tag) => {
const elementCount = document.querySelectorAll(tag).length;
return `Найдено ${elementCount} элементов ${tag}`
}
getElementCount('div') // => 'Найдено 105 элементов div'
Это лишь часть возможностей, которые дает использование вкладки Console в различных браузерах. Но этого достаточно, чтобы сделать свою работу эффективнее.
Никогда не останавливайтесь:
В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях
Режим разработчика в программах предназначен для отладки, отслеживания причин возникновения тех или иных ошибок, поиска взаимосвязей и подобных мероприятиях. Он присутствует в большинстве современных веб-обозревателей, но изначально скрыт от пользователей. В данной статье пойдет речь о том, как открыть консоль в Опере. Будут рассмотрены и другие нюансы функции.
Подробности
Данная функция предназначена для «местного» решения проблем с работой скриптов и прочих элементов при загрузке разных интернет-страниц в Opera. Также это отличная возможность изучить WEB-программирование, так сказать, на живом примере работающих сайтов.
Для удобства восприятия разобьем дальнейшее повествование на несколько логических блоков.
Виды ошибок
В скриптах и алгоритмах чаще всего встречается три типа неполадок:
- Синтаксические – наличие идентификатора препятствует штатной работе кода.
- Забывчивость разработчиков и отсутствие описания переменных в условиях. В таком случае возникает проблема при обращении к актуальному скрипту.
- Логические – такой код будет работать, но выполнение приказов будет, мягко говоря, посредственным.
Открытие
Стандартное окно панели разработчика в Опере открывается с помощью сочетания клавиш Ctrl + Shift + I .Оно включает в себя несколько блоков:
- Elements – здесь находится основной код скрипта.
- Console. – показывает имеющиеся ошибки и предупреждения.
- Source – информирует об «аппетитах» активного окна и общую структуру.
- Networks – иллюстрирует количество объектов на странице, их тип, размер и прочие параметры.
Общие советы и подсказки, которые не входят ни в одну категорию.
Как найти инструменты разработки
Если инструменты разработчика — полная загадка для вас, вам могло оказаться непросто найти их!
Как и через главное меню, вы легко можете открыть инструменты разработчика, либо нажав «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. Поскольку это ночная версия, она менее стабильна, чем другие браузеры. Но вот как раз с инструментами разработчиков в Сафари, с которыми в текущем релизе полный беспорядок, ночная сборка устраняет большую часть этих проблем, позволяя более-менее нормально с ними работать. Webkit Nightly можно запустить вместе с Safari, чтобы проверить проблемы отображения.
Теперь новые версии браузеров выходят с периодичностью всего 12 недель, и при этом браузеры автоматически обновляются, изменения постепенны, и вряд ли окажутся радикальными; и ждать останется недолго (> 12 недель), прежде чем ваши пользователи используют эти версии. Важно по мере возможности тестировать как на текущей версии, так и на версии для разработчика.
Открепить и переместить панель инструментов разработчика
Порой мы не хотим прикреплять наши инструменты к нижней части экрана, где они расположены по умолчанию. Большинство инструментов разработчика предлагают другой вариант прикрепления.
В инструментах разработчика в Chrome, нижняя правая иконка позволяет вам изменить настройки прикрепления ваших инструментов разработчика. Быстрое нажатие переключает между прикреплением внизу и справа. Нажатие и удержание этой иконки позволит выбрать вариант прикрепления – в том числе прикрепление в отдельном окне. Можно также нажать и перетащить пустую область панели вкладок, чтобы переместить инструменты разработчика в Chrome.
В инструментах разработчика Firefox и Safari рядом с кнопкой закрытия можно найти еще один вариант их прикрепления — открепить в отдельное окно.
Если вы прикрепите инструменты разработчика Safari в новом окне, у вас появится возможность заново прикрепить их внизу и справа окна браузера; но в нынешней версии инструменты разработчика должны быть откреплены, прежде чем их можно будет переместить.
Чтобы изменить прикреплённую позицию, нажмите нижнюю стрелку рядом с иконкой Firebug на главной панели инструментов, подписанную «Firebug UI Location». У вас появится нескольких вариантов: вверху/снизу/слева/справа/в отдельном окне. У Firebug также есть иконки в правом верхнем углу, чтобы быстро изменить, или свернуть и закрыть его.
В Firefox DevTools есть иконки прикрепления в верхнем правом углу панели инструментов для переключения между нижнем и правом краями, а также для открытия в отдельном окне.
Прикрепить Инструменты разработчика для разработки адаптивных страниц
При отладке мобильных сайтов, прикрепление к правому краю позволяет вам правильно использовать доступное пространство и даёт возможность быстро изменять область, разделённую между Инструментами разработчика и областью просмотра браузера для тестирования разных ширин.
Нижняя левая иконка в Инструментах разработчика Chrome и Opera позволяет изменять настройки прикрепления Инструментов разработчика. Одиночный клик переключает между нижним и правым прикреплениями.
В настройках Инструмента разработчика в Chrome в разделе «Общие», вы можете также изменить внешний вид инструментов, разделив панели по вертикали.
В Opera также есть возможность разделить панели по вертикали в настройках в разделе «Общие».
В Firefox Aurora тоже можно прикрепить панель к правому краю и воспользоваться преимуществом этого приема.
Firebug был первым, кто предложил эту штуку.
Изучите сочетания клавиш
Изучение сочетаний клавиш поможет вам легче ориентироваться в Инструментах разработчика.
Сочетание клавиш Chrome перечислены в меню настроек, которые можно найти, нажав иконку шестеренки в нижнем правом углу страницы. При нажатии «Cmd» ⌘, Shift и / в Chrome тоже появится список сочетаний клавиш — это еще один быстрый способ перейти к настройкам.
Сочетания клавиш Internet Explorer’а описаны в онлайн-документации.
Клавиатурные сокращения инструментов разработчика Firefox перечислены на MDN.
Сочетания клавиш Opera также можно найти в меню настроек, если нажать иконку с шестерёнкой на правой стороне панели закрепления.
Консоль
Освойте продвинутые приемы работы с консолью, чтобы узнать больше о вашем сайте или приложении.
Log, Info, Debug, Warn, Error
console.log() крайне полезный инструмент для отладки вывода без необходимости использовать alert-ы; но есть и другие методы, которые можно использовать для информации вывода, чтобы облегчить просмотр в консоли.
console.log() работает по принципу printf. Поэтому вы можете делать такие вещи, как: console.log(«%s is %d years old.», «Bob», 42) .
Можно использовать console.info() для вывода информации сообщений; console.debug() для вывода сообщений отладки; console.warn() для вывода предупреждающих сообщений и console.error() для вывода сообщений об ошибках.
Также у вас есть возможность воспользоваться паттерном «%c», чтобы использовать второй аргумент в качестве параметра форматирования стиля. Например: console.log(«%cЭто зелёный текст на жёлтом фоне.», «color:green; background-color:yellow»); .
Firebug отобразит разные иконки для этих вариантов, а также окно сообщений в цветных фонах.
Firefox отобразит маленькую серую иконку рядом с информацией, предупреждением и сообщением об ошибке, что будет означать, что они могут потребовать дополнительного внимания. Firefox никак не обозначит дополнительно сообщение отладки, т.к. согласно MDN оно устарело в Firefox и вместо него рекомендуется console.log() .
Chrome и Safari (ночная сборка) не отобразит иконку для информации, но зато отобразит синюю иконку для отладки, жёлтую иконку для предупреждения и красную для ошибки.
Можно вывести несколько значений для любых методов отладки путём разделения ваших значений запятыми, что может быть удобным для включения объектов и массивов на той же строке. Например: console.log(‘Цари: ‘, цари); .
Вывод данных в виде таблицы
console.table() используется для вывода данных из массива массивов или списка объектов в формате сортируемой таблицы.
Например, console.table([[10, true, «blue»],[5, false]]) выведет следующее:
Если число элементов в каждом объекте неодинаково, то таблица отобразит undefined в ячейках, для которых нет данных.
Чтобы дать пользовательские названия столбцам таблицы, названия свойств должны быть указаны элементам в объекте. Кроме того, пользовательские значения для столбца ( index ) можно установить путём именования каждого набора свойств.
Существует необязательный второй аргумент, который позволяет явно указать, какие выводить колонки. console.table(<«London»:,»New York»:>,[«population», «country»]) выведет следующее.
Подтверждение
console.assert() используется для проверки, являются ли выражения true или false.
Он принимает два параметра: выражение и сообщение для отображения. Сообщение будет показано в консоли, если только выражение – FALSE.
Например, console.assert(!true, ‘Это не true’) ; выведет «Это не true» в консоле. А console.assert(true, ‘Это не true’) ; не выведет ничего.
Использование таймера консоли
В консоли можно запустить таймер при помощи console.time(метка) . Строка «метка» нужна для того, чтобы мы могли обратиться к таймеру, если захотим остановить его. Таймер останавливается путём вызова console.timeEnd(label) , который выведет в консоле время в миллисекундах, показывающее время с того момента, как таймер (определённый меткой ) был запущен.
Использование метки времени для отметки шкалы времени
Метка времени создаётся путём использования console.timeStamp(label) . Метка времени может быть использована вместе с расчётом времени трафика HTTP, чтобы определить, когда был выполнен определённый кусок кода.
Также есть возможность добавления событий в шкалу времени Chrome, хотя это выглядит, не совсем как фото в документации, т.к. оборачивается в «Function Call (InjectedScript:1)», но они отображаются в виде жёлтых маркеров в шкале времени в верхней части нижнего фрейма «записи», который покажет сообщение во всплывающей подсказке, если навести на них курсор.
Сохранение состояния консоли
Иногда вам необходимо сохранить информацию в консоли между загрузками страницы. Иногда это необходимо для справки или, возможно, чтобы отследить любые логи, которые происходят по клику или когда вы покидаете документ.
В Chrome правый клик в консоли открывает меню с флажком «Сохранить записи после перехода». При этом выборе содержимое вашей консоли будет сохранено.
Firefox сохранит содержимое консоли по умолчанию. Вы можете очистить сообщение консоли, нажав кнопку «очистить» а правом верхнем углу или открытием и закрытием инструментов.
В Firebug есть специальная кнопка для сохранения содержания консоли прямо над консолью.
Opera сохранит содержание консоли по умолчанию. Вы можете очистить сообщение консоли путём правого клика мыши и выбора «Очистить консоль» или открытием и закрытием инструментов.
Перезапустить команду
Если вы ввели команду в консоли JavaScript и желаете перезапустить её, то просто нажмите стрелку вверх, чтобы просмотреть список предыдущих команд, которые вы вызвали из консоли.
Изменение фокуса фрейма
Запуск команд JavaScript из командной строки консоли — невероятно полезная вещь, но если вам приходится иметь дело с ифреймом, то это может оказаться проблемой, если вы не знаете, как ссылаться на ваш фрейм.
В Firebug вы можете использовать следующую команду, чтобы перевести фокус на рассматриваемый фрейм и выполнить команды для него.
Chrome позволяет менять фрейм из выпадающего списка, который находится внизу окна консоли.
У Opera есть выпадающий список для изменения фрейма, который доступен из «Консоли» и вкладки «Документы». Выпадающий список появится на вкладке «Консоль», только если есть фреймы для выбора.
Также есть возможность получить список любых фреймов на вашей странице, используя document.getElementsByTagName(«iframe») ; в консоли.
Открыть консоль из любой вкдадки
В Chrome, несмотря на то, что у консоли есть собственная вкладка, также есть возможность открыть консоль из любой вкладки, нажав клавишу «escape», поэтому у вас нет необходимости постоянно переключать вкладки.
В Safari консоль располагается внизу инструментов разработчика. Клавиша «escape» используется для переключения видимости сообщения консоли. Выполнение команды в командной строке консоли также откроет лог консоли.
В Firefox можно быстро перейти к консоли при помощи нажатия Ctrl/Shift и K в Windows или Cmd ⌘/Option ⌥ и K на Mac.
Обращение к текущему и предыдущему элементу
Если у вас есть элемент, выбранный во вкладке «Элементы», то вы можете использовать ссылку « $0 » для обращения к нему в вашем коде. Например, чтобы увидеть содержимое элементов, вы должны ввести $0.innerHTML .
В Firebug и Opera можно выбрать предыдущий элемент, который вы выделили, используя $1 .
В Chrome и Safari можно выбрать предыдущие элементы, которые вы выделили, используя $1 — $4 .
В Firebug есть возможность выделить предыдущие элементы, которые вы выбрали, используя $n(2) — $n(5) .
Последнее вычисленное выражение
Если вам необходим результат предыдущего выражения для следующего вычисления в консоли, то вы можете использовать переменную $_ , которая автоматически принимает значение результата последнего выражения.
Firebug добавил поддержку этой возможности в версию 1.12
Исследование
Исследовать и изменить HTML и CSS на странице.
Навигация по DOM при помощи «хлебных крошек»
Во время исследования узлов в DOM-дереве, список «хлебных крошек», представляющий путь узлов DOM, отображается в инструментах разработчика.
В Chrome и Opera этот список отображается внизу DOM-инспектора.
В Firebug, Firefox и Safari список отображается вверху DOM-инспектора.
Можно перемещаться по «хлебных крошкам» либо сразу же, нажав на один из элементов, либо используя клавиши со стрелкой. Нажатие клавиши «стрелка влево» переместит фокус к родительскому элементу, а клавиша с правой стрелкой к первому дочернему элементу. Можно перемещаться к следующему или предыдущему дочернему элементу путём нажатия клавиш с верхней и нижней стрелкой. Если дочерних элементов больше нет, верхняя и нижняя стрелки переместят фокус назад на один уровень вверх в DOM-дереве.
В Firefox можно нажать правой кнопкой мыши на «хлебные крошки» и увидеть список всех сестринских узлов, который позволит вам быстро переместиться к нужному.
В Safari есть возможность нажать левой кнопкой мыши на «хлебные крошки», чтобы увидеть список всех сестринских узлов.
Поиск для узлов DOM
В Firefox есть возможность найти конкретный DOM-узел в любом месте документа через панель «Инспектор». Эта функция доступна в правой части DOM-навигации «хлебных крошек» и скрыта в маленьком поле поиска.
При фокусе поле поиска увеличивается.
При вводе селектора, которому соответствует какой-либо элемент, этот элемент автоматически подсветится в DOM-дереве.
В Chrome и Opera можно нажать Ctrl-F, чтобы открыть диалог поиска. CSS-селекторы работают ожидаемым образом.
Исследование шрифтов
Firefox поставляется со встроенным инспектором шрифтов, позволяющим видеть шрифты, которые используются в элементе, исследуемом вами в настоящий момент.
Вы можете изменить текст «Abc» (по умолчанию), чтобы попробовать шрифт с каким угодно текстом. Внизу списка шрифтов есть кнопка для отображения всех шрифтов на странице, что позволяет легко увидеть, какие именно шрифты используются на странице.
Firebug предоставляет всплывающую подсказку для любого объявления шрифта, который встречается в CSS.
Просмотр вашего сайта в качестве адаптивного
В эпоху адаптивного дизайна важно видеть, как ваш сайт будет выглядеть на устройствах любого размера. Хотя мы можем изменять размеры окна браузера, существуют также и дополнительные инструменты, доступные в инструментах разработчика.
В панели «Настройки» инструментов разработчика Chrome (появляющаяся по нажатию иконки с шестеренкой в нижнем правом углу инструментов) под «Overrides» вы найдёте «Метрики устройства», позволяющие указывать ширину и высоту вместе с значением масштаба шрифта. Также можно прикрепить инструменты разработчика к правому краю страницы и изменять их размер на ту величину, на которой вы хотите тестировать.
В инструментах разработчика Opera можно изменять ширину и высоту, используя меню «Метрики устройства» под вкладкой «Overrides» в «Настройки»
Инструменты разработчика Firefox включают инструмент проверки вашего сайта для любого размера. Инструмент «Режим адаптивного дизайна» находится справа вверху «шапки» инструментов разработчика. Этот инструмент предоставляет множество предустановленных размеров и опцию для удовлетворения ваших потребностей. В Firefox также есть опция поворота ориентации устройств, так что вы можете тестировать как альбомный, так и портретный режим.
Просмотр вашего сайта в 3D
Инструменты разработчика Firefox позволяют просматривать сайт в 3D, исследуя, например, какие элементы принадлежат каким родительским элементам, и предоставляет удобное визуальное представление вложенности элементов. Чтобы получить доступ к этому инструменту, нажмите на иконку «Кубик» в правом верхнем углу инструментов разработчика.
Дополнительные настройки
Опытные пользователи могут отобразить дополнительные настройки на страницах системных параметров Opera. Разблокировка дополнительных настроек позволит, например, управлять аппаратным ускорением или изменять количество столбцов, отображаемых на Экспресс-панели.
Чтобы включить дополнительные настройки, выполните следующие действия:
- Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
- Нажмите Browser (Браузер) на боковой панели.
- В разделе Advanced settings (Дополнительные настройки) установите флажок Show advanced settings (Показать дополнительные настройки).
После этого на страницах настроек будут отображаться дополнительные настройки, отмеченные серой точкой.
Инструменты разработчика
Инструменты разработчика предназначены для разработки и отладки локальных и удаленных страниц. Они позволяют просматривать страницы, используя объектную модель документов, и выделять на них элементы. С их помощью можно пошагово выполнять код JavaScript и быстро просматривать изменения в стилях CSS, а также отлаживать созданные приложения и анализировать, как они влияют на сетевые ресурсы. Инструменты разработчика позволяют осуществлять удаленную отладку страниц в том виде, в каком их увидят пользователи на мобильном телефоне или на экране компьютера.
Полный список инструментов разработчика слишком длинный, и рассказать здесь о каждом из них не представляется возможным. Для получения дополнительных сведений обратитесь к руководству пользователя по инструментам разработчика.
Чтобы открыть инструменты разработчика, пользователям Mac нужно выбрать View (Вид) > Show Developer Menu (Показать меню разработчика) . На панели меню появится новое подменю Developer (Разработчик) . Для работы с инструментами выберите Developer (Разработчик) > Developer Tools (Инструменты разработчика) .
Чтобы открыть инструменты разработчика, пользователям Windows и Linux нужно перейти в меню O > Developer (Разработчик) > Developer Tools (Инструменты разработчика).
Чтобы закрыть инструменты разработчика, нажмите кнопку X в верхнем правом углу окна инструментов.
Настройка прокси
Прокси-сервер – это компьютер, который может, например: сохранять локальные копии страниц для ускорения доступа к ним; выступать в качестве «переводчика» между браузером и каким-либо специальным сервисом; настраивать и контролировать обмен информацией; увеличивать скорость интернет-соединения. Чтобы настроить прокси-сервер, выполните следующие действия.
- Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
- Нажмите Browser (Браузер) на боковой панели.
- В разделе Network (Сеть) нажмите кнопку Change proxy settings (Изменить настройки прокси) .
Теперь весь трафик соответствующего протокола будет проходить через указанный вами прокси-сервер. Чтобы использовать прокси-сервер, необходимо указать следующие данные.
- Протокол, например, HTTP
- Адрес в Интернете, например, proxy.example.org или 192.0.34.166
- Номер порта, например, 5000
Эту информацию можно получить у вашего интернет-провайдера, на хосте прокси-сервера или в документации к программному обеспечению прокси-сервера.
Если вы хотите использовать прокси для соединения даже с локальными серверами, установите флажок Use proxy for local servers (Использовать прокси для локальных серверов) .
Если ваш интернет-провайдер требует автоматического определения прокси-сервера, введите веб-адрес, указанный провайдером.
Экспериментальные функции
Opera предлагает вам протестировать экспериментальные функции, новые возможности и альтернативные конфигурации для вашего браузера. Чтобы узнать больше и начать тестирование, перейдите на страницу opera:flags . Экспериментальные функции Opera нестабильны и не рекомендуются для неопытных пользователей. Включение экспериментальных функций может поставить под угрозу безопасность и неприкосновенность частной информации или привести к потере данных. Рекомендуем пользоваться экспериментальными функциями с осторожностью, на компьютере с резервной копией данных.