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?
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.
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.
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.
Here's what I do.
Edit: This works in the Scope Variables which is below the Watch Expressions panel.
Double click on the value to switch to edit mode.
Ctrl+A (windows) or Cmd+A (mac) to select the entire value.
Ctrl+C (or Cmd+C) to copy.
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.
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
Related
I am new to the DOM and I am console logging things so I can see what my code is doing to my website without implementing it right away.
I have read the documentation about console.log and console.dir
I am confused because I am using VS code and sometimes my console.log() behaves as a console.dir() when I am looking at the chrome console.
This is frustrating me because to check if an attribute I am creating is working as I want it to, I have to scroll down all the properties to find the one I want.
For an example, if I am logging a variable xyz that is a div with a class of test.
input --> console.log(xyz)
output --> div.test
the output has a drop down with all the possible properties of div... many of them null. If I scroll down to className it says test so I know it worked correctly
How do I get it so it shows
This would make everything I do much faster
It does this sometimes but if I refresh it reverts back to that JSON like tree
I'm working in JavaScript and something is mysteriously changing the value inside of one of my objects.
It is most certainly nothing that I've coded myself - it's very likely a 3rd party package, and a very very complicated one at that.
Is there some way to have Chrome Developer keep track of the value of something inside of an object and, once it changes, alert the user as to what function in the code caused it to change?
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is Chrome’s JavaScript console lazy about evaluating arrays?
Basically what I am finding is that google chrome is having issues with it's developer tools.
Take this snippet for example:
console.log($(this).find(' .buttons .cancel'));
$(this).find(' .buttons .cancel').remove();
When that snippet is triggered, if there are two items that match those selectors google chrome outputs [, ]. basically it is finding the elements, but it seems to be slower at displaying the data than it should be.
I want to be able to log what items I am deleting, but as it stands I must run it first without the .remove() line. and then after I know that is working I can run it again with the remove() function.
Consider the following test:
a={a:'a'}. It returns an object.
a.a='b'
expand the return from the first command. It shows a: "b"
So, an object is always shown in the state it is in when it first gets open in the Chrome developer console. For (pseudo-)arrays, what matters is the state of the object when the console gets to it. This could be right after the normal javascript returns (hard to tell why. Performance reasons, perhaps).
You can handle this by always logging elements that don't change, such as:
primitive values: console.log("hello")
clones of DOM nodes or jQuery objects: console.log($(this).find(".buttons .cancel").clone())
If logging an immutable object is not an option, you can still log while tracing the code: console.log(document); debugger;
If you pass an object to Google Chrome's console.log() that is not a primitive value like string or a number, it does not output that object's contents immediately. Probably due to some interprocess communication, there is some delay in actually getting the data from the object and outputting to the console. This will/can cause problems if you are immediately modifying the same object as you won't necessarily get the right thing displayed in the console.
One work-around is to only pass finished strings to console.log(). Since strings are immutable, they will never get changed by anything else so you won't get deceived by console.log().
In your case, you are removing the DOM elements in the next line of code. Because of Chrome's timing weirdness, this removes the DOM elements before console.log() can actually see what they are and output them. You could do something like this instead which makes the displayed string immediately and passes that string to console.log():
console.log($(this).find(' .buttons .cancel').toString());
I would like to be able to save the state of the html page after I've interacted with it.
Say I click a checkbox, or the javascript set the values of various elements.
How can I save the "javascript-rendered" page?
Thanks.
In Chrome (and apparently Firefox), there is a special copy() method that will copy the rendered content to the clipboard. Then you can do whatever you want by pasting it to your preferred text editor.
https://developers.google.com/chrome-developer-tools/docs/commandline-api#copyobject
Console Example:
copy(document.body.innerHTML);
Note: I noticed Chrome reports undefined after the method is run, however, it seems to execute correctly and the right content is in the clipboard.
That should do and will grab the ALL page not just the body
console.log(document.getElementsByTagName('html')[0].innerHTML);
document.body.innerHTML will get you the HTML representation of the current document body.
That will not necessarily include all internal state of DOM objects because the HTML contains the initial default state of objects, not necessarily the state that they may have been changed to. The only way to guarantee you get all that state is to make a list of what state you want to save and actually programmatically get that state.
To answer the part of your question about saving it, you'll have to describe more about what problem you're really trying to solve.
To get the equivalent of view source with javascript rendered, including doctype and html tags, copy the command into the chrome console:
console.log(new XMLSerializer().serializeToString(document.doctype) + document.getElementsByTagName('html')[0].outerHTML);
In the chrome console, hover at the end of the output and click on the copy link to copy to the pasteboard.
ive been writing a website for about 3 days and i ran into a problem. i have a textfield that changes a span on the page using javascript, and this works fine on firefox and ie. but on google chrome it just returns "[object DOMWindow]" no mater what i change. the code is way to long to post so i would just like to ask if anyone knows what causes this?
My best guess without seeing code would be you're using the this keyword, which behaves differently in different browsers. this refers to the window element any time that it is not in a different context. Check to make sure you are either using a library that normalizes the this keyword (like jQuery) or are explicitly getting the text field every time.