Skip to main content

How to Copy an Object or Array from the Chrome DevTools Console

When debugging JavaScript, you often need to inspect the contents of an object or array. A common next step is to copy that data to your clipboard so you can paste it into your code editor for analysis or use it as a fixture in a test. The Chrome DevTools provides several easy ways to do this.

This guide will teach you the two most effective methods for copying objects and arrays: the direct "Copy object" command and the more flexible approach using the copy() command with a global variable. You will also learn where to find your data in the different DevTools tabs.

Method 1 (Easiest): Right-Click and "Copy object"​

This is the fastest way to get an object or array from the Console onto your clipboard.

The logic:

  1. Log the object or array you want to copy using console.log().
  2. Right-click on the logged object in the Console panel.
  3. Select Copy object from the context menu.

Example:

const user = {
  id: 123,
  name: 'Alice',
  roles: ['editor', 'viewer'],
  address: {
    city: 'New York',
  },
};

console.log(user);

In the Chrome DevTools Console:

  1. Run the code. The object will be printed to the console.
  2. Right-click the object's entry.
  3. Click Copy object.

The object is now on your clipboard as a JSON string, ready to be pasted. This works for deeply nested objects and arrays.

Method 2 (More Flexible): "Store as global variable" and copy()​

Sometimes you need to modify an object or select just a part of it before copying. The DevTools copy() command is perfect for this.

The logic:

  1. Get a reference to the object. The easiest way is to right-click it in the Console and select Store as global variable. DevTools will create a temporary variable for you (e.g., temp1).
  2. Use the copy() command, which is built into the DevTools console, to copy that variable to your clipboard.

Example:an object to the console as in the previous example. 2. Right-click the object and select Store as global variable. The console will respond with the name of the new variable (e.g., temp1). 3. In the console prompt, type the following and press Enter:

copy(temp1);

The console will return undefined, and the contents of temp1 will be on your clipboard. This is more powerful because you can manipulate the variable before copying:

// Example: Copy only the user's roles
copy(temp1.roles);

// Example: Copy the entire object as a formatted string
copy(JSON.stringify(temp1, null, 2));

Where to Find Your Objects and Arrays​

You can apply these two methods in several different tabs within the Chrome DevTools.

In the Console Tab​

This is the most direct place. Any object logged with console.log() can be right-clicked to access the "Copy object" and "Store as global variable" options.

In the Network Tab​

This is essential for inspecting API responses.

  1. Open the Network tab and trigger an API request on your page.
  2. Click on the request in the list to open its details.
  3. Go to the Response or Preview sub-tab.
  4. You can right-click directly on the object or array in this view to access the Copy object and Store as global variable options.

In the Sources Tab (During Debugging)​

When you are paused at a breakpoint, you can copy any object or array that is currently in scope.

  1. Open the Sources tab and set a breakpoint.
  2. When the code execution pauses, find the variable you want to copy in the Scope panel on the right.
  3. Right-click the object or array to access the Copy object and Store as global variable options.

Handling Special Cases (Circular References)​

If you try to copy an object that references itself (a circular structure), standard JSON methods will fail.

const myObj = { name: 'test' };
myObj.self = myObj; // Circular reference

copy(myObj); // This might fail or produce a generic "[object Object]"

When you use copy(), the solution often consists of an implicit use of a JSON-like conversion. To handle circular references, you can't use standard JSON.stringify(). While DevTools' native "Copy object" is often smart enough to handle this, if you are using copy() and run into issues, you may need a custom library to serialize the object if the circular references are important. For most cases, simply copying a non-circular part of the object is sufficient.

// Copy just the part you need
copy(myObj.name);

Conclusion​

Copying data from the Chrome DevTools is a simple but essential debugging skill.

  • The quickest method is to log an object to the console, right-click it, and select Copy object.
  • For more control, right-click and Store as global variable, then use the built-in copy() command on that variable or its properties.
  • These same techniques work for data found in the Console, Network, and Sources tabs, giving you access to any data your application is using.

Table of Contents