DevTools: Getting data from DevTools into your code editor

Introduction

Using your browser DevTools, you can easily copy objects and HTML from DevTools, into your code editor (or bug tracker, chat message etc.)

In the Console Panel, type in:

copy(document.body);

Now when you paste, you get the entire HTML contents!

I use this quite often when working with JavaScript objects or arrays of objects. Especially when the array was particularly large, and working in DevTools felt a bit fiddly. Check this out:

// In the console panel
copy({
    beep: "boop",
    arr: [1, "yes"],
    location,
});

Now I can paste this in my editor, a GitHub issue, anything!:

{
    "beep": "boop",
    "arr": [1, "yes"],
    "location": {
        "ancestorOrigins": {},
        "href": "https://umaar.com/",
        "origin": "https://umaar.com",
        "protocol": "https:",
        "host": "umaar.com",
        "hostname": "umaar.com"
        // and so on
    }
}