Copy a String Representation of the Specified Object to the Clipboard with Chrome Devtools

November 12, 2018

TL;DR: If you want to copy a string representation of the specified object to the clipboard, you can use a Command-Line API function copy().

Exercise

Go to WeAreDevelopers World Congress Speakers website, open the developer tools and follow the code bellow

index.js
// NodeList of document's elements that match the selectors
const speakers = document.querySelectorAll('.speakercolumn .title-heading-left')
// Create an Array from NodeList, because NodeList is not iterable with `map()`
const speakersArray = Array.from(speakers)
// Iterate through `speakersArray` to get `textContent` from every speaker (item of array)
const speakerTextContent = speakersArray.map((speaker) => speaker.textContent)
// copy the final result to clipboard
copy(speakerTextContent)
index.js
// The same function as above but without constants
copy(
Array.from(
document.querySelectorAll('.speakercolumn title-heading-left')
).map((speaker) => speaker.textContent)
)

That’s it. Pretty simple right? Thanks for the reading.

Share this post on Twitter