How to call function on js object from chrome dev tools?

Question

Say I want to look at an object and so I log it to the console:

console.log(theNoticeObj);

Then using Chrome Dev Tools, I inspect it in the console and change its property theNoticeObj.bounceHeight to 10px

Now if I want to trigger theNoticeObj.bounce() on that object immediately to locate it, is there an easy way to do that from the console?

Thanks

EDIT:

Breakpoints where suggested below, but this freezes execution.

In face what I want is the command line API to work with javascript objects, not just DOM elements. If that were possible I'm sure I would be able to find it. I might go and see if there are any feature requests to that end for chrome. https://developers.google.com/chrome-developer-tools/docs/console#using_the_command_line_api

Ethan Selzer · Accepted Answer · 2013-10-18 18:22:57Z

3

Try adding window.tno = theNoticeObject under the console.log statement. Reload the page and see if you can execute tno.bounce() from the console. If theNoticeObject is still in scope, this should work.

answered Oct 18, 2013 at 18:22

Ethan Selzer

1,75515 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ashley Coolman Over a year ago

That is what I have been doing previously - I was actually looking for a way to do it from the tool itself. But have an upvote for confirming one method.

Praveenram Balachandar · Accepted Answer · 2013-10-18 18:32:09Z

1

You can navigate to the Sources tab and open your javascript file containing the piece of code you want to play with, in this case let us assume it is

console.log(theNoticeObj);

Once you find this line, you can set a breakpoint at this point and when your program execution comes to this line it will halt.

You can then use the Console tab to do operations on all the javascript objects in current local scope, window scope. You can simply call:

theNoticeObj.bounce();

It executes in the current context reflecting changes on the screen.

Hope this helps.

answered Oct 18, 2013 at 18:32

Praveenram Balachandar

1,5851 gold badge13 silver badges16 bronze badges

3 Comments

Ashley Coolman Over a year ago

Have an upvote, but one problem is that this pauses execution - so bounce() will not actually execute until I press play. Which is good for most scenarios, but if I am trying to bounce() just to find the object on screen then this will not work. I guess I am after a "live" solution. I will ammend my question.

Praveenram Balachandar Over a year ago

The execution of the javascript file in which you had added the breakpoint is paused. However the methods you run on console will execute and reflect its changes on the screen.

Praveenram Balachandar Over a year ago

You're right! My apologies, the methods do execute on console and cause changes to the content on screen, but it wouldnt be visible until the execution is resumed. Very good question would be quite useful feature.

vlp · Accepted Answer · 2020-11-16 02:21:09Z

0

Now you can right click any object in the console and use "Store as global variable".

A new console line appears with the name of a new global variable holding reference to the selected object.

answered Nov 16, 2020 at 2:21

vlp

8,2062 gold badges26 silver badges59 bronze badges

Collectives™ on Stack Overflow

How to call function on js object from chrome dev tools?

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related