«   Previous tip Next tip   »

DevTools: Getting data from DevTools into your code editor

Last updated: 31st March 2023


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:


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
    beep: "boop",
    arr: [1, "yes"],

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
«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week