You can copy() from the console

Avatar of Chris Coyier
Chris Coyier on

You can in Blink/WebKit, anyway. You can’t directly in JavaScript, as I’m sure that’s some security (or good taste) issue that just isn’t allowed. Sites that do it tend to rely on Flash. But it works in the console, and that can be all kinds of useful!

Your own little screen-scraper

This is how I find it the most useful. There is some content on a page, but it’s not very easy to copy-and-paste with your mouse for whatever reason. Maybe some of it is hidden. Maybe it’s intermingled with stuff you don’t want.

But, it’s easy enough to use some quick JavaScript selectors to get your hands on what you want.

Imagine you’re looking at the CSS-Tricks Almanac.

And your goal is to get a comma-separated list of all the CSS properties. There are a number of ways to do it, but building your own quick little screen scraper in the console will do nicely.

var allItems = document.querySelectorAll(".property-list .children a");

var csv = "";

[], function(item) {
  // do whatever
  csv += item.text + ", ";


Here it is output to the console, but it’s on the clipboard as well for easy moving.

I’ve even used it in the past on to build a JSON object in just the format I wanted!

var newJSON = "[", name, url, thing;

$(".table-striped tbody tr").each(function(i, el) {

  thing = $(el);

  name = thing.find("td:first a").text();
  url = "https:";
  url += thing.find("td:last p").text();
  token = url.split("/");
  token = token[token.length - 1];
  token = token.split('.');
  token = token[0];

  newJSON += '{\n';
  newJSON += '  "name": "' + name + '",\n';
  newJSON += '  "value": "' + url + '",\n';
  newJSON += '  "tokens": ["' + token + '"]\n';
  newJSON += '},';


newJSON += "]";


Have you ever used copy() for something you found useful?