Devtools Chrome что это за программа

Используем Chrome DevTools как про

Как следует из названия, Chrome DevTools, или веб-инспектор, является инструментом, предназначенным для веб-разработчиков и людей, связанных с этим. Веб-инспектор позволяет делать следующее:

• Инспектировать корректность отображения.
• Отслеживать исполнение скриптов на JavaScript.
• Просматривать сетевые действия.

При составлении этой статьи я использовал Canary — версию Chrome, где тестируются новые возможности, которые затем попадают в стабильную версию Chrome.

Для того, чтобы запустить инспектор, можно кликнуть правой клавишей мыши в любом месте страницы и выбрать пункт «Просмотреть код элемента», также можно просто нажать Ctrl + Shift + C.

Быстрое редактирование HTML-элементов

Начнём с самого простого: редактирование элементов.

• Выберите вкладку «Elements».
• Выберите любой HTML-элемент внутри панели.
• Дважды кликните по тегу и измените, например, имя тега.

По завершении редактирования закрывающий тег автоматически обновится.

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

Раскрыть все дочерние элементы

• Перейдите на панель «Elements».
• Выберите элемент и, удерживая Alt, кликните по стрелочке слева от элемента.

Изменение расположения инспектора

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

• Ctrl + Shift + D — Переключение расположения

Поиск DOM-элементов

Наверное, мало для кого это окажется открытием, но во вкладке «Elements» можно производить поиск по DOM.

• Нажмите Ctrl + F и введите предполагаемый запрос для поиска.

Палитры

Выбор цвета в последних версиях Chrome претерпел некоторые изменения: добавились две палитры, облегчающие выбор цвета.

• Page Colors — эта палитра автоматически создаётся на основе цветов сайта из CSS.
• Material Design — цвета в этой палитре берутся из палитры материального дизайна.

Несколько курсоров

Переместите курсор и, удерживая Ctrl, кликните в нужном участке для добавления курсора. Отменить действие можно с помощью Ctrl + U . Лично мне ни разу не пригодилось.

Кодировать изображение в base64

• Переключиться на панель «Network».
• Выбрать изображение
• Кликнуть правой клавишей по изображению и выбрать «»

Переключение псевдоклассов

Псевдоклассы отражают состояние элементов и их взаиморасположение.

• Кликните ПКМ по элементу в панели «Elements» и выберите псевдокласс в списке «Force Element State».
• Также псевдокласс можно выбрать в правой части панели «Elements».

Выделение столбцом

• Перейдите в панель «Sources».
• Выберите какой-нибудь файл.
• Выделяйте текст, удерживая Alt.

Выделение столбцом работает также и при редактироавнии HTML в панели «Elements».

Devtools для тестировщика | Devtools chrome | Что такое Devtools

Копирование запроса для cURL

Любой запрос во вкладке Network можно скопировать, а затем вставить в терминал для исполнения с помощью curl.

11. Get the current element with «$0»

• Select «Elements» panel.
• Choose a DOM element within the Elements Panel editor.
• Click Console and write $0 to access it.

Как попробовать, if you choose an a DOM node:

• Right click on it within the Console panel.
• Select «Reveal in Elements Panel».

• Select the «Elements» panel.
• Navigate to the Event Listeners and choose an event.
• You can also view source by right click and choose «Show Function Definition» in context menu.

14. Easing Previews

• Click the easing icon (purple icon) and see a preview.
• You can view it via choose other previews or you can set new easing format.

• In Device Mode, click the icon (‘bars’) in the upper left corner of the page.
• Click the breakpoint (‘blue’, ‘green’, ‘orange’) bars and change.

If you right click on a bar, you can reveal its position within the source code.

«Film Strip» shows page rendering screenshots and times from start to finish. You can click a screenshot and view in the timeline-style view.

• Select «Network» panel.
• Click «Camera Icon».
• Reload page.

You can copy the response/request headers of a network resource.

• Выберите панель «Network».
• Choose your file within the Resources Panel.
• Right click and click «Copy Response».

• In the left sidebar: Sources > Snippets
• Right click > Select New
• Enter a file name and write your snippets in the right panel
• Right click on the snippet and select Run

Экранная клавиатура

Если выбран профиль Nexus 5X, можно посмотреть, как сайт выглядит при активной экранной клавиатуре.

Скриншот всей страницы

Сделать снимок всей страницы очень просто. Нужно просто…

1. Открыть инспектор.
2. Перейти в консоль.
3. Нажать Ctrl + Shift + P
4. Набрать «screenshot»
5. Выбрать пункт «Capture full size screenshot»

Эмуляция сенсорных устройств

Также можно симулировать некоторые датчики:

• Сенсорный экран
• Координаты для геолокации
• Акселерометр

• Выберите панель «Elements».
• Нажмите «Esc» и выберите «Emulation > Sensors».

Полезные функции

keys и values

Функции keys и values позволяют вывести в консоль ключи или значения объекта соответственно. 20. Workspaces

• Select «Sources» panel.
• Right click within sources pane and choose «Add Folder to Workspace»
• Choose your file and right click > Map to Network Resources
• Change your file code and view it.

Источник: quasi-art.ru

Быстрое погружение в Chrome Devtools

Chrome Devtools очень мощные инструмент и в этой статье я хотел бы немного разобрать его немного подробней. Показать как использовать панель команд и вызывать нужный инструмент с помощью него.

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

Панель команд дает вам доступ к почти всем особенностям Devtools с помощью одной команды.

Для того, чтобы активировать его, используйте Ctrl + Shift + P.

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

Если вы удалите > и замените его на ? , вы увидите, как получить доступ к другим командам.

Например, вы можете перейти к определенной строке в файле, написав : после нее номер строки, по которой вы хотите перейти.

>screenshots делать разные скриншоты

>resources очистить данные сайта

>appearance переключиться в темный режим

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

Панель источников позволяет просматривать, редактировать и отлаживать файлы. Доступно 5 различных панелей:

• Страница: все ресурсы, загруженные страницей. Вы можете редактировать CSS без необходимости сохранения файла, однако изменения в файлах JavaScript должны быть сделаны через панель Файловая система или Переопределения.
• Файловая система: для локальной разработки. Вы можете использовать Chrome devtools для редактирования файлов из вашего приложения и просмотра изменений.
• Переопределения: для рабочих сайтов вы можете использовать devtools для редактирования файлов с живых сайтов и просмотра изменений.
• Сценарии содержимого: см. Источники из расширений.
• Фрагменты кода. Вы можете написать фрагменты кода для запуска на веб-сайтах.

Изменения в файлах JavaScript:

Файловая система

При локальной разработке изменения в файлах JS могут быть сделаны на панели файловой системы. Для этого выполните следующие действия:

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

Вы сможете увидеть свои изменения после перезагрузки и использовать devtools в качестве редактора.

Переопределение

Вы также можете вносить изменения в файлы JS на рабочих сайтах с помощью панели «Переопределения».

Как сделать это:

• Создайте папку на своем компьютере, чтобы сохранить переопределения.
• Откройте панель Overrides в Chrome и выберите эту папку.
• Перейдите на панель Page , щелкните правой кнопкой мыши файл, который вы хотите отредактировать, и выберите «Сохранить для переопределений» . Вы должны увидеть фиолетовую точку рядом с добавленными файлами.
• Вернитесь на панель Overrides , отредактируйте файл, сохраните и перезагрузите.

Теперь вы сможете увидеть свои изменения на живом сайте.

Изменения в файлах в Overrides работают только при открытых devtools.

Вы можете щелкнуть правой кнопкой мыши по файлам и выбрать «Удалить», чтобы удалить переопределения.

Сниппеты

Сниппеты — это фрагменты кода, которые вы можете запустить на любом веб-сайте.

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

Чтобы создать сниппет:

• Перейти на панель Snippets
• Нажмите на New snippet
• Написать код
• Сохранить
• Щелкните правой кнопкой мыши и запустите.

Вы также можете в любой момент запустить фрагмент из командной палитры, запустив !NAME_OF_SNIPPET .

Мониторинг производительности в реальном времени

Вы можете быстро получить доступ к панели производительности через панель команд, набрав >performance .

Rendering

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

Coverage

Вы также можете получить доступ к тому, сколько кода на самом деле используется на странице, используя команду >coverage . Он покажет вам все CSS и JS файлы, загруженные на странице, отсортированные по неиспользуемым байтам.

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

Это позволяет увидеть, какие фрагменты кода являются хорошими кандидатами для рефакторинга кода.

Monitor

Монитор позволяет отслеживать такие показатели, как загрузка процессора, прослушиватели событий JS, количество восстановленных раскладок и повторных стилей / сек…

Чтобы узнать, какие свойства CSS запускают повторный пересчет стилей, просмотрите этот ресурс: csstriggers.com.

Layers

Эта панель показывает, как ваша страница отображается с высотой слоев в 3D.

На этом пока все, продолжение надеюсь будет позже!)

Источник: dev-gang.ru

Как использовать Chrome DevTools при анализе сайта

354

• Проверка ответа сервера
• Проверка мобильной адаптивности
• Проверка мобильной выдачи
• Региональная поисковая выдача
• Изменение дизайна
• Анализ протокола безопасности
• Анализ скорости загрузки страницы

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

Сегодня рассматриваем только инструменты Google Chrome. Большинство описанных функций можно найти и в других популярных браузерах.

Открывается панель просто:

Правая кнопка мыши (контекстное меню) → «Просмотреть код».

Открыть панель без мыши можно комбинацией клавиш «Ctrl+Shift+C».

Полезные функции Chrome DevTools

Проверка ответа сервера

Обычно ответ сервера проверяется сторонними сервисами. Но на деле вы можете проверить, как отвечает страница, прямо из панели.

1. Открываем целевую страницу + «Ctrl+Shift+C».
2. Вкладка Network. Уже в ней перезагружаем страницу через «Ctrl+F5».
3. Среди всего списка загружаемых url находим наш основной (при наведении показывается адрес страницы).

В колонке Status есть код ответа 200.

Полный список http-заголовков можно увидеть при нажатии на url, во вкладке «Headers».

Уже здесь можно изучить подробнее http-заголовки, которые отдаёт страница. Расшифровка заголовков, которые могут оказывать влияние на индексирование/ранжирование страницы, приведена в нашей статье.

Проверка мобильной адаптивности

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

Как посмотреть

1. В панели выбираем иконку (1) (или нажимаем «Ctrl+Shift+M») и уже можно оценивать, как страница адаптирована для мобильных устройств.
2. В выпадающем списке (2) можно выбрать устройство или через кнопку «Edit» добавить собственное.

Проверка мобильной выдачи

Описанным выше способом можно анализировать выдачу ПС на мобильных.

Как сделать

1. Открываем выдачу + Консоль + Выбираем иконку (1).
2. Снова нажимаем «Поиск».
3. Получаем отображение выдачи на мобильных устройствах.

Региональная поисковая выдача

Браузер позволяет увидеть поисковую выдачу в разных геолокациях.

Как сделать

Открываем дополнительные инструменты в консоли (три точки) + More tools + Sensors.

Далее внимание на «Geolocation» и выпадающий список.

Здесь есть несколько дефолтных геоточек, но их можно дополнить интересующими вас регионами через кнопку «Manage».

Порядок действий для добавления своей геоточки:

1. «Add location» – открывает редактор.
2. Вносите название новой геоточки (в произвольной форме).
3. Lat – географическая широта (вносите в формате десятичных градусов).
4. Long – географическая долгота (вносите также в формате десятичных градусов).
5. Timezone ID – обычно это регион и город.
6. Add – сохранение изменений.

Теперь в вашем браузере заданы нужные регионы для дальнейшей работы. Проверим выдачу Google по запросу «заказать пиццу» в Москве и Минске.

Начнём с Москвы:

1. Гуглим наш запрос «заказать пиццу».
2. Открываем Sensors в консоли, выбираем регион, который мы предварительно уже прописали в браузере. У меня он называется «moscow».

1. Скроллим страницу поиска вниз и нажимаем «Use precise location» или «Обновить».

1. Поднимаемся вверх и снова жмём на лупу. Если браузер запрашивает разрешение на доступ к геоданным, то разрешаем.

В итоге получаем московскую выдачу.

Сменив таким же способом Москву на Минск, получаем белорусскую выдачу:

Изменение дизайна

Часто при анализе сайта, в особенности юзабилити, возникает необходимость «примерить» дополнительные элементы дизайна. И здесь нам тоже помогает DevTools.

Например, мы хотим изменить цвет заливки элемента быстро, не запуская дополнительного функционала. Допустим, мы хотим изменить цвет блока поиска авиабилетов на сайте https://www.booking.com/. Изначально этот блок выглядит так:

Как изменить

1. Стрелкой выбираете нужный элемент.
2. Переходим на вкладку «Styles».
3. Выбираем на палитре новый цвет для нашего блока.

В рамках той же задачи по изменению дизайна может понадобиться быстро заменить/добавить текст.

Как это сделать

1. Открываем вкладку Console.
2. Прописываем следующее – document.designMode=’on’.

Теперь на нашей странице появляется курсор, которым можно изменять текст и даже удалять элементы дизайна. Так мы заменили текст заголовка с «Search hundreds of travel sites at once» на «Hello, world!».

Анализ протокола безопасности

При помощи панели можно получить информацию о безопасности текущей страницы и данные о сертификате безопасности во вкладке Security (она может быть скрыта за значком «>>»).

Вкладка Security показывает не только подключение нашего сайта, но и сторонних сервисов (блок Overview). Например, на изображении ниже мы видим, что сайт не использует протокол безопасности, но внешний сервис на https-соединении.

Анализ скорости загрузки страницы

На вкладке «Audits» можно получить рекомендации относительно скорости загрузки страницы. Анализ проводится инструментом Lighthouse. Для начала браузер предлагает выбирать настройки будущего отчёта – отметьте необходимое либо оставьте галочки по умолчанию. Для подготовки отчёта нажимайте кнопку «Run audits».

Через несколько секунд мы получаем знакомый отчёт о скорости загрузки страницы.

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

Как сделать

1. Вкладка «Network» → значок «Network settings».
2. Ставим галочку на «Capture screenshots», перезагружаем страницу (Ctrl+R).
3. Оцениваем скорость отрисовки анализируемой страницы.

Здесь же вы можете эмулировать сеть. Браузер предлагает online и offline-соединения, Fast и Slow 3G. А также вы можете прописать собственные настройки скорости интернет-соединения через кнопку «Add».

Chrome DevTools – очень информативный инструмент, но в статье мы перечислили наиболее ценные для SEO-специалистов функции. А какие из возможностей DevTools используете вы?

Сомневаетесь в своей SEO-стратегии? Наш специалист подскажет Вам правильное решение!

Подписаться на рассылку

• Руководство по установке и настройке Google Tag Manager для новичков Предлагаем вашему вниманию пошаговую инструкцию по установке и настройке Google Tag Manager (GTM). Здесь же мы расскажем, как с помощью GTM подключить Google Analytics и.
• Word Keeper vs Key Collector Скорость сбора фраз Количество фраз Скорость сбора частот Точность Гибкость настроек Цена Итог Для большинства SEO-специалистов Key Collector является основным инструментом по сбору семантики. Отличную.
• 4 ситуации, когда вам пригодится история выдачи, и как в этом поможет Seolib Ситуация 1: Работа в серых тематиках Ситуация 2: Падение позиций Ситуация 3: Нужно оценить новую для себя нишу (выявить лидеров ниши) Ситуация 4: Слежка за.
• 12 фичей Seolib, о которых вы, возможно, не знали Введение Турбо и AMP-страницы Релевантные и ранжируемые страницы Отчёт по конкурентам Визуализация процента и количества запросов в ТОП-10, ТОП-11–50 Мониторинг ТОПов Синонимы по запросам Геозависимость.
• Обзор ТОП-6 лучших парсеров сайтов Screaming Frog SEO Spider 9.2 ComparseR 1.0.129 Netpeak Spider 3.0 Xenu’s Link Sleuth WildShark SEO Spider Majento SiteAnalayzer Выводы Сегодня представить технический анализ сайта без.

Работала в рекламе, занималась копирайтингом.

Дожила до своих лет, предсказала будущее, вывела в ТОП сайт ветеринарной клиники.

Сейчас помогаю развивать клиентские проекты в SiteClinic.

Девиз: Рано или поздно это придется сделать, поэтому лучше рано.

Источник: siteclinic.ru

Обзор всех инструментов разработчика Chrome DevTools

2017-09-04 в 12:40, admin , рубрики: chrome devtools, Google Chrome, javascript, Блог компании SimbirSoft, инструменты разработчика

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

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

Панель Elements

Используется для выбора и редактирования любых HTML элементов на странице. Позволяет свободно манипулировать DOM и CSS.

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

Все правила разбиты на блоки и упорядочены по убыванию специфичности селектора. Можно на лету менять значения, деактивировать и дописывать новые правила и смотреть как это влияет на отображение. Также для выбранного элемента DOM доступно еще несколько вкладок: Event Listeners — содержит все события относящиеся к данному элементу, DOM Breakpoints — точки останова для элемента и Properties — список всех свойств для элемента. Также могут быть дополнительные вкладки добавляемые расширениями для Chrome.

Ключевые возможности:

• Просмотр и редактирование в лайв режиме любого элемента DOM.
• Просмотр и изменение CSS правил применяемых к любому выбранному элементу в панели Styles.
• Просмотр всего списка событий и свойств для элемента на соответствующих вкладках.

Панель Console

Необходима для логирования диагностической информации в процессе разработки или взаимодействие с JavaScript на странице. Также все ошибки в JavaScript коде, будут выводится здесь с указанием файла и конкретного места в нем где произошла ошибка. Так же в консоль можно выводить XHR запросы. Есть возможность сохранять логи в отдельный файл.
Консоль содержит ряд инструментов и настроек для фильтрации выводимых сообщений, очистки консоли и запрета очистки логов при перезагрузке страницы — Preserve log.

Также консоль может отобразить/скрыть в виде отдельной вкладки находясь на любой другой вкладке и не покидая ее нажав клавишу Esc.

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

Ключевые возможности:

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

Панель Sources

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

Также Sources используется для отладки JavaScript используя брейкпоинты. Для работы с брейкпоинтами предусмотрено большое количество специальных кнопок и доп. возможностей о которых больше можно узнать в официальной документации.

Ключевые возможности:

• Отладка Вашего кода с помощью брейкпоинтов.
• Использование браузера в качестве IDE с помощью Workspaces.
• Запуск сниппетов с любой страницы.

Панель Network

Позволяет мониторить процесс загрузки страницы и всех файлов которые подгружаются при загрузке. Ее удобно использовать для оптимизация загрузки страниц и мониторинг запросов.
На панели отображается таблица всех запросов к данным и файлам, над ней располагаются кнопки для фильтрации нужных Вам запросов, очистки таблицы или включения/отключения записи запросов, кнопки управления отображением таблицы. Также есть дополнительные переключатели: Preserve log — не очищать таблицу при перезагрузке страницы, Disable cache — отключить кэш браузера (будет работать только при открытом Dev Tools), Offline — эмулирует отсутствие интернета, также соседний переключатель позволяющий эмулировать скорость скачивания/загрузки данных и ping для различных типов сетей.

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

Ключевые возможности:

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

Панель Performance

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

Инструмент применяется для улучшение производительности работы Вашей страницы в целом.

Ключевые возможности:

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

Панель Memory и JavaScript Profiler

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

JavaScript CPU Profiler (был вынесен в отдельную панель JavaScript Profiler ) — позволяет узнать сколько процессорного времени занимает выполнение различных частей вашего JS кода.
Take Heap Snapshot — показывает распределение памяти среди JS объектов и связанные с ним элементы DOM.

Record Allocation Timeline — записывает и отображает распределение памяти между переменными в коде. Эффективен для устранения утечек памяти.

Record Allocation Profile — записывает и отображает распределение памяти на выполнение отдельных JS функций.

Ключевые возможности:

• Исправление проблем с памятью.
• Профилирование CPU при работе с JavaScript.

Панель Application

Вкладка для инспектирования и очистки всех загруженных ресурсов, включая IndexedDB или Web SQL базы данных, local и session storage, куков, кэша приложения, изображений, шрифтов и таблиц стилей.

Ключевые возможности:

• Быстрая очистка хранилищ и кэша.
• Инспектирование и управление хранилищами, базами данных и кэшем.
• Инспектирование и удаление файлов cookie.

Панель Security

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

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

Ключевые возможности:

• Окно Security Overview быстро подскажет безопасна ли текущая страница или нет.
• Возможность просмотреть отдельные источники, чтобы просмотреть соединение и детали сертификата (для безопасных источников) или узнать, какие запросы не защищены (для небезопасных источников).

Панель Audits

После выбора нужных настроек и нажатия кнопки Run панель аудита анализирует как загружается страница и затем предоставляет предложения по оптимизации для уменьшения времени загрузки страницы и увеличению ее отзывчивости.

Анализируются такие параметры как: кэширование ресурсов, gzip сжатие, наличие неиспользуемых частей JS кода и CSS правил и много других параметров. Далее пользователю выводится сгруппированных список рекомендаций за счет выполнения которых можно существенно оптимизировать скорость загрузки и отзывчивости страницы.

Источник: www.pvsm.ru