DEV Community

Lukas Polak
Lukas Polak

Posted on • Edited on • Originally published at lukaspolak.com

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.

Top comments (2)

Collapse
 
the_riz profile image
Rich Winter

I see you just wrote this, but the above doesn't work -

  1. While .speakercolumn is defined in an appended <style>, it is otherwise not currently found in the document.

  2. I fear Chrome may have just killed off copy()

Collapse
 
lukaspolak profile image
Lukas Polak

Hello Rich, thanks for your comment! I really appreciate the feedback.
I have tried it on Chrome 80, Firefox Developer Edition 75 and Safari 13.1 and everything worked as expected. I can see the speakercolumn class in the DOM, so I wasn't successful with reproducing the problem, can you please try this snippet:

const speakers = document.querySelectorAll(
  ".fusion-row .title-heading-left"
);

and then log speakers
With this snippet you will get more NodeLists than speakers (76) can you please confirm it?

I fear Chrome may have just killed off copy()
I'm not sure if I understand you. I haven't found any information about that Chrome will kill some of the Console Utilities APIs. Can you please clarify it for me? Thanks a lo!