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
1// NodeList of document's elements that match the selectors
2const speakers = document.querySelectorAll('.speakercolumn .title-heading-left')
3
4// Create an Array from NodeList, because NodeList is not iterable with `map()`
5const speakersArray = Array.from(speakers)
6
7// Iterate through `speakersArray` to get `textContent` from every speaker (item of array)
8const speakerTextContent = speakersArray.map((speaker) => speaker.textContent)
9
10// copy the final result to clipboard
11copy(speakerTextContent)
index.js
1// The same function as above but without constants
2copy(
3 Array.from(
4 document.querySelectorAll('.speakercolumn title-heading-left')
5 ).map((speaker) => speaker.textContent)
6)

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

Share this post on Twitter