Есть ли способ экспортировать графики времени из инструмента разработчика Chrome?

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

Возможно ли это?

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

Это не совсем просто, но, похоже, работает достаточно хорошо!

  • Сначала вам нужно получить временную шкалу в Dev Tools и щелкните правой кнопкой мыши где-то и "Осмотреть элемент". Это откроет другую версию Dev Tools, с доступным HTML.

  • Вам нужно скопировать это по праву нажав на тег <html> и выбрав "Копировать как HTML".

  • Вставьте это в текстовый редактор и сохраните его как html файл.

  • Просмотрите следующие URL-адреса в Chrome и сохраните эти файлы в том же месте, что и html файл. chrome-devtools://devtools/DevTools.js chrome-devtools://devtools/devTools.css

  • Измените места в теге <head> в сохраненном html, чтобы указать на эти файлы.

  • Сохраните все изображения на вкладке "Ресурсы" в папке "Изображения" в нижней части места, где находится этот файл. Это займет много времени, извините! Я думаю, что все они будут содержаться в файле Chrome "resources.pak", который находится в каталоге установки Chromes, однако я не смог найти простой способ его извлечь.

  • Просмотр HTML в браузере должен показать вам, что вам нужно, очевидно, как только вы извлекли ресурсы, js и css, вы можете просто скопировать и вставить разные версии временной шкалы в разные HTML файлы.

Ответ 3

Если вам нужен быстрый и простой способ захвата данных на сетевой панели, вы можете щелкнуть правой кнопкой мыши по любой строке отображаемых данных, выбрать все, а затем скопировать и вставить содержимое в Excel.

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

Один из недостатков заключается в том, что он не фиксирует эти аккуратные графики водопада, созданные в Chrome, но я полагаю, что возможность графа Excel может компенсировать это!