Chrome devtools как пользоваться

Содержание:

Начинающему 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 правил и много других параметров. Далее пользователю выводится сгруппированных список рекомендаций за счет выполнения которых можно существенно оптимизировать скорость загрузки и отзывчивости страницы.

26 октября 2015

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

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

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

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

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

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

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

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

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

  • Перейдите на панель «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».

Копирование запроса для 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.

12. Reveal in Elements

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

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

–> 13. View Event Listeners

  • 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.

–> 15. Media Query

  • 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

  • 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.

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

Chrome Devtools горячие клавиши и другие полезности при разработке от Google:

Что такое Google Chrome DevTools?

Инструменты разработчика Google Chrome, также известные как Chrome DevTools, — это инструменты для создания и отладки веб-сайтов, встроенные прямо в браузер. Они обеспечивают разработчикам более глубокий доступ к их веб-приложениям и браузеру. Вы можете делать все, начиная с тестирования вашего видового экрана на мобильном устройстве и заканчивая редактированием HTML / CSS на лету, используя даже для измерения производительности отдельных активов вашего сайта.

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

Вы можете улучшить свою разработку, используя chrome://flags разрешая экспериментальные функции в инструментах разработчика. Затем вы можете использовать панель настроек в инструментах разработчика для переключения отдельных экспериментов.

Для активации экспериментальных функций dev панели включите данный пункт:

Открытие Chrome DevTools

Есть несколько способов открыть Chrome DevTools.

1. Откройте меню браузера

Вы можете открыть Chrome DevTools из меню Chrome, нажмите «Дополнительные инструменты», а затем нажмите «Инструменты разработчика».

2. Открыть нажатием правой кнопки мыши

Вы также можете щелкнуть правой кнопкой мыши по любому элементу на веб-странице и нажать «Посмотреть код», который запустит Chrome DevTools.

3. Открыть с помощью клавиш быстрого доступа

Вы также можете использовать следующие сочетания клавиш:

  • Windows: F12 или Ctrl + Shift + I
  • Mac: Cmd + Opt + I

Советы и приемы

Ниже приведены несколько из нескольких сотен вещей, которые вы можете сделать с Chrome DevTools . Это также способствует хорошему курсу на инструменты, если вы не использовали их раньше. Примечание. Мы используем Google Canary для всех этих примеров, поскольку есть более новые функции, такие как палитры дизайна материалов и агрегированные данные временной шкалы.

Быстрое переключение файлов

Вы можете легко получить доступ к любому файлу в текущем проекте или веб-странице, нажав Ctrl + P ( Cmd + P), когда Chrome DevTools открыт и ищет имя.

Pretty Print <>

Знаете ли вы, что в Chrome DevTools имеется красивое форматирование как сжатых стилей, так и сжатых java script? Вы можете легко изменить форматирование вводимого кода, нажав <>, который вернет к нормальному виду на самом деле сжатый код.

Редактирование HTML-элемента

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

Изменить свойства CSS

Как и при редактировании HTML, вы также можете изменить CSS в Chrome DevTools и просмотреть, как будет выглядеть результат. Это, вероятно, одно из самых распространенных применений для этого инструмента. Просто выберите элемент, который вы хотите отредактировать, и под панелью стилей вы можете добавить / изменить любое свойство CSS, которое вы хотите.

Поиск в исходном коде

Вы можете быстро выполнить поиск в своем исходном коде, нажав Ctrl + Shift + F ( Cmd + Opt + F).

Вы также можете выполнить поиск с помощью селекторов CSS, нажав Ctrl + F( Cmd + F

Точки остановки Javascript

При отладке Javascript иногда бывает полезно установить контрольные точки. Вы можете установить контрольные точки в Chrome DevTools, щелкнув по номеру строки, который вы хотите разбить, и нажмите Ctrl + R( Cmd + R), чтобы обновить страницу. Затем страница будет работать прямо до этой точки остановки.

Перейти к номеру строки

Вы можете автоматически перейти к строке вашего кода, нажав Ctrl + O ( Cmd + O) и используя синтаксис строки. В приведенном ниже примере мы набрали :200:10 и нажали enter, чтобы перейти к строке 200 столбца 10.

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

Есть ли у вас несколько строк, которые нужно добавить? Возможно, вы хотите добавить font-size в несколько классов. Вы можете легко добавить несколько курсоров, нажав Ctrl + Click( Cmd + Click) и одновременно вводя информацию на несколько строк. Это очень удобный трюк.

Изменение положения стыковки DevTools

Вы также можете изменить положение стыковки Chrome DevTools. Есть три варианта выбора: Bottom, Side и Undocked (плавающий). Для переключения между положениями док-станции вы можете нажать Ctrl + Shift + D ( Cmd + Shift + D). Затем в правом верхнем углу выберите положение в котором должна находится док-станция.

Очистка файлов cookie

Вы также можете легко очистить файлы cookie с помощью Chrome DevTools. Это может быть особенно полезно при тестировании и отладке сторонних плагинов. Просто перейдите на вкладку «Ресурсы» и в разделе «Куки» вы можете щелкнуть правой кнопкой мыши и удалить все файлы cookie, хранящиеся в вашем браузере.

Режим устройства

Вы можете протестировать свой веб-сайт и мультимедийные запросы что бы убедиться что срабатывает адаптивная верстка, перейдя в режим устройства. Или, возможно, вам нужно увидеть, на каком разрешении экран как отображается страница, поэтому вы знаете, где применять медиа-запросы. Чтобы войти в режим устройства, щелкните значок маленького телефона в Chrome DevTools или вы можете нажать Ctrl + Shift + M( Cmd + Shift + M). Затем вы можете выбрать, какое устройство вы хотите эмулировать, ориентацию и даже разрешение. Вы также можете изменить дросселирование сети, чтобы увидеть, как ваш веб-сайт будет отображаться на обычном 2G-соединении.

Читайте также:  Как вызвать линейку в ворде 2010

Пользовательские цветовые палитры и набор цветов

В Google Chrome Canary создатели представили новые пользовательские цветовые палитры и палитры материалов, которые извлекаются из CSS вашего сайта. Вы можете получить к ним доступ, просто нажав на цветной блок на панели стиля. Существует также выбор цвета, который вы можете использовать для выделения цветов со своей веб-страницы.

Изменить формат цвета

Вы можете переключаться между RGBA, HSL и шестнадцатеричным форматированием, нажав Shift + Click на цветной блок.

Датчики эмуляции устройства

Приятной особенностью Chrome DevTools является то, что вы можете даже имитировать сенсорные экраны. Для этого нажмите Консоль, эмуляция и датчики.

Переключить состояние элемента

Вы когда-нибудь пытались выяснить, откуда приходит скрытый стиль, скажем: атрибут hover? В Firefox инструментарий dev позволяет увидеть это при выборе элемента, но не в Chrome DevTools. Однако в Chrome DevTools есть кое что лучше, называемое состоянием элемента переключения. Это позволяет принудительно ввести состояние элемента:

Копировать изображение как URI данные (закодированные в base64)

Вы можете сохранить любое изображение с веб-страницы в виде URI данных или, скорее, закодировать в base64. Нет необходимости использовать бесплатный онлайн-конвертер, поскольку он уже встроен в Chrome DevTools. Для этого просто нажмите на панель «Сеть», щелкните изображение, а затем щелкните его правой кнопкой мыши и выберите «Копировать изображение в качестве URL-адреса данных».

Затем вы получите изображение в следующем формате: » URURIsdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAFt…»

Показать агент пользователя Shadow DOM

Когда вы имеете дело с вещами, такими как кнопки и входы, веб-браузер обычно создает скрытые атрибуты. Чтобы увидеть эти щелчки в настройках, нажмите F1( ?), вы можете включить «Показать пользовательский агент DOM». Как вы можете видеть в этом примере, мы теперь можем видеть, что строящийся теневой корень #, который строится. Вы даже можете сделать этот шаг дальше и применить стили CSS к скрытым атрибутам.

Выберите следующее происшествие (вия)

Chrome DevTools позволяет легко выбрать следующее вхождение, а затем применить изменения одновременно по всем разделам. Чтобы сделать это, просто дважды щелкните то, что вы хотите изменить, затем нажмите Ctrl + D ( Cmd + D) для каждого события, которое вы хотите выбрать, а затем, когда вы введете его, одновременно измените все из них.

Workspaces — подключение локальных файлов к проекту

Очень мощная функция Chrome DevTools — это рабочие области . По умолчанию, когда вы меняете что-то в инструментах разработчика, они исчезают после обновления страницы. Это прекрасно для небольших настроек здесь и там, но рабочие области фактически позволяют вам сохранить эти изменения, сохранив их на вашем диске.

Для этого щелкните правой кнопкой мыши по папке и выберите «Добавить папку в локальную рабочую область». Затем, чтобы сделать ее постоянной, щелкните правой кнопкой мыши файл и выберите «Карта для файлового системного ресурса …».

Сетевой диафильм

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

Для этого щелкните панель «Сеть», щелкните значок камеры и нажмите Ctrl + R( Cmd + R), чтобы обновить страницу. Затем он покажет вам, как ваша страница отображается от начала до конца.

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

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

Чтобы запустить этот кликните на панели «Временная шкала» и нажмите Ctrl + R( Cmd + R), чтобы обновить страницу. Затем вы можете щелкнуть на панели «Сводка» в панели «Агрегированные».

DOMContentLoaded

В инструментах разработчика вы можете точно увидеть время DOMContentLoaded и общее время загрузки. Чтобы запустить это кликните на панели «Сеть», нажмите «Показать обзор» и нажмите Ctrl + R( Cmd + R), чтобы обновить страницу. Синяя линия появится для DOMContentLoaded вместе с красной строкой для общего времени загрузки. Обычно все, что осталось от синей линии или касается ее, — это активы, которые блокируют DOM или называются ресурсами блокировки рендеринга.

Профили демпфирования сети

Теперь вы можете добавить настраиваемые профили дросселирования сети. Это может быть полезно, если вы хотите более точно протестировать совй проект с определенной скоростью.

Чтобы добавить настраиваемый профиль, щелкните панель «Сеть» и выберите раскрывающийся список «Дросселирование». Затем вы можете нажать «Добавить настраиваемый профиль …» и ввести имя, пропускную способность и задержку.

Панель безопасности

Chrome добавил еще одну отличную особенность в средствах разработчика под названием «Панель безопасности».Даная панель может быть очень полезной для отладки HTTPS-миграций и быстрого исправления предупреждений о смешанном содержании. Чтобы запустить кликните на панели «Безопасность» и нажмите Ctrl + R( Cmd + R), чтобы обновить страницу. Затем он отобразит защищенные сценарии в зеленом цвете и незащищенные сценарии в красном цвете.

Проверка Google AMP HTML

Google Accelerated Mobile Pages (AMP) — новая инициатива с открытым исходным кодом для ускорения работы мобильной сети с использованием облегченных HTML-страниц. Чтобы Google индексировал версию вашей версии AMP, вы должны убедиться, что она проверена. Для запуска щелкните на панели «Консоль». Затем вам нужно добавить #development=1версию AMP в адресную строку браузера. Затем нажмите Ctrl + R( Cmd + R), чтобы обновить страницу. Затем произойдет отображение. Узнайте больше об ошибках проверки AMP .

Использовать инструменты разработчика Firefox в Google Chrome

Знаете ли вы, что вы можете запускать Firefox Developer Tools в Google Chrome? Valence — экспериментальное дополнение от команды Firefox, которая позволяет Firefox Developer Tools отлаживать более широкий спектр браузеров. Valence требует Chrome 37.0 или выше.

Основная часть содержимого — перевод данной статьи:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector