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
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.
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.
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.
Related
as the pic shows, only the variables local to the function are shown and the current thread(humanPlayer)
i havent knowingly changed any settings?
im struggling to debug my code for the last few hours and id love help on how to get this back to normal
this usually opens up the actual object and i can peek inside and see its variables which is how i usually go about debugging
it usually shows everything thats in the current class rather than function
I have a variable inside a Provider which I want to see its value (because its value is cleaning and I don't know why) in debug, but I don't know how to see it.
How can I debug seeing this variable value while I'm navigating in the app??
Place breakpoint
Run in Debug mode (F5 is the shortcut for VSCode)
Open the window 'Debug Console' (Found in the 'View' menu in VS code)
Type in the variable name in the command prompt
The variable representation is printed on the console. You can click, browse and navigate the data structure as well.
I suggest create setter for that variable and use it everywhere in your code (where this variable is changed).
Then place brakepoint to this setter. This way you will be able to track whenever variable is changed.
put debug point where the value of provider is used,
or you can use flutter devtools in browser, there will be tab called provider which will show all active providers and its data
Event listener breakpoints in Google Chrome Devtools offers various number of options, but for me, they are not really of great use since they always throw me to some irrelevant part of code.
What I would like to know is if it is possible to limit it to just one class? For example onMouseClick send me to the 1st method that executes after mouse click, inside specific class. If none of the methods are fired inside this class, than simply do nothing.
You can set the breakpoints for each script and each line individually.
First open the debug-tools and chose a script in the sources-tab:
Then you can click on the line-number (here only no. 1) and it looks like this:
As you see now is the line marked, but also in the right col your individual breakpoint is listed.
After having marked the breakpoint you still have to reload the page that the scripts are executed again till to the breakpoint. Afterwards you can use the icons above the right col to step in or step over the commands following the breakpoint.
Having minified scripts, breakpoints are hard to use, so it's better to have a script where each line has only one command, it's much easier then to debug.
So for debugging you should change the corresponding script in your page to the non-minified version, perhaps also with a map-file if available.
I am trying to run an automated test and one of the steps of a test case is to clear the Ace Editor and insert text in it.
Earlier I had regular content editable DIV and I was able to insert text in it but not anymore after switching to Ace Editor.
All I am doing is calling "clear" method on the element and then "sendText" on it.
I tried adding "click" method before clear to make sure Ace Editor does have the focus and it did bring the focus to Ace Editor but it still throws an error that element should be user-editable to clear it.
I also tried putting a sleep of 5s before clearing it just in case, Clearing is getting triggered before Ace makes the div contenteditable.
Here's the exact error to be precise.
Failed: invalid element state: Element must be user-editable in order to clear it.
Tricky question.
Since Ace Editor is not native browser element, i looked up on api that they are provide. Seems like you can use .selection.selectAll() and .removeLines()
If i would be you - i would try to call JS function, that selects everything, and calls .removeLines()
await browser.executeScript(`editor_reference.selection.selectAll(); editor_reference.removeLines()`) // variable will be diferent, depending how you connected editor object
http://www.protractortest.org/#/api?view=webdriver.WebDriver.prototype.executeScript
https://ace.c9.io/#nav=api&api=editor
You can see how it works right on their example page (https://ace.c9.io/) - execute this in browser console, editor should get cleared:
editor.selection.selectAll(); editor.removeLines()
send ctrl-a keys (cmd-a on mac) to select all before typing, so that clearing is not needed
I have no experience working with Ace editor before. I used demo ace editor from https://ace.c9.io/build/kitchen-sink.html to find a solution for the issue you are facing.
I tested the below piece of code in the demo Ace editor and it works fine.Not sure how the ace editor is implemented in your application.You can try it in your application and provide your thoughts.
browser.actions().mouseMove($(".ace_active-line")).click()
.sendKeys(protractor.Key.chord(protractor.Key.COMMAND, "a"))
.sendKeys(protractor.Key.BACK_SPACE)
.sendKeys("content in line1\ncontent in line2")
.perform()
If you are using windows machine then use protractor.Key.CONTROL instead of protractor.Key.COMMAND.
Hope this will work fine!
So, I'm trying to implement a looping mode in the totem movie player. I would like to do this by adding a checkbox under "Edit" that turns looping on.
I'm trying to figure out what code gets called when "Edit" and the "Shuffle Mode" option under it is clicked. Is there any easy way to find where the appropriate event handler is?
My usual method of code reading (stepping through it with the debugger) didn't work because this is a GUI program, and as soon as you get to the main loop it doesn't stop until there's a breakpoint, and where to put the breakpoints is basically what I'm trying to find out.
I've been using Netbeans for this, and I should note that I can't use Eclipse.
Thank you.
The UI for Totem and the callback names for each element defined in the GtkBuilder file, data/totem.ui.
http://git.gnome.org/browse/totem/tree/data/totem.ui
This file says that the handler for the "Shuffle Mode" action is shuffle_mode_action_callback. Then you can use grep:
grep -r shuffle_mode_action_callback totem-git/src
The result of this command indicates that this function is defined in src/totem-menu.c.