Вы МОЖЕТЕ запихивать что-то в свой буфер обмена из 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. Если вы хотите, чтобы другие ознакомились с этой статьей, не забудьте нажать и удерживать кнопку аплодисментов. 😉