CODEWITHSUNDEEP
javascriptdebugginggoogle-chromecopy-paste
siamii
siamii

Reputation: 24084

How to copy watched javascript variable in Chrome?

I put a breakpoint in javascript and am testing some code with Chrome. I also added a watch expression for the value.

Chrome breaks at the breakpoint and shows the value. However the value is very long, and it doesn't display it all. I move the window separator to the left but it stops at mid screen. When I double click on the watched variable it wants to edit the expression. When I single click and drag on it, it selects the visible text, but not all. Right clicking does nothing.

This is what I see 

url: "m=mtgoxUSD&SubmitButton=Draw&r=&i=&c=0&s=&e=&Prev=&Next=&t=S&b=&a1=&m1=10&a2=&m2=25&x=0...

I want to copy the whole expression without the ... in the end. How can I do that?

Upvotes: 42

Views: 26338

Answers (6)

emackey
emackey

Reputation: 12383

Chrome DevTools' console command-line has a built-in "copy" function:

copy(my_variable)

If the value of my_variable is not a string, it will automatically be converted to JSON. The resulting string is left on the system clipboard for pasting.

Here's the reference doc.

Upvotes: 38

Soham Mehta
Soham Mehta

Reputation: 604

This link has amazing descripion: https://scottwhittaker.net/chrome-devtools/2016/02/29/chrome-devtools-copy-object.html

Steps: 1) Right click variable and select "Add as Global Variable" 2) In the console, write copy(temp1) 3) Open any editor and paste

Upvotes: 1

Matteo Conta
Matteo Conta

Reputation: 1449

Look this answer "Is there a way to auto expand objects in Chrome Dev Tools?" , it iterates trough all the properties of an object and it shows the full hierarchy including datatype and values.

Useful if you need to compare two states of an application.

Upvotes: 1

uraimo
uraimo

Reputation: 19791

I'm adding a late answer after nearly 3 years because with the current Chrome Dev Tools, neither approach work if you have an Array or even just a nested Object property in that variable, following both answers you'll just end up copying a string with a lot of Array[size] or Object strings interleaved in the actual object value, completely useless for complex object hierarchies.

The suggested approaches are ok if you just need to manually navigate through the value but not if you need to copy it as requested in the question.

What i recommend instead, especially if you need to copy the watched value to use it as the content of a new variable, is to dump it to console after it has been stringified.

Show the Javascript console and type:

console.log(JSON.stringify(my_watched_var))

This way the complete structure will be displayed in pure Javascript, a fully reusable/copyable way.

Upvotes: 51

Łukasz Nojek
Łukasz Nojek

Reputation: 1641

Show the console, then type the expression to be displayed and press . You'll see whole value and you'll be able to select and copy it.

While the debugger is paused, this works even with expressions that involve local variables that are in scope at the current point of execution.

Upvotes: 27

Ben
Ben

Reputation: 21249

Here's what I do.

Edit: This works in the Scope Variables which is below the Watch Expressions panel.

  1. Double click on the value to switch to edit mode.

  2. Ctrl+A (windows) or Cmd+A (mac) to select the entire value.

  3. Ctrl+C (or Cmd+C) to copy.

Upvotes: 13

Related Questions