How to copy an object from Chrome Dev Tools?

Sep 16, 2022

1 min read


programmer-with-chrome

So how did I got into this?

The other day I was working on a project from Frontend Mentor specifically the REST Countries API with color theme switcher challenge. So I ran into this problem where I was trying to define all the types of the whole object that I received by from the http Response to validate it with Zod.

I was fetching the data from the rest countries API to print the response on the console of Chrome Dev Tools. So I questioned myself, how can I copy the response from the console? I tried to copy the response but it didn’t work.

So I started to search on the internet and I found this small tip to copy the response from the console. Next I found out that there were 2 options to copy the response from the console.

Option 1

The first option is to right click on the response and click on the Store as global variable option. After that you can copy that temporary variable from the console writing inside de console copy(temporaryVariable). Finally you can paste the response wherever you want.

first-option-to-copy-response-gif

Option 2

The second option is to right click on the response and click on the Copy object option.

second-option-to-copy-response-gif