Я использую инструменты разработчика Chrome для просмотра веб-сайта для клиента, и было бы неплохо, если бы я мог экспортировать результаты графика времени.
Возможно ли это?
Я использую инструменты разработчика Chrome для просмотра веб-сайта для клиента, и было бы неплохо, если бы я мог экспортировать результаты графика времени.
Возможно ли это?
Предполагая, что вы ссылаетесь на вывод схемы водопада на панели network
, вы можете щелкнуть правой кнопкой мыши заголовок диаграммы (или любое пустое место в самой диаграмме) и выбрать "Скопировать сетевой журнал как HAR", чтобы вытащить данные диаграммы в ваш буфер обмена.
HAR - это формат, который понимают многие инструменты; для создания хорошей диаграммы водопада, чтобы обсудить с вашими клиентами, взгляните на что-то вроде HAR Viewer. Я думаю, что это удовлетворит ваши потребности.
Это не совсем просто, но, похоже, работает достаточно хорошо!
Сначала вам нужно получить временную шкалу в 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 файлы.
Если вам нужен быстрый и простой способ захвата данных на сетевой панели, вы можете щелкнуть правой кнопкой мыши по любой строке отображаемых данных, выбрать все, а затем скопировать и вставить содержимое в Excel.
Excel действительно хорошо справляется с захватом табличного макета данных, плюс один раз в Excel вы можете манипулировать данными в соответствии с вашими потребностями.
Один из недостатков заключается в том, что он не фиксирует эти аккуратные графики водопада, созданные в Chrome, но я полагаю, что возможность графа Excel может компенсировать это!