Вы МОЖЕТЕ запихивать что-то в свой буфер обмена из devtools!
Вы когда-нибудь тратили слишком много времени на написание умного маленького скрипта в инструментах разработчика браузера, чтобы получить некоторую информацию со страницы? Может быть, вы пытаетесь создать список повторяющихся персонажей из кинематографической вселенной Marvel (MCU) с их именами и секретными личностями со страницы Википедии…
Или, может быть, вы пытаетесь получить JSON-представление всех фильмов MCU, отсортированных по общей прибыли…
Или, может быть, вы настоящий мазохист и хотите извлечь имена персонажей и актеров «Игры престолов» (GoT) из основной части вики-страницы GoT.
Так или иначе.
Обычно здесь данные записываются в консоль как JSON, а затем вручную выделяются весь текст с помощью курсора. Мало того, что это кошмарная задача с большими наборами данных, она также может иметь неполные данные. Длинные строки (особенно URI данных) сворачиваются в эллипс (…) средствами разработки. Если вы хотите скопировать даже небольшие URI данных, этот подход оставит вас — и я выражаюсь деликатно — полностью опустошен.
Хорошо, как нам сделать это лучше?
С функцией copy()
! Так уж вышло, что инструменты разработки для Chrome, Firefox и Safari (не удалось протестировать с Edge) предоставляют функцию copy()
для помещения всего, что вам нужно, в буфер обмена!
✨🧙🏻♂️ ЭТО МАГИЯ! 🧙🏻♂️✨
Если вы хотите поместить объект, полный данных, в буфер обмена, это так же просто, как упорядочить данные и использовать copy()
:
const bigDataSet = [ ... ] const bigDataSetAsJSON = JSON.stringify(bigDataSet) copy(bigDataSet)
Теперь, если вы вставите куда-нибудь, вы обнаружите, что ваш буфер обмена полон красоты JSON.
Совет. Если вы хотите, чтобы ваши данные были оформлены (с пробелами, разрывами строк и т. д.), вам поможет метод JSON.stringify()
. Например, если вы хотите, чтобы вывод использовал 2 пробела в качестве отступа:
JSON.stringify(bigDataSet, null, 2)
Для получения дополнительной информации о том, что все, что вы можете передать в JSON.stringify()
, ознакомьтесь с документами на MDN.
Вау, Трези! Вы, конечно, умны и удивительны!
О, я знаю. Тем не менее, я ценю то, что ты сказал это. Если вы хотите повозиться с каким-либо кодом в примерах в начале статьи, вы можете найти их здесь, здесь и здесь.
Трези — технолог, специализирующийся на технологиях JavaScript. Вы можете подписаться на него в Medium, Twitter, Twitch или Instagram. Если вы хотите, чтобы другие ознакомились с этой статьей, не забудьте нажать и удерживать кнопку аплодисментов. 😉