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

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

27 голосов
/ 10 января 2011

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

Это возможно?

Ответы [ 3 ]

27 голосов
/ 22 апреля 2011

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

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

1 голос
/ 21 апреля 2011

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

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

  2. Вы должны скопировать это по праву нажав на тег <html> и выбрав «Копировать как HTML».

  3. Вставьте это в текстовый редактор и сохраните как HTML-файл.

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

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

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

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

0 голосов
/ 06 сентября 2011

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

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

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

...