Google Chrome консоль продолжение хардкора


Содержание

Как использовать консоль Google Chrome на 100%

Большинство веб-разработчиков при отладке приложений используют Google Chrome — это уже ни для кого не секрет. Прежде всего в этом браузере привлекают продвинутые средства для разработчиков. Одним из элементов devtool является консоль, которая в свою очередь гораздо более продвинутая, чем думают о ней большинство разработчиков.

Консоль Google Chrome умеет гораздо больше, чем console.log() . Я опишу некоторые возможности, которые сам применяю чаще всего.

Производные console.log()

Вызов console.log() позволяет отобразить в консоли сообщение.

Вызовы info() , warn() и error() позволяют сделать то же самое, визуально выделив сообщение соответствующим стилем. Бывает очень полезно, когда в процессе отладки накапливается большое количество сообщений и трудно выделить какие-то ключевые сообщения.

Результат работы console.info(), console.warn() и console.error().

Вторым параметром я передал переменную e , содержимое которой также отобразилось в консоли. Chrome позволяет передавать сколько угодно параметров, если вам требуется отобразить не только сообщение, но и состояние каких-либо переменных.

Таблицы

По умолчанию консоль отображает содержимое объекта в виде дерева. Это очень удобно, т.к. вы можете скрывать/раскрывать нужные части объекта и отслеживать в них информацию. Неудобства возникают когда вам нужно отобразить, например, содержимое массива. В этом случае вы получите нечто подобное:

Результат работы console.log() для массива элементов.

Вместо console.log() в этом случае удобнее использовать console.table() , вот как это выглядит:

Результат работы console.table().

Как видно из скриншота, вызов console.table() отображает массив не только в виде таблицы, но и в виде дерева, как при вызове console.log() .

Группировка

Когда сообщения в консоли идут потоком друг за другом бывает полезно объединять их в группы. Делается это путем вызова методов console.group() и console.groupEnd() .

Если вместо console.group() вызвать console.groupCollapsed() , то сообщения в консоли будут свернуты при отображении.

Результат работы console.group().

Проверка утверждений

Ассерты — это распространенный метод проверки утверждения в разных языках программирования. Консоль Google Chrome также предоставляет такую возможность. Чтобы выполнить проверку, нужно вызвать console.assert() с двумя параметрами: первый — проверяемое условие, второй — сообщение об ошибке. Если проверяемое условие ложно, то в консоли появится сообщение об ошибке, иначе ничего не произойдет.

Результат работы console.assert().

Подсчет количества вызовов

Когда одно и то же сообщение появляется в консоли несколько раз, бывает удобно вести подсчет сколько раз это произошло. С этим отлично справляется console.count() .

Результат работы console.count().

Отображение стека вызовов

Когда при отладке приложения нужно посмотреть стек вызовов, часто используют точки останова и отладчик. Лично мне это неудобно, я предпочитаю отобразить стек в консоли. Я знаю, что для этого некоторые используют хак вроде такого:

Но на самом деле в Chrome для этого есть специальный метод console.trace() .

В этом случае в консоли отобразится доступный стек вызовов. И никаких хаков :-)

Результат работы console.trace().

Форматирование

Chrome позволяет использовать подстановки в выражениях аналогично тому, как это делается в string.Format() в C# или println() в C .

В этом примере %d означает, что здесь подставляется число. Список доступных значений:

  • %s — строка
  • %i , %d — целое число
  • %f — дробное число
  • %o — DOM-элемент
  • %O — JavaScript-объекта

Отдельного внимания заслуживает %c — если указать его при вызове console.log() , то в параметрах можно передать набор CSS-стилей, которые будут использоваться при отображении.

Возможности форматирования сообщения.

Бонус — $0

Если во вкладке Elements выделить какой-либо элемент в DOM, то к нему можно обратиться через $0 в консоли. Это очень удобный способ, когда нужно быстро выполнить какие-нибудь манипуляции с DOM-элементом.

Консоль разработчика Google Chrome

Все современные браузеры реализуют инструменты разработки. Они предназначены для отладки скриптов собственного «производства», а также получения полезной информации о работе активного окна/вкладки.

Сегодня мы поговорим о том, как открыть консоль в Гугл Хром. Также разберем особенности работы с Java Script.

От теории к практике

Сегодня для разработки чаще всего используются Chrome или Firefox, так как эти платформы наиболее стабильны. Их разработчики также уделяют особое внимание развитию специальных возможностей.

Для активации встроенных возможностей предусмотрена кнопка F12 или через системною меню (Дополнительные инструменты – инструменты разработчика).

Графическая оболочка состоит из следующих вкладок:

  • Elements – здесь находятся структурные компоненты активной вкладки, а в правом углу интерфейса – стилистическая разметка окна;
  • Console – область, где разрабатываются скрипты и вносятся изменения в страницу.
  • Sources – в новом окне находится перечень всех используемых файлов, библиотек и протоколов, совместная работа которых поддерживает работоспособность страницы;
  • Performance – встроенные алгоритмы позволяют анализировать нагрузку на GPU за определенный пользователем промежуток;

С помощью простых манипуляций можно вносить коррективы в активное окно, а также тестировать собственные разработки скриптов и элементов WEB-разработки.

Подведем итоги

Консоль разработчиков предназначена для тестирования «сырых» программ и скриптов. Это удобный инструмент для исправления ошибок и багов на активной странице.

Открытие панели разработчиков в Гугл Хром не сопряжено с определенными трудностями и временными затратами.

Удобные возможности консоли разработчика Chrome, о которых вы можете не знать

API командной строки Chrome DevTools содержит большое количество удобных функций для выполнения простых задач: выбора и проверки элементов DOM, отображения данных в читаемом формате, запуска и проверки профилировщика и мониторинга событий DOM.

Примечание: этот API доступен только внутри консоли. Получить доступ к командной строке API из скриптов на странице нельзя.

$_ возвращает значение последнего выполненного выражения.

В примере ниже выполняется простое выражение ( 2 + 2 ). Затем выполняется $_ , которому присваивается то же самое значение:

В этом примере выполненное выражение содержало массив имён. Выполнение $_.length даст длину массива, а само выражение $_ примет значение последнего выполненного выражения, то есть 4:

Команды $0 , $1 , $2 , $3 и $4 работают как ссылки на последние 5 элементов DOM, которые были просмотрены в панели Elements, или на последние 5 JS-объектов из кучи, которые были выбраны в панели Profiles. $0 возвращает элемент или объект, выбранный позже всех, $1 возвращает тот, что был перед ним, и так далее.

В примере ниже в панели Elements выбран элемент класса medium . В консоли $0 принял такое же значение:

На картинке ниже выбран другой элемент на той же странице. $0 теперь относится к этому элементу, а $1 — к предыдущему:

$(selector)

$(selector) возвращает ссылку на первый элемент DOM с указанным CSS-селектором. Эта функция — сокращение для функции document.querySelector().

Granatum, удалённо, средняя по рынку от 60 000 до 150 000 ₽

Этот пример возвращает ссылку на первый элемент в документе:

Кликните правой кнопкой мыши по результату и выберите “Reveal in Elements Panel” для поиска элемента в DOM или “Scroll in to View” для того, чтобы увидеть его на странице.

Пример ниже возвращает ссылку на только что выбранный элемент и отображает его свойство src :

Примечание: Если вы используете библиотеки вроде jQuery, которые используют символ $ , то будет использоваться функциональность этой библиотеки.

$$(selector)

$$(selector) возвращает массив элементов, содержащих указанный селектор. Эта команда эквивалентна вызову document.querySelectorAll().


Следующий пример использует $$() для создания массива из всех элементов в документе и возвращает свойство src каждого элемента:

Примечание: Нажмите в консоли Shift + Enter для перехода на новую строку без выполнения скрипта.

$x(path)

$x(path) возвращает массив элементов, которые удовлетворяют данному выражению XPath.

Этот пример вернёт все элементы

А этот — все элементы

clear()

clear() очищает историю консоли.

copy(object)

copy(object) копирует строковое представление указанного объекта в буфер обмена.

debug(function)

При вызове данной функции вызывается отладчик, который позволяет пошагово исполнить её в панели Sources.

Используйте undebug(fn) для завершения отладки или интерфейс для удаления всех точек останова.

Для получения более подробной информации о точках останова прочитайте статью Debug with Breakpoints.

dir(object)

dir(object) отображает листинг всех свойств указанного объекта. Этот метод — замена метода console.dir() .

Следующий пример показывает разницу между вызовом document.body в командной строке и использованием dir() для отображения того же элемента:

Для получения дополнительной информации ознакомьтесь с разделом console.dir() в API консоли.

dirxml(object)

dirxml(object) выводит XML-представление указанного объекта. Этот метод эквивалентен методу console.dirxml().

inspect(object/function)

inspect(object/function) открывает и выбирает указанный элемент или объект в соответствующей панели: Elements или Profiles.

Этот пример открывает document.body в панели Elements:

При передаче функции она открывает документ в панели Sources.

getEventListeners(object)

getEventListeners(object) возвращает все слушатели событий, привязанные к указанному объекту. Возвращаемое значение — объект, содержащий массивы для всех найденных типов событий (например, «click» или «keydown» ). Элементы каждого массива — это объекты, которые описывают слушатель каждого типа. Например, следующий пример выведет все слушатели событий объекта document :

Если к объекту привязано более одного слушателя, то массив содержит элементы для каждого из них. Например, здесь к элементу #scrollingList привязаны два слушателя события «mousedown» :

Можно просмотреть свойства каждого из этих объектов:

keys(object)

keys(object) возвращает массив имён свойств объекта. Для получения значения свойств используйте values() .

Предположим, в вашем приложении объявлен следующий объект:

Пусть player1 объявлен глобально, тогда keys(player1) и values(player1) выведет следующее:

monitor(function)

При вызове указанной функции в консоль выводится сообщение о том, что что эта функция была вызвана с соответствующими аргументами.

Для отмены используйте unmonitor(function) .

monitorEvents(object, [events])

Когда одно из указанных событий происходит с указанным объектом, объект Event записывается в консоль. Можно указать конкретное событие, массив событий или один из “типов” событий. Примеры ниже.

Следующий запрос мониторит все изменения размера объекта window .

Этот запрос мониторит все события «resize» and «scroll» в объекте window :

Вы также можете задать один из доступных “типов” событий из таблицы ниже:

Тип события / соответствующие события
mouse “mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”
key “keydown”, “keyup”, “keypress”, “textInput”
touch “touchstart”, “touchmove”, “touchend”, “touchcancel”
control “resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”

Например, в этом запросе мониторятся все события типа «key» в выбранном элементе в панели Elements:

Вот пример вывода после набора символов в текстовом поле:

profile([name]) и profileEnd([name])

profile() запускает JS-профилировщик. profileEnd() завершает профилирование и отображает результаты в панели Profile (подробности — в статье Speed Up JavaScript Execution).

Для запуска профилирования:

Профили ткже могут быть вложенными:

Примечание: Профилировщики могут работать одновременно, и их необязательно закрывать в порядке создания.

table(data, [columns])

Вывод данных объекта в формате таблицы. Например, для вывода списка имён нужно сделать следующее:

undebug(function)

undebug(function) прекращает отладку заданной функции.

unmonitor(function)

unmonitor(function) прекращает мониторинг заданной функции.

unmonitorEvents(object, [events])

unmonitorEvents(object, [events]) прекращает мониторинг указанного объекта и событий:

Также можно прекращать мониторинг отдельных событий:

values(object)

values(object) возвращает массив, содержащий значения все свойств указанного объекта.

Google Chrome консоль: продолжение хардкора

Copyright © 2012-2020 THfilm
ภาพยนตร์คลิป — ดูฟรีแชร์ออนไลน์

Google Chrome консоль. Продолжение хардкора [GeekBrains]

  • Facebook
  • Twitter
  • ฉันชอบวิดีโอนี้ 44
  • ความคิดเห็น
  • มุมมอง 1,764


เผยแพร่เมื่อ 2 ปีที่แล้ว

Начни карьеру с бесплатного курса «Основы программирования» goo.gl/jTP4nP
Google Chrome консоль.
На этом мастер-классе мы продолжим изучение особенностей отладки HTML/CSS-кода. Будут изучены следующие темы:
— отладка;
— работа с CSS-картами для препроцессоров;
— экспериментальные особенности браузера;
— работа без блокнотов и IDE;
— популярные и полезные дополнения.
Часть 1: thfilm.net/us/edit?o=U&v >Подписывайся на наш канал и смотри новые видео первым: thfilm.net/us/progliveru
Проходи бесплатные курсы: goo.gl/4gG8TL
Выбери профессию: goo.gl/WSdYSE
Смотри вебинары: goo.gl/bBVKcb
Читай статьи: goo.gl/XfJNqc
Проверяй знания: goo.gl/gqKSsw
ВКонтакте vk.com/geekbrainsru
Facebook facebook.com/geekbrains.ru
Одноклассники ok.ru/geekbrains
Telegram t.me/geekbrains_ru
Instagram instagram.com/geekbrains.ru/
#отладкакода #geekbrains #программирование #курсыпрограммирования

ความคิดเห็น

Mykolaj Koval

ссылка на первую часть некорректна, в мой менеджер видео отправляет. нашел первую часть по этой ссылке: https://www.youtube.com/watch?v=jP2eKH0pG8Y

Vasya

Великолепный урок, как и первая версия, спасибо

Как открыть консоль в браузере Chrome?

Открыть консоль в браузере Google Chrome можно следующим образом:

1) Открываем пункт «Настройки» в главном меню.

2) Далее выбираем — «Дополнительные инструменты» -> «Инструменты разработчика».

После этого откроется консоль с html-разметкой.

Также можно это сделать с помощью комбинации: Ctrl + Shift + J.

Открыть консоль в браузере можно следующим образом:

  • заходим в настройки браузера;
  • далее нажимаем на дополнительные инструменты;
  • листаем до конца и жмем на инструменты разработчика.

Так же это можно сделать нажав клавишу F12.

Вот и все. Удачи!

Самый быстрый и простой способ открытия консоль-панели в Google Chrome — это открытие с помощью комбинации из 3-х клавиш. Ctrl + Shift + J.

Если по какой-либо причине с помощью комбинации открыть не получилось, то откройте настройки Хрома, далее «дополнительные инструменты»/»инстру­ менты разработчика».

В открытом браузере Гугл Хром ищем главное меню, далее настройки браузера, в это меню изыскиваем вкладку доп. инструменты. Вот здесь есть пункт «инструменты разработчика» при нажатии на который вам открывается консоль.

Этот инструмент «не лежит на поверхности» скорее всего из-за того, что требуется он далеко не каждому обычному пользователю. К консоли обращаются чаще всего довольно продвинутые пользователи, программисты и системные администраторы.

Frontender Magazine

Консоль предоставляет две функции для разработчиков для тестирования веб-страниц и приложений:

  • в консоль можно выводить отладочную информацию, используя такие методы Console API, как console.log() и console.profile().
  • оболочка для работы в консоли, в которой вы можете вводить команды, в частности используя автодополнение, и оперировать document и Chrome DevTools. Вы можете выполнять JavaScript-выражения прямо в консоли и использовать методы Command Line API, например, $() для создания выборки элементов, или profile() для запуска CPU-профайлера.

В статье мы рассмотрим наиболее распространённые способы использования Console API и Command Line API. Более подробно о них вы сможете узнать в документации.

Базовые операции

Открытие консоли

Консоль в Chrome DevTools доступна в двух вариантах: вкладка Console и в виде разделённой версии, доступной из любой другой вкладки.

Для того, чтобы открыть вкладку Console вы можете:

  • использовать хоткей Command — Option — J (Mac) или Control — Shift — J (Windows/Linux);
  • выбрать пункт меню View > Developer > JavaScript Console.

Для того, чтобы вызвать или скрыть разделённую версию консоли в других вкладках, нажмите клавишу Esc или кликните на иконку Show/Hide Console в нижнем левом углу DevTools. Скриншот показывает разделённый вариант консоли во вкладке Elements.

Очистка консоли

Для очистки консоли:

  • через контекстное меню вкладки консоли (клик правой кнопки мыши) выберите пункт Clear Console.
  • Введите clear() — команду из Command Line API в консоли.
  • Вызовите console.clear() (команду из Console API) из скрипта.
  • Используйте хоткеи ⌘K или ⌃L (Mac) Control — L (Windows и Linux).

По умолчанию, история консоли очищается при переходе на другую страницу. Вы можете отменить очистку включив Preserve log upon navigation в разделе консоли в настройках DevTools (см. настройки Консоли).

Настройки консоли

Консоль имеет две главные опции, которые вы можете настраивать в главной вкладке настроек DevTools:

  • Log XMLHTTPRequests — определяет, логировать ли XMLHTTPRequest в панели консоли.
  • Preserve log upon navigation — определяет, сбрасываться ли истории консоли при переходе на новую страницу. По умолчанию обе из этих опций отключены.

Вы можете поменять эти настройки в контекстном меню консоли, кликнув правой кнопкой мыши.

Использование API консоли

Console API — набор методов, доступных из объекта console , объявленного из DevTools. Одно из главных назначений API — логировать информацию (значение свойства, целый объект или DOM-элемент) в консоль во время работы вашего приложения. Вы также можете группировать вывод, чтобы избавиться от визуального мусора.

Вывод в консоль

Метод console.log() принимает один и более параметров и выводит их текущие значения на консоль. Например:

Вместо того, чтобы конкатенировать параметры функции с помощью оператора + (как показано выше), вы можете ввести каждый параметр друг за другом через запятую и их значения будут выведены в одну строку, разделённые пробелом.

Ошибки и предупреждения

Метод console.error() выводит красную иконку рядом с сообщением красного цвета.

Метод console.warn() выводит жёлтую иконку рядом с текстом сообщения.

Проверки

Метод console.assert() выводит сообщение об ошибке (это второй аргумент) только в том случае, если первый аргумент равен false . К примеру, в следующем примере сообщение об ошибке появится, только если количество дочерних элементов DOM-элемента list больше пятисот.

Фильтрация вывода в консоли

Вы можете быстро фильтровать сообщения в консоли по их типу (уровню) — ошибки, предупреждения и стандартный лог — выбрав один из доступных опций внизу консоли:

  • All — без фильтрации.
  • Errors — сообщения console.error() .
  • Warnings — сообщения console.warn() .
  • Logs — сообщения console.log() , console.info() и console.debug() .
  • Debug — сообщения console.timeEnd() и остальных функций консольного вывода.

Группирование вывода

Вы можете визуально группировать вывод в консоли с помощью команд console.group() и groupEnd().

Также вы можете вкладывать группы логов друг в друга. В следующем примере группа логов создаётся для этапа аутентификации в процессе логина. Если пользователь аутентифицирован, то создаётся вложенная группа для этапа авторизации.

Для создания изначально свёрнутой группы используйте console.groupCollapsed() вместо console.group() :

Замена строк и их форматирование

Первый параметр, передаваемый в любой метод консоли (например, log() или error() ), может содержать модификаторы форматирования. Модификатор вывода состоит из символа % , сразу за которым следует буква, сообщающая о том, какое форматирование должно быть применено (например, %s — для строк). Модификатор форматирования определяет, куда подставить значение, переданное из следующих параметров функции.

В следующем примере используется строчный и числовой модификаторы %s (string) и %d (decimal) для замены значений в выводимой строке.

Результатом будет «Саша купил 100 бочонков мёда».

Приведённая таблица содержит поддерживаемые модификаторы форматирования и их значения:

Модификатор форматирования Описание
%s Форматирует значение как строку.
%d или %i Форматирует значение как целое число (decimal и integer).
%f Форматирует объект как число с плавающей точкой.
%o Форматирует значение как DOM-элемент (также как в панели Elements).
%O Форматирует значение как JavaScript-объект.
%c Применяет переданные в качестве второго аргумента CSS-стили к выводимой строке.

В следующем примере модификатор форматирования %d заменяется на значение document.childNodes.length и форматируется как целое число; модификатор %f заменяется на значение, возвращаемое Date.now() и форматируется как число с плавающей точкой.


Представление DOM-элементов как JavaScript-объекты

По умолчанию, когда вы логируете DOM-элемент в консоль, он выводится в XML- формате, как в панели Elements:

Вы можете вывести DOM-элемент в JavaScript-представлении с помощью метода console.dir() :

Точно также вы можете использовать модификатор вывода %0 в методе console.log() :

Стилизация вывода консоли с помощью CSS

Можно использовать модификатор %c , чтобы применить СSS-правила, к любой строке, выводимой с помощью console.log() или похожих методов.

Измерение временных затрат

Методы console.time() и console.timeEnd() используются для измерения того, как много времени потребовалось для выполнения скрипта. console.time() вызывается для запуска таймера, а console.timeEnd() — для его остановки. Время, прошедшее между вызовами этих функций, будет выведено в консоль.

Внимание: необходимо использовать одинаковые строки в параметрах console.time() и timeEnd() для ожидаемой работы таймера — считайте эту строку его уникальным идентификатором.

Корреляция с панелью Timeline

Панель Timeline предоставляет подробный обзор того, куда было потрачено время работы вашего приложения. Метод console.timeStamp() создаёт отдельную отметку в момент своего исполнения. Это помогает легко и непринуждённо соотносить события в приложении с браузерными событиями reflow и repaint.

Внимание: метод console.timeStamp() выполняется только при записи событий в панели Timeline.

В следующем примере в панели Timeline появляется отметка «Adding result» в тот момент, когда поток выполнения программы доходит до console.timeStamp(«Adding result»)

Как проиллюстрировано в скриншоте, вызов timeStamp() отмечен в следующих местах:

  • жёлтая вертикальная линия в панели Timeline.
  • Запись добавлена в список записанных событий.

Создание точек останова

Вы можете начать отладку вашего кода, вызвав команду debugger. К примеру, в следующем коде отладка начинается сразу после вызова метода brightness() :

Использование Command Line API

Кроме того, что консоль — это место вывода логов вашего приложения, вы можете вводить в нее команды, определенные в Command Line API. Это API дает следующие возможности:

  • удобные функции для выделения DOM-элементов.
  • Методы управления CPU-профайлером.
  • Псевдонимы для некоторых методов Console API.
  • Отслеживание событий.
  • Просмотр обработчиков событий объекта.

Выполнение выражений

Консоль выполнит любой JavaScript-код, который вы в неё введёте, сразу после нажатия кнопки Return или Enter. В консоли действует автодополнение и дополнение по табу. По мере ввода выражений и свойств вам предлагают возможные варианты. Если существуют несколько одинаково начинающихся свойств, вы можете выбирать между ними с помощью кнопки Tab. Нажав стрелку вправо вы выберете текущую подсказку. Если подсказка одна, то нажатие Tab тоже приведет к ее выбору.

Для того, чтобы вводить многострочные JavaScript-выражения, используйте сочетание клавиш Shift+Enter для перевода строки.

Выделение элементов

Command Line API предоставляет набор методов для доступа к DOM-элементам в вашем приложении. К примеру, метод $() возвращает первый элемент, соответствующий объявленному CSS-селектору, идентично с document.querySelector(). Следующий код вернёт первый элемент с ID «loginBtn».

Метод $$() возвращает массив элементов, соответствующих указанному CSS- селектору, идентично document.querySelectorAll(). Чтобы получить все кнопки с классом loginBtn , нужно ввести:

И, наконец, метод x() принимает XPath-путь в качестве параметра и возвращает массив элементов, соответствующих этому пути. Например, этот код вернёт все элементы , являющиеся дочерними по отношению к элементу :

Инспектирование DOM-элементов и объектов

Метод inspect() принимает ссылку на DOM-элемент (или объект) в качестве параметра и отображает элемент или объект в соответствующей панели: DOM-элемент в панели Elements и JavaScript-объект в панели Profile.

К примеру, в следующем скриншоте функция $() использована, чтобы получить ссылку на элемент
. Затем последнее исполненное выражение ($_) передаётся в inspect() , чтобы открыть этот элемент в панели Elements.

Доступ к недавно вызванным DOM-элементам или объектам

Часто во время тестирования вы выбираете DOM-элементы либо непосредственно в панели Elements, либо используя соответствующий инструмент (иконка — увеличительное стекло), чтобы работать с этими элементами. Также вы можете выбрать снимок использования памяти в панели Profiles для дальнейшего изучения этого объекта.

Консоль запоминает последние пять элементов (или объектов), которые вы выбирали, и к ним можно обратиться используя свойства $0, $1, $2, $3 и $4. Последний выбранный элемент или объект доступен как $0 , второй — $1 и так далее.

Следующий скриншот показывает значения этих свойств после выбора трех различных элементов подряд из панели Elements:

Внимание: В любом случае вы можете кликнуть правой кнопкой мыши или кликнуть с зажатой клавишей Control в консоли и выбрать пункт «Reveal in Elements Panel»

Отслеживание событий

Метод monitorEvents() позволяет отслеживать определенные события объекта. При возникновении события оно выводится в консоль. Вы определяете объект и отслеживаемые события. Например, следующий код позволяет отслеживать событие “resize” объекта окна.

Чтобы отслеживать несколько событий одновременно, можно передать в качестве второго аргумента массив имен событий. Следующий код отслеживает одновременно события “mousedown” и “mouseup” элемента body :

Кроме того, вы можете передать один из поддерживаемых «типов событий», которые DevTools сами преобразуют в реальные имена событий. Например, тип события touch позволит отслеживать события touchstart, touchend, touchmove, и touchcancel.

Чтобы узнать, какие типы событий поддерживаются — ознакомьтесь с monitorEvents() из Console API.

Чтобы прекратить отслеживать событие вызовите unmonitorEvents() с объектом в качестве аргумента.

Контроль за CPU-профайлером

С помощью методов profile() и profileEnd() можно создавать JavaScript профили CPU. По желанию можно задать профилю имя.

Ниже вы видите пример создания нового профиля с именем назначенным по умолчанию:

Новый профиль появляется в панели Profiles с именем Profile 1:

Если вы обозначите имя для нового профиля, то оно будет использоваться в качестве его заголовка. Если вы создаете множество профилей с одинаковыми именами, то они группируются под одним заголовком:

Результат в панели Profiles:

Профили CPU могут быть вложенными, например:

Вызовы методов остановки и запуска профилирования не обязательно должны быть корректно вложены друг в друга. Например, этот пример будет работать так же, как и предыдущий:

© 2013 Frontender Magazine

Кроме материалов, опубликованных под лицензией Creative Commons

Google Chrome консоль: продолжение хардкора

Copyright © 2012-2020 DE-film
Filme, Clips — kostenlos ansehen, online teilen

#2 Google Chrome консоль: продолжение хардкора

Teilen
  • Facebook
  • Twitter
  • Mag ich 3
  • KOMMENTARE
  • Aufrufe 141

Am Vor 2 years

< GeekCode | GeekDay | GeekBrains | MailRu >
На этом мастер-классе мы продолжим изучение особенностей отладки HTML/CSS-кода. Будут изучены следующие темы:
отладка;
работа с CSS-картами для препроцессоров;
экспериментальные особенности браузера;
работа без блокнотов и IDE;
популярные и полезные дополнения.

KOMMENTARE

Dmitry Soloviev


Большое спасибо! Было все здорово! Буду с нетерпением ждать продолжения по отладке javascript на chrome. И еще — вы упомянули, что могли бы сделать вебинар по созданию расширений для Google Chrome — было бы очень интересно, если бы вы смогли это реализовать.

Google Chrome консоль: продолжение хардкора

Copyright © 2012-2020 THfilm
ภาพยนตร์คลิป — ดูฟรีแชร์ออนไลน์

Google Chrome консоль. Продолжение хардкора [GeekBrains]

  • Facebook
  • Twitter
  • ฉันชอบวิดีโอนี้ 44
  • ความคิดเห็น
  • มุมมอง 1,764

เผยแพร่เมื่อ 2 ปีที่แล้ว

Начни карьеру с бесплатного курса «Основы программирования» goo.gl/jTP4nP
Google Chrome консоль.
На этом мастер-классе мы продолжим изучение особенностей отладки HTML/CSS-кода. Будут изучены следующие темы:
— отладка;
— работа с CSS-картами для препроцессоров;
— экспериментальные особенности браузера;
— работа без блокнотов и IDE;
— популярные и полезные дополнения.
Часть 1: thfilm.net/us/edit?o=U&v >Подписывайся на наш канал и смотри новые видео первым: thfilm.net/us/progliveru
Проходи бесплатные курсы: goo.gl/4gG8TL
Выбери профессию: goo.gl/WSdYSE
Смотри вебинары: goo.gl/bBVKcb
Читай статьи: goo.gl/XfJNqc
Проверяй знания: goo.gl/gqKSsw
ВКонтакте vk.com/geekbrainsru
Facebook facebook.com/geekbrains.ru
Одноклассники ok.ru/geekbrains
Telegram t.me/geekbrains_ru
Instagram instagram.com/geekbrains.ru/
#отладкакода #geekbrains #программирование #курсыпрограммирования

ความคิดเห็น

Mykolaj Koval

ссылка на первую часть некорректна, в мой менеджер видео отправляет. нашел первую часть по этой ссылке: https://www.youtube.com/watch?v=jP2eKH0pG8Y

Vasya

Великолепный урок, как и первая версия, спасибо

Компьютерный портал osblog

Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $ ? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.

На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.

1. Выбор элементов DOM

Команды вида $(‘tagName’) , $(‘.class’) , $(‘#id’) и $(‘.class #id’) возвращают первый элемент DOM, совпадающий с селектором. При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет.

Есть здесь и ещё одна конструкция: $$ . Её использование выглядит как $$(‘tagName’) или $$(‘.class’) . Она позволяет выбрать все элементы DOM, соответствующие селектору и поместить их в массив. Работа с ним ничем не отличается от других массивов. Для того, чтобы выбрать конкретный элемент, можно обратиться к нему по индексу.

Например, команда $$(‘.className’) предоставит нам массив всех элементов страницы с указанным при её вызове именем класса. Команды $$(‘.className’) и $$(‘.className’) дадут доступ, соответственно, к первому и второму элементу полученного массива.

Эксперименты с командами $ и $$

2. Превращаем браузер в текстовый редактор

Document.body.contentEditable=true
После её исполнения в консоли, документ, открытый в браузере, можно редактировать без необходимости поисков нужного фрагмента в HTML-коде.

3. Поиск обработчиков событий, привязанных к элементу

GetEventListeners($(‘selector’))
В результате её выполнения будет выдан массив объектов, содержащий список событий, на которые может реагировать элемент.

Для того, чтобы найти обработчик для конкретного события, можно использовать такую конструкцию:

GetEventListeners($(‘selector’)).eventName.listener
Эта команда выведет код функции-обработчика события. Здесь eventName – это массив, который содержит все события конкретного типа. Например, на практике это может выглядеть так:

GetEventListeners($(‘#firstName’)).click.listener
В результате мы получим код функции, связанной с событием click элемента с идентификатором firstName .

4. Мониторинг событий

5. Измерение времени выполнения фрагмента кода

Console.time(«myTime»); //Запускает таймер с меткой myTime console.timeEnd(«myTime»); //Останавливает таймер с меткой myTime //Вывод: myTime:123.00 ms
Вышеприведённый пример позволяет узнать время между запуском и остановкой таймера. То же самое можно сделать внутри JavaScript-программы и найти время выполнения фрагмента кода.

Cкажем, мне нужно выяснить длительность исполнения цикла. Сделать это можно так:

Console.time(«myTime»); // Запускает таймер с меткой myTime for(var i=0; i 6. Вывод значений переменных в виде таблиц

Var myArray=[,,,]
Если вывести его в консоли, получится иерархическая структура в виде, собственно, массива объектов. Это – полезная возможность, ветви структуры можно разворачивать, просматривая содержимое объектов. Однако, при таком подходе сложно понять, например, как соотносятся свойства похожих элементов. Для того, чтобы с подобными данными было удобнее работать, их можно преобразовать к табличному виду. Для этого служит такая команда:

Console.table(variableName)
Она позволяет вывести переменную и все её свойства в виде таблицы. Вот, как это выглядит.

Вывод массива объектов в виде таблицы

7. Просмотр кода элемента

8. Вывод списка свойств элемента

Dir($(‘selector’))
Она возвращает объект, содержащий свойства, связанные с заданным элементом DOM. Как и в прочих подобных случаях, содержимое этого объекта можно исследовать, просматривая его древовидную структуру.

9. Вызов последнего полученного результата

2+3+4 9 //- Результат суммирования — 9 $_ 9 // Выводится последний полученный результат $_ * $_ 81 // Так как последний результат 9, получаем 81 Math.sqrt($_) 9 // Квадратный корень из последнего результата, который был равен 81 $_ 9 // Снова получаем 9 – результат предыдущего вычисления

10. Очистка консоли и памяти

Clear()
После нажатия на Enter чистая консоль будет готова к новым экспериментам.
Вот и всё.

11, 12, 13, 14…

В каждом браузере есть свой инструмент разработчика – это то, что многие называют просто «консолью», рассмотрим Консоль в браузере Chrome. Выглядит вот так:

На самом деле Консоль в браузере Chrome — это инструмент, с помощью которого можно не только посмотреть наполнение страницы, выводимой браузером, а также существующие ошибки (что чаще всего и делают тестировщики), но и исправить эти ошибки намного проще и быстрее (что чаще всего делают девелоперы), замерять различные показатели и манипулировать страницей.

Как открыть консоль в браузере Chrome:

— нажав одновременно клавиши Ctrl + Shift + I;

— ПКМ по элементу страницы –> Просмотреть код;

— меню браузера –> Дополнительные Инструменты –> Инструменты Разработчика.

Располагаться она может внизу страницы или сбоку, можно открепить в отдельное окно. Итак, рассмотрим по отдельности каждую вкладку открытой консоли.

Итого в ней есть 8 вкладок, каждая из которых отображает определенные данные:

1 – Elements (содержит весь html/css код страницы и позволяет выбрать элементы для исследования, а также редактировать их)

2 – Console (отображает наличие/отсутствие ошибок/предупреждений в коде)

3 – Sources (позволяет выполнять операции с кодом страницы)

4 – Network (отслеживает время исполнения определенных запросов и сами запросы)

5 – Timeline (измеряет время загрузки страницы)

6 – Profiles (позволяет создавать JavaScript, профили CPU)

7 Resources (позволяет просмотреть определенные сохраненные данные)

8 – Audits (проводит проверки определенных параметров)

Теперь пройдемся по каждой из них в отдельности и поподробнее:

Панель Elements

Панель Elements показывает разметку страницы точно так же, как она рендерится в браузере. Можно визуально менять наполнение сайта посредством изменения html/css кода в панели элементов. Как вы, наверное, заметили (а может и нет), в левом окошке отображается html–документ, в правом – css. Проводя нехитрые манипуляции с данными можно изменить наполнение и дизайн открытой страницы. Например, можно поменять текст в окне, если редактировать его в теле html, а также изменить шрифт страницы поменяв его значение в поле css. Но это не сохранит введенных данных, а поможет просто визуально оценить примененные изменения. Помимо этого, можно просмотреть код конкретного элемента страницы. Для этого нужно райткликнуть его и выбрать команду «Посмотреть код».

В панели Elements есть одна очень прекрасная функция. Можно посмотреть, как бы выглядела открытая страница на каком-нибудь девайсе с другим расширением экрана. Кликом по иконке телефона слева от вкладки Elements вызывается окно, в котором можно менять размер предполагаемого экрана, таким образом эмулируя тот или иной девайс и контролировать отображение страницы на нем. Выглядит это так:


При клике на кнопку Select Model выпадет дропдаун с огромнейшим выбором девайсов. Выбираете что вам нужно – и вуаля! Страница отображена так, как если бы это был девайс. Таким образом панель Elements можно использовать не только для просмотра или редактирования страницы, но и для эмуляции устройств отображения. Все унифицировано и доступно в Хроме!

Панель Console

Самая популярная вкладка тестировщиков, поскольку именно здесь мы видим найденные при выполнении скрипта ошибки в коде. Также данная панель отображает различного рода предупреждения и рекомендации (как на картинке выше). Все выводимые во вкладке сообщения можно фильтровать. В ошибке также отображается ее расположение и кликнув по нему вы переместитесь во вкладку Sources, где ошибка будет выведена в общей конструкции страницы.

Очистить поле вкладки Console (в случае, если вам требуется удалить сообщения о предыдущих ошибках) можно кликнув иконку перечеркнутого круга. Фильтровать сообщения в консоли можно по типу — ошибки, предупреждения, инфо, стандартный вывод, сообщения отладчика, исправленные — выбрав одну из доступных опций консоли.

Панель Sources

Как правило, в данной вкладке проводится отладка кода программистами. Она имеет 3 окна (слева направо):

  1. Зона исходных файлов. В ней находятся все подключённые к странице файлы, включая JS/CSS.
  2. Зона текста. В ней находится текст файлов.
  3. Зона информации и контроля.

В зоне исходных файлов выбирается необходимый элемент, в зоне текст выполняется непосредственно его отладка, а в зоне информации и контроля можно запускать/останавливать отлаженный код.

Панель Network

Основная функция данной вкладки – запись сетевого журнала. Она дает представление о запрашиваемых и загружаемых ресурсах в режиме реального времени. Можно выявить, загрузка и обработка каких именно ресурсов занимает большее количество времени, чтобы впоследствии знать где и в чем именно можно оптимизировать страницу.

Также стоит отметить что именно в этой вкладке в режиме Large request rows можно просмотреть запросы, которые отправляются на сервер, а также ответы, которые приходят с него, их содержание и характеристики.

Панель Performance

Данная вкладка используется при необходимости полного обзора затраченного времени. На что оно было потрачено, как много его потребовалось на тот или иной процесс. Здесь отображается абсолютно вся активность, включая загрузку ресурсов и выполнение Javascript.

Данная панель дает возможность профилировать время исполнения и использование памяти веб приложением или страницей, таким образом помогая понять где именно тратится много ресурсов и как можно оптимизировать код.

CPU profiler предоставляет информацию по времени, затраченному на выполнение Javascript.

Heap profiler отображает распределение памяти.

JavaScript profile детализирует, куда именно ушло время при выполнении скриптов.

Предназначена для исследования загруженных элементов. Позволяет взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и т.д. В данной вкладке можно почистить куки, открыв данную вкладку и кликнув иконку перечеркнутого круга

Панель Audits

Данная панель функционирует в качестве анализатора страницы во время ее загрузки. В результате проведенного аудита появляются рекомендации по оптимизации загрузки страницы, увеличению скорости отклика. Примеры способов оптимизации можно увидеть в окне ниже.

Панель Secuirity

Security Panel показывает информации о каждом запросе и подсвечивает те, из-за которых сайт не получает заветной зелёной иконки в статусе.

Кроме того можно получить следующую информацию:

  • о проверке сертификата, подтвердил ли сайт свою подлинность TLS-сертификатом;
  • TLS-соединении, обозначая использует ли ваш сайт современные безопасные протоколы;
  • безопасность подгружаемых второстепенных источников.

На самом деле, инструменты разработчика (Консоль в браузере Chrome) – очень полезная штука, которая и нам, тестировщикам, частенько может пригодиться. Еще больше полезной информации на сайте https://developers.google.com/web/tools/chrome-devtools/

API командной строки Chrome DevTools содержит большое количество удобных функций для выполнения простых задач: выбора и проверки элементов DOM, отображения данных в читаемом формате, запуска и проверки профилировщика и мониторинга событий DOM.

Примечание: этот API доступен только внутри консоли. Получить доступ к командной строке API из скриптов на странице нельзя.

$_ возвращает значение последнего выполненного выражения.

В примере ниже выполняется простое выражение (2 + 2). Затем выполняется $_ , которому присваивается то же самое значение:

В этом примере выполненное выражение содержало массив имён. Выполнение $_.length даст длину массива, а само выражение $_ примет значение последнего выполненного выражения, то есть 4:

Команды $0 , $1 , $2 , $3 и $4 работают как ссылки на последние 5 элементов DOM, которые были просмотрены в панели Elements, или на последние 5 JS-объектов из кучи, которые были выбраны в панели Profiles. $0 возвращает элемент или объект, выбранный позже всех, $1 возвращает тот, что был перед ним, и так далее.

В примере ниже в панели Elements выбран элемент класса medium . В консоли $0 принял такое же значение:

На картинке ниже выбран другой элемент на той же странице. $0 теперь относится к этому элементу, а $1 — к предыдущему:

$(selector)

$(selector) возвращает ссылку на первый элемент DOM с указанным CSS-селектором. Эта функция — сокращение для функции document.querySelector() .

Кликните правой кнопкой мыши по результату и выберите «Reveal in Elements Panel» для поиска элемента в DOM или «Scroll in to View» для того, чтобы увидеть его на странице.

Примечание: Если вы используете библиотеки вроде jQuery, которые используют символ $ , то будет использоваться функциональность этой библиотеки.

$$(selector)

$$(selector) возвращает массив элементов, содержащих указанный селектор. Эта команда эквивалентна вызову document.querySelectorAll() .

Следующий пример использует $$() для создания массива из всех элементов в документе и возвращает свойство src каждого элемента:

Var images = $$(«img»); for (each in images)

Примечание: Нажмите в консоли Shift + Enter для перехода на новую строку без выполнения скрипта.

$x(path)

$x(path) возвращает массив элементов, которые удовлетворяют данному выражению XPath.

Этот пример вернёт все элементы

А этот — все элементы

clear()

clear() очищает историю консоли.

copy(object)

copy(object) копирует строковое представление указанного объекта в буфер обмена.

debug(function)

При вызове данной функции вызывается отладчик, который позволяет пошагово исполнить её в панели Sources.

Используйте undebug(fn) для завершения отладки или интерфейс для удаления всех точек останова.

dir(object)

dir(object) отображает листинг всех свойств указанного объекта. Этот метод — замена метода console.dir() .

Следующий пример показывает разницу между вызовом document.body в командной строке и использованием dir() для отображения того же элемента:

Для получения дополнительной информации ознакомьтесь с разделом console.dir() в API консоли.

dirxml(object)

dirxml(object) выводит XML-представление указанного объекта. Этот метод эквивалентен методу console.dirxml() .

inspect(object/function)

inspect(object/function) открывает и выбирает указанный элемент или объект в соответствующей панели: Elements или Profiles.

Этот пример открывает document.body в панели Elements:

При передаче функции она открывает документ в панели Sources.

getEventListeners(object)

getEventListeners(object) возвращает все слушатели событий, привязанные к указанному объекту. Возвращаемое значение — объект, содержащий массивы для всех найденных типов событий (например, «click» или «keydown»). Элементы каждого массива — это объекты, которые описывают слушатель каждого типа. Например, следующий пример выведет все слушатели событий объекта document:

Если к объекту привязано более одного слушателя, то массив содержит элементы для каждого из них. Например, здесь к элементу #scrollingList привязаны два слушателя события «mousedown» :

Можно просмотреть свойства каждого из этих объектов:


keys(object)

keys(object) возвращает массив имён свойств объекта. Для получения значения свойств используйте values() .

Предположим, в вашем приложении объявлен следующий объект:

Пусть player1 объявлен глобально, тогда keys(player1) и values(player1) выведет следующее:

monitor(function)

При вызове указанной функции в консоль выводится сообщение о том, что что эта функция была вызвана с соответствующими аргументами.

Function sum(x, y) < return x + y; >monitor(sum);

Для отмены используйте unmonitor(function) .

monitorEvents(object, )

Когда одно из указанных событий происходит с указанным объектом, объект Event записывается в консоль. Можно указать конкретное событие, массив событий или один из «типов» событий. Примеры ниже.

Следующий запрос мониторит все изменения размера объекта window .

Этот запрос мониторит все события «resize» and «scroll» в объекте window:

MonitorEvents(window, [«resize», «scroll»])

Вы также можете задать один из доступных «типов» событий из таблицы ниже:

Например, в этом запросе мониторятся все события типа «key» в выбранном элементе в панели Elements:

Вот пример вывода после набора символов в текстовом поле:

profile() и profileEnd()

Для запуска профилирования:

Профили ткже могут быть вложенными:

Profile(«A»); profile(«B»); profileEnd(«A»); profileEnd(«B»);

Примечание: Профилировщики могут работать одновременно, и их необязательно закрывать в порядке создания.

table(data, )

Вывод данных объекта в формате таблицы. Например, для вывода списка имён нужно сделать следующее:

undebug(function)

undebug(function) прекращает отладку заданной функции.

unmonitor(function)

unmonitor(function) прекращает мониторинг заданной функции.

unmonitorEvents(object, )

unmonitorEvents(object, ) прекращает мониторинг указанного объекта и событий:

Также можно прекращать мониторинг отдельных событий:

MonitorEvents($0, «mouse»); unmonitorEvents($0, «mousemove»);

values(object)

values(object) возвращает массив, содержащий значения все свойств указанного объекта.

Здравствуйте, дорогие друзья. Панель (консоль) разработчика в браузере – это незаменимый инструмент для каждого владельца сайта, с помощью которого можно быстро просмотреть html код страницы и css стили. А также узнать об ошибках, возникших при загрузке сайта и проверить сайт на адаптивность.

Именно работу с html кодом, css стилями и адаптивностью в панели разработчика мы сегодня и рассмотрим. Это те инструменты, которые требуются для решения большинства задач.

Для общего понимания картины давайте приведу пример, когда вам может понадобиться панель разработчика.

Допустим, вы пришли на мой блог, и вас заинтересовало, какой я шрифт использую или цвет и так далее. В общем, это может быть любой элемент на сайте. И вы захотели сделать также у себя на сайте.

Тогда вы смотрите через панель разработчика в браузере на нужный элемент, где видны html код и css стили к нему.

Другой вариант использования панели, – это когда вы хотите что-то сделать на сайте, но пока не знаете, как это будет выглядеть.

В этом случае тоже можно использовать панель разработчика и посмотреть, как ваша задумка будет выглядеть в браузере. Ведь всё, что вы делаете в панели разработчика видно только вам. А для того чтобы ваши эксперименты увидели посетители, потребуется переносить стили и коды в файлы сайта.

Открытие панели вебмастера и знакомство с интерфейсом

Панель разработчика присутствует в каждом современном браузере. Для того чтобы её открыть нужно нажать на клавиатуре клавишу F12.

Интерфейс панели в разных браузерах будет отличаться, но принципы работы схожие.

Мне больше нравится панель в браузере Firefox.

Сама панель поделена на две половины и содержит вкладки и инструменты для работы.

В панели можно просматривать HTML код страницы и редактировать его тут же. Для этого выбираете нужный элемент, нажимаете правую кнопку мышки и в меню выбираете «Править как HTML (Edit as HTML)» .

Для работы со стилями нужно перейти к разделу панели CSS, где можно добавлять стили или отключать имеющиеся, убрав чекбокс напротив них. Менять можно всё.

Здесь же можно узнать в каком файле находятся стили, и на какой строке.

Как проанализировать html элемент на сайте и узнать его стили css

Давайте рассмотрим пример на моей , которая располагается в каждой статье.

Для того чтобы проанализировать нужный элемент, необходимо нажать на нём правую кнопку мышки, и выбрать пункт меню .

Весь принцип работы с кодом, в панели, заключается в том, что нужно выбрать код html в левом окне, а в правом будут стили для этого элемента.

И если со стилями всё достаточно просто, то при работе с кодом html нужно понимать его целостность. То есть каждый элемент имеет теги, в которых он находится. Это могут быть абзацы, ссылки, изображения и так далее. Чаще всего это блоки DIV, которые имеют открывающий тег и закрывающий . И в панели это всё хорошо видно.

При копировании или редактировании важно понимать, где блок начинается и где он заканчивается. Допустив здесь малейшую ошибку можно нарушить всю вёрстку шаблона.

В видеоуроке на этом моменте я остановлюсь подробно. А если хотите быстро освоить базовые знания по html и css, советую перейти на страницу «Бесплатно» и скачать курсы Евгения Попова.

Как скопировать код html из панели в файлы сайта

Идей для применения панели разработчика может быть много. Поэкспериментировав в панели, полученный результат нужно перенести в файлы сайта. И тут есть некоторая трудность. Дело в том, что в панели отображается html код, а большинство современных сайтов, в том числе и на платформе WordPress, созданы с помощью языка программирования PHP. А это, как небо и земля.

Итак, рассмотрим пример копирования баннера с моего блога и переноса его на другой сайт.

Для этого нужно открываю панель разработчика, исследуя нужный элемент. Определив начало блока ДИВ, нажимаете правую кнопку мушки и выбираете пункт меню «Копировать внешний HTML»

Код скопирован в буфер обмена, и теперь его нужно вставить в то место, где вы хотите видеть этот баннер.

Процесс этот описывать достаточно сложно, поэтому предлагаю посмотреть видеоурок, в котором всё подробно рассказано и показано.

Как перенести стили из панели разработчика в файлы сайта

После того как вы определились с кодом и стилями можно приступать к переносу их в файлы сайта. Так как пока все эти изменения видны только вам в браузере и, если обновить страницу, то все изменения исчезнут.

, для меня это удобнее. Так как при работе в Notepad++ есть подсветка кода и нумерация строк. А это сильно помогает, когда нужно непросто скопировать стили, а внести изменения в имеющиеся. По номеру строки эти стили легко найти.

Как проверить адаптивность шаблона в панели разработчика

Для перевода панели в адаптивный режим нужно нажать сочетание клавиш CTRL+SHIFT+M или кнопку в панели разработчика, которая в разных браузерах расположена по-разному.

Заключение

В этой статья я рассмотрел не все инструменты панели разработчика, а лишь те, которые могут пригодиться и используются многими вебмастерами чаще всего.

Использование панели и навыки работы с кодом и стилями незаменимы при работе с сайтами и партнёрскими программами.

Берите инструмент на вооружение, он вам пригодится ещё много раз.

Если же остались вопросы, буду рад ответить на них в комментариях.

Друзья, желаю вам успехов. До встречи в новых статьях.

Как заставить консоль работать с консолью в консоли разработчика (F12) в Chrome?

Я пытаюсь выполнить некоторую регистрацию через console.log в консоли разработчика Chrome, но никакой результат не регистрируется.

Как вы можете видеть (и вы можете попробовать) ничего не получил журнал. Кто-нибудь знает, как подключиться к консоли с помощью console.log ?

Update:

Я нашел этот сайт я отладка имел свою собственную console.log реализации, чтобы войти вратарь консоль, поэтому ничего не обнаружилось.

Кто-нибудь знает, как позвонить RAW/Original console.log , который использует браузер?

Создан 13 окт. 15 2015-10-13 11:47:39 bodacydo

Это работает для меня. Очень чистая установка Chrome (

4 дня). Какие плагины вы используете в Chrome. http://imgur.com/auPkWjJ – michaelbahr 13 окт. 15 2015-10-13 11:51:15

У меня нет плагинов — это новая установка Chrome . – bodacydo 13 окт. 15 2015-10-13 11:52:49

был обновлен ваш хром Google? Если проблема по-прежнему сохраняется, я думаю, вы должны переустановить свой хром, потому что я пробовал с другим ноутбуком, он отлично работает! – Farid Blaster 13 окт. 15 2015-10-13 11:54:50

Думаю, я знаю, что происходит — веб-сайт, на котором я отлаживаю, переопределил console.log с его собственной реализацией! – bodacydo 13 окт. 15 2015-10-13 11:55:39

Теперь мой вопрос становится — как вызвать RAW (оригинал) console.log . – bodacydo 13 окт. 15 2015-10-13 11:55:54

Не можете ли вы просто выполнить ‘delete console.log()’ для восстановления собственного кода? – Anthony Sherratt 24 окт. 15 2015-10-24 00:34:23

@ AnthonySherratt Да, я могу. Это работает! Пожалуйста, отправьте ответ за щедрость! – bodacydo 24 окт. 15 2015-10-24 20:11:35

Цукерберг рекомендует:  GeekWeek. Итоги конкурса по PHP
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих