Javascript / Chrome - How to copy an object from the webkit inspector as code

Taming circular references

If you've got circular references (an object referring to itself), JSON.stringify() might let you down. Not to worry, a custom replacer function can help you avoid these recursive nightmares.

Example:

// Our replacer function: A conqueror of circular references!
function replacer(key, value) {
  if (value === window) return "window";
  return value;
}

const data = { user: "Coder", score: 100 };
data.self = data; // "self": data's ego, referring to itself 😋

// "copy": No fear of circular references here!
copy(JSON.stringify(data, replacer)); 


The global variable trick

For quick access, park your object as a global variable in Chrome's DevTools:

1. Find your object in the Elements or Console panel.
2. Right-click and opt for "Store as global variable".
3. Access the object with the automatically assigned name (like temp1).

Network tab: AJAX & API responses

To copy AJAX-generated data or API responses, follow these steps:

1. Open DevTools (F12) and switch to the Network tab.
2. Perform the action that triggers the request.
3. Click the request and find the Response or Preview tab.
4. Right-click and select "Copy" → "Copy response".

Example:

// "response": The secretly cooked magic potion from our AJAX-/API call 🧙‍♂️
copy(response); 


Chrome 89+: The "Copy Object" command

If you're on Chrome 89 or later, you can use the "Copy Object" command to directly copy an object formatted as JS code.

Paste the data

To deploy the copied object, CTRL+V (Windows) or CMD+V (Mac) is all it takes. Paste it into your Code Editor or another Console.