Маяк

1. Начать
2. Run Lighthouse в Chrome DevTools
3. Установите и запустите инструмент командной строки Node
4. Запустите модуль Node программно
5. Запустите Lighthouse как расширение Chrome
6. Поделиться и просматривать отчеты онлайн
7. Поделиться отчетами в формате JSON
8. Поделиться отчетами как GitHub Gists
9. Поспособствуйте Маяку

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

Вы можете запустить Lighthouse в Chrome DevTools, из командной строки или в виде модуля Node. Вы даете Lighthouse URL для аудита, он запускает серию аудитов на странице, а затем генерирует отчет о том, насколько хорошо эта страница прошла. Оттуда используйте неудачные аудиты как индикаторы того, как улучшить страницу. Каждый аудит имеет справочный документ, объясняющий, почему аудит важен, а также как его исправить.

Запустить маяк в Chrome DevTools bug_report Подать проблему

Посмотрите видео ниже из Google I / O 2017, чтобы узнать больше о том, как использовать и вносить свой вклад в Lighthouse.

Начать

Выберите рабочий процесс Lighthouse, который подходит вам лучше всего:

Run Lighthouse в Chrome DevTools

Lighthouse теперь поддерживает панель Audits в Chrome DevTools. Чтобы запустить отчет:

1. Скачать Google Chrome для рабочего стола ,
2. В Google Chrome перейдите по URL, который вы хотите проверить. Вы можете проверить любой URL в Интернете.
3. Открыть Chrome DevTools ,

4. Нажмите вкладку Аудит .

   Рисунок 1 Слева находится окно просмотра страницы, которая будет проверяться. Справа находится панель Аудит Chrome DevTools, которая теперь работает на Lighthouse.

5. Нажмите Выполнить аудит . DevTools показывает вам список категорий аудита. Оставьте их всех включенными.

6. Нажмите Запустить аудит . Через 60-90 секунд Lighthouse выдаст вам отчет на странице.

   Рисунок 2 Отчет Lighthouse в Chrome DevTools

Установите и запустите инструмент командной строки Node

Чтобы установить модуль Node:

1. Скачать Google Chrome для рабочего стола ,
2. Установить текущий Долгосрочная поддержка версия Узел ,
3. Установить Маяк. Флаг -g устанавливает его как глобальный модуль. НПМ установить -G маяк

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

маяк <url>

Чтобы увидеть варианты аудита:

маяк - помощь

Запустите модуль Node программно

Увидеть Использование программно для примера запуска Lighthouse программно, в качестве модуля Node.

Запустите Lighthouse как расширение Chrome

Чтобы установить расширение:

1. Скачать Google Chrome для рабочего стола ,

2. Установите Маяк Хром Расширение из интернет-магазина Chrome.

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

1. В Chrome перейдите на страницу, которую вы хотите проверить.

2. Нажмите Маяк , Он должен быть рядом с адресной строкой Chrome. Если нет, откройте главное меню Chrome и откройте его в верхней части меню. После нажатия меню Lighthouse раскроется.

   Рисунок 3 Маяк меню

3. Нажмите Создать отчет . Lighthouse проводит аудит на текущей странице, а затем открывает новую вкладку с отчетом о результатах.

   Рисунок 4 Маяк отчет

Поделиться и просматривать отчеты онлайн

Использовать Lighthouse Viewer просматривать и делиться отчетами онлайн.

Рисунок 5

Маяк Зритель

Поделиться отчетами в формате JSON

Средство Lighthouse Viewer нуждается в выводе JSON отчета Lighthouse. Список ниже объясняет, как получить вывод JSON, в зависимости от того, какой рабочий процесс Lighthouse вы используете:

Чтобы просмотреть данные отчета:

1. Открой Lighthouse Viewer в Google Chrome.
2. Перетащите файл JSON в средство просмотра или щелкните в любом месте средства просмотра, чтобы открыть навигатор файлов и выбрать файл.

Поделиться отчетами как GitHub Gists

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

Чтобы экспортировать отчет в виде Gist из версии Lighthouse для Chrome Extension:

1. Нажмите Экспорт > Открыть в средстве просмотра . Отчет открывается в средстве просмотра, расположенном по адресу https://googlechrome.github.io/lighthouse/viewer/.
2. В средстве просмотра нажмите « Поделиться». , Когда вы делаете это в первый раз, всплывающее окно запрашивает разрешение на доступ к вашим основным данным GitHub, а также на чтение и запись в ваши списки.

Чтобы экспортировать отчет как Gist из CLI-версии Lighthouse, просто вручную создайте Gist и скопируйте и вставьте вывод JSON отчета в Gist. Имя файла Gist, содержащее вывод JSON, должно заканчиваться на .lighthouse.report.json. Увидеть Поделиться отчетами в формате JSON для примера того, как генерировать вывод JSON из инструмента командной строки.

Чтобы просмотреть отчет, который был сохранен как Gist:

• Добавьте? Gist = <ID> к URL-адресу средства просмотра, где <ID> - это идентификатор Gist.

  https://googlechrome.github.io/lighthouse/viewer/?gist= <ID>

• Открой зритель и вставьте в него URL-адрес Gist.

Поспособствуйте Маяку

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

Похожие

Комментарии