Консоль девелОпера изученная на лекции это

Консоль разработчика — JS: DOM API

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

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

Анализ ошибок

Все ошибки, которые происходят в браузерном js, выводятся в консоль. Их можно не только посмотреть, но также и открыть исходник, чтобы изучить место возникновения ошибки.

Выбранный элемент

Выбрав таким образом элемент, можно переключиться на вкладку console и набрать $0 . Так вы получите доступ к этому элементу.

Are there Cheats to Stranded Deep? How to use The Developer Console Stranded Deep | PC Only

Поиск

Используя функцию $() можно упростить поиск элементов по селектору. Сравните:

Источник

Инструменты тестировщика. Панель разработчика Chrome

Google Chrome включает в себя огромный набор функционала для тестирования сайтов веб-разработчиком. Панель разработчика открывается нажав F12:

Панель разработчика Google Chrome

Elements

Найти нужный тег в древе не сложно, есть 2 способа. Способ первый — перед Elements в меню находятся 2 иконки, вторая из которых перевод сайта в мобильную версию (не надо даже телефон покупать, всё итак видно верстальщику), а первая — выбрать элемент на странице. Достаточно нажать на первую кнопку, выбрать нужный блок и кликнуть по нему левой кнопкой мыши, таким образом у нас откроется именно данный тэг для корректировки. Метод второй, более быстрый — сразу правой кнопкой мыши нажать на нужный участок сайта и выбрать «Просмотреть код».

Майкрософт проверка адреса электронной почты

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

Теперь поговорим о правой колонке — styles и computed. computed — финальная версия всех стилей применённых к тегу. Помните я говорил о том, что браузер по умолчанию имеет перечень свойств у тега, а мы их лишь меняет на нужные нам, так вот тут и есть этот самый перечень финальной версии, то есть вместе с изменёнными нами свойствами. Если посмотреть внимательно, то можно заменить интересную особенность, что почти все теги имеют одни и те же свойства с разными значениями, а это говорит о том, что практически весь сайт можно сверстать используя всего 1 или 2 тега, что кажется и абсурдным, но возможным В первой же колонке Styles указаны именно изменёнными нами стили (нашими таблицами стилей). В данной вкладке мы можем поменять влияние стилей как на данный тег работая в блоке element.style, так и изменять по id и class для всех элементов на сайте.

Тестировщик с нуля / Урок 14. Что такое DevTools для тестировщика? Инструменты разработчика Chrome

Console

Console в панели разработчика Google Chrome

Без неё и жизнь не мила у любого программиста Абсолютно все WARNING и ERROR записываются в данный блок. Убедитесь, что у вас выводятся все ошибки проверив следующим образом: нажмите на иконку filter в данном разделе и выберите вкладку «all», то есть выводить все ошибки.
Логи сохраняются в рамках данной страницы с момента открытия консоли, а не загрузки страницы. Поэтому если загрузить страницу, а после открыть консоль, то ошибок вы не увидите, хотя ошибки на странице присутствуют! Поэтому сначала мы открываем консоль, а потом перезагружаем данную страницу! Теперь справа от ошибки будет указываться файл на котором произошла ошибка и даже сама строчка. Хочу заметить, что в консоль так же попадают ошибки различных установленных плагинов и расширений для Google Chrome включая вирусы (они тоже прописываются как плагин или расширение).

Как изменить кодировку в браузере

Работая с JavaScript можем столкнуться с тем, что по клику происходит переадресация на другую страницу в формате: click — ошибка — переадресация, а ошибка произошла перед строчкой, которая должна была заблокировать переадресацию и поэтому в консоли пусто. Решается всё предельно просто, установите галочку Preserve Log, и тогда логи не будут очищаться после перезагрузки или переадресации страницы.

Sources и Network

Отличный способ промониторить все входящие и исходящие запросы и их результат выполнения. Во вкладке Sources мы можем увидеть все подгруженные дополнительные файлы, а именно картинки и скрипты. Самый простой способ достать нужную картинку, глянуть на её размеры, сохранить к себе на комп. Открыть JavaScript файлы там так же можно. По клику правой кнопкой на нужный файл можно выбрать пункт «Open link in new tab», и уже с новой страницы сохранить файл нажав комбинацию ctrl+s .

Network более сложный функционал, тут перечень всех запросов и их ответов с сервером. Обратите внимание на то, что тут так же есть Filter — All, а так же Preserve log, это очень важно!

Network monitoring в панели разработчика Google Chrome

Ваш внешний вид данного раздела может немного отличаться, там может быть включен overview (соответствующая иконка с графиками), что я обычно выключаю. В левой колонке у нас запросы, в правой идут ответы. При этом ответы так же разделены на подразделы. Первый запрос всегда идёт к исполняющему файлу (указан url), если закрыть правую колонку, то можно увидеть подробности запроса, а именно: метод запроса, как долго он выполнялся (что будет свидетельствовать на сколько сеть и сайт работают хорошо, объем файла. Закрыв правую колонку можно вновь открыть повторно кликнув на интересующий нас файл для анализа.

Preview и Response

После запроса сервер возвращает нам что-либо, в Preview попадёт удобный для человека вид, а в Response — неотформатированный исходник. На примере запроса изображения во вкладку Preview попадёт сама картинка, а исходный код картинки по соображениям морали будет скрыт, но вот если Вы запросили HTML, JS, PHP файлы, то как раз заглянуть во вкладку Response стоит обязательно для того, чтобы убедиться, что там вернулся именно тот контент, который мы запросили и ожидаем увидеть!

Как обновить интернет эксплорер до последней версии
Источник

Отладка Front-end: Console

Разработчики пишут код и допускают ошибки, конечно, не намеренно, но все же. Чем старше ошибка, тем труднее ее найти и исправить. В этой серии статей я попытаюсь показать, что вы можете сделать, используя Google Chrome Devtools, плагины Chrome и WebStorm.

Этот туториал будет посвящена Console Chrome, наиболее часто используемому инструменту для отладки. Наслаждайтесь!

Консоль

Чтобы открыть Chrome DevTools:

  • Выберите «More Tools» > «Developer Tools» в главном меню Chrome.
  • Правй щелчек мыши на любомм элементе странице > «Inspect».
  • Нажмите Command + Option + I (Mac) или Control + Shift + I (Windows, Linux).

Посмотрите вкладку «Консоль» и что там есть.

0

Первая строка
— очистить консоль

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

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

Настройки:
Скрыть сеть — Скрыть сетевые ошибки, такие как 404.
Сохранения логов — Консоль будет сохранять логи между обновлениями или навигацией.
Только выбранный контекст — мы можем изменить контекст журналов в [top].
Только пользовательские сообщения — cкрыть предупреждения, созданные с помощью браузера [нарушение].
Логи XMLHttpRequests — тут нечего объяснять.
Показывать временные метки — отметки времени отображаются в консоли ниже.
Автозаполнение из истории — Chrome помнит, что вы набрали 😉

Выбранный API консоли

Консоль будет запускать каждый JS код, который вы наберете, в контексте вашего приложения. Поэтому, если что-то доступно в глобальной области, вы можете легко увидеть его через консоль. Вы также можете просто ввести и увидеть результат выражения, например: «null === 0».

console.log — описание

По определению console.log отображает вывод в консоль. Это та часть, которую вы, вероятно, знаете; что может быть для вас новым, так это то, что console.log сохраняет ссылку на объект, который вы выводите. Посмотрите на код ниже.

При отладке объектов или массивов вам нужно быть осторожными. Мы видим, что fruits до модификации содержат 3 объекта, но их больше нет. Чтобы увидеть результаты в этот конкретный момент, используйте JSON.stringify , чтобы сохранить информацию видимой. Конечно, это может быть неудобно для больших объектов. Не волнуйтесь — позже мы найдем лучшее решение.

Гугл Хром это только поисковая система

console.log — сортировка свойств объекта

Гарантирует ли JavaScript порядок свойств объекта?

4.3.3 Объект — Третье издание ECMAScript (1999)
Объект является членом типа Object. Это неупорядоченный набор свойств, каждый из которых содержит примитивное значение, объект или функцию. Функция, хранящаяся в свойстве объекта, называется методом.

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

Сюрприз! Chrome сортирует свойства в алфавитном порядке, чтобы помочь нам. Я не могу решить, нравится мне это или нет, но хорошо это иметь ввиду.

console.assert(выражение, сообщение)

Console.asser t выдает ошибку, если вычисленное выражение false . Существенно, что assert не останавливает дальнейшее выполнение кода. Это может помочь отладить длинный и запутанный код или найти ошибки, которые проявляются после нескольких итераций.

console.count(ярлык)

Проще говоря, это console.log , который подсчитывает, сколько раз он был вызван с тем же выражением. С ТЕМ ЖЕ САМЫМ.

Как вы можете видеть в примере, была подсчитана только одна и та же строка.

console.table()

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

Отлично. во-первых, вы все хорошо разместили в таблице; во-вторых, вы также добавили console.log . Хорошая работа Chrome, но это еще не все.

Мы можем решить, хотим ли мы увидеть все или только некоторые столбцы всего объекта.
Таблица сортируема — просто нажмите на заголовок столбца, который вы хотите отсортировать.

console.group() / console.groupEnd();

На этот раз мы начнем с кода. Посмотрим, как работает группировка для консоли.

Отлично, если вы работаете с данными. Копнем глубже.

console.trace();

trace выводит трассировку стека в консоль. Полезно знать, особенно если вы разрабатываете библиотеки или фреймворки.

console.log vs. console.dir

Здесь реализация зависит от браузера. Первоначально dir должен был хранить ссылку на объект, тогда как log нет. (лог показывал копию объекта). Теперь, как мы видели раньше, лог также сохраняет ссылку. Давайте остановимся тут, поскольку они отображают объекты по-разному. Не особо сложно и полезно при отладке HTML-объектов.

Как сбросить кэш в файрфокс

$_, $ 0 — $ 4

$_ возвращает значение последнего оцениваемого выражения.
$0 — $4 — работает как историческая ссылка на последние 5 проверенных элементов HTML.

getEventListeners(объект)

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

monitorEvents(DOMElement, [events]) / unmonitorEvents(DOMElement)

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

Выбор элементов в консоли

Чтобы открыть этот экран, нажмите ESC на вкладке Element.

Если нет ничего другого, связанного с $

$() — document.querySelector() . Возвращает первый элемент, соответствующий селектору CSS (например, $(‘span’) вернет первый span).
$$() — document.querySelectorAll() . Возвращает массив элементов, соответствующих CSS селектору.

Копирование выведенных данных

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

Нажмите правой кнопкой мыши на объект и нажмите Copy или Save as global. После этого вы можете работать с сохраненным элементом в консоли.

Все, что в консоли можно также скопировать, используя copy(‘object-name’) .

Стилизуем вывод консоли

Представьте себе, что вы работаете над библиотекой или большим модулем, с которым будет работать вся ваша команда/компания. Было бы неплохо выделить некоторые логи в режиме dev. Вы можете это сделать — попробуйте код ниже.

console.log (‘%c Truly hackers code! ‘, ‘background: #222; color: #bada55’);

% d или % i — целое число
% f — значение с плавающей запятой
% o — расширяемый элемент DOM
% O — расширяемый объект JS
% c — форматы вывода с помощью CSS

Это все на сегодня, но не все в этой теме. Ниже вы найдете ссылки для дальнейшего чтения.

Присоединяйтесь к нашим каналам FrontEndDev и Web Stack в Telegram чтобы не пропустить самое интересное!

Источник
Рейтинг
Загрузка ...