Copy a string representation of the specified object to the clipboard with Chrome DevTools

lukaspolak

Lukas Polak

Posted on April 4, 2020

Copy a string representation of the specified object to the clipboard with Chrome DevTools

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

// 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);
Enter fullscreen mode Exit fullscreen mode
// The same function as above but without constants
copy(
  Array.from(
    document.querySelectorAll(".speakercolumn title-heading-left")
  ).map((speaker) => speaker.textContent)
);
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
lukaspolak
Lukas Polak

Posted on April 4, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related