debugging javascript without knowing exact breakpoint location - javascript

I would like to debug a javascript file named somescript.js, to have an idea what it is used for and when. This file has lots of functions. Manually setting breakpoints in each function would be very tedious.
Is there a method in any browser to either:
Automatically set breakpoints at the beginning of every function in
somescript.js file, or
Tell the debugger to pause next time when it reaches any function in
somescript.js
I know there is a button "Pause on exceptions" but it results in stopping inside libraries (jquery). After pressing "Step out" many times it finally reaches a function in somescript.js - one function. I need to know what the rest of the functions are doing, but don't know when they are called.

I'm not aware of any capability to set a breakpoint at the start of every function in a module. I think what you will need to do is to study the code a bit and figure out what the main entry points are in the module or figure out which functions you most want to trace and understand and then set breakpoints in those specific functions.
One can often search for the installation of event handlers and figure out where various actions start, set breakpoints there and then step through them to learn how that particular action works.
Sometimes this is an iterative process too. As you step through some things, you learn enough about other good places to set breakpoints. Keep in mind that once you hit a breakpoint, you can also look at the call stack and see how you arrived there and perhaps set breakpoints further up the call chain for the next time you execute that function. Debugging/learning like this is a bit of an art. You find a place to start, trigger that breakpoint, learn some things that lead you to other breakpoints to set, learn some more and so on.

Related

Continuing a javascript after using .click() on a button which adds new DOM elements

I am a lowly operations employee without authorization to change the programs and permissions on my machine, and I would like to automate some highly repetitive data entry. I know there are a lot of programs that can do that, however, for the sake of this discussion we'll assume that I'm not allowed to have any of them and I can only script through the debug F12 menu in Chrome. I also probably don't understand half of these words as well as I should.
I have to run test cases on a third-party vendor's highly dynamic website, and I've already successfully written javascript which adds texts to elements in the DOM and presses the "next" button.
The problem is, upon .click()ing the "next" button, it takes time for the page to update, and the update creates new elements which weren't in the DOM when the script was initialized. I need to find a way to delay the execution of the script until the DOM contains all the elements I need to update.
As a really, really crude proof of concept I wrote the pre-filler for each page as a function, and I serially called each function at the end of the previous function, using setTimeout(nextfunct, 10000) to let the page update before executing the next line. (I was going to refine that by trying to create some kind of object listener instead of an arbitrary 10 second delay, but I wasn't even able to get that far.) This approach creates two errors.
1) The script seems to be checking whether the elements are on the DOM before the end of the setTimeout(), so it still gives me an error. If nextfunct is defined as
document.getElementById("doesntexistyet").value = "Fill Me";
console.log("nextfunct ran");
I will get the error message stating there is no element with the id "doesntexistyet" immediately, not after a delay of 10 seconds. The element on the next page will not update.
2) The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console. If I comment out the missing element, so the function only prints a comment, it will still not appear in my console. However, if I comment out the code and I switch the setTimeout to 1ms, "nextfunct ran" will appear in my console, until the page updates, at which time the console will be deleted.
Are there ways around this which I can implement using only vanilla JS and a browser? I'm sure there's a keyword I can search for where someone has discussed this before, but it seems like the vast majority of JS autofilling discussions are oriented towards people designing code to be integrated into a website,
Thanks

How to check if JavaScript file is yet to loaded or loading

I am doing GUI automation of my website via Selenium (RobotFramework). The problem I am facing is:
When my automation script clicks on some element (button,link etc) which is supposed to perform some action, it dose nothing. This happening randomly. When we test is manually, it works all the time. One observation is, with slower machine/environment, this tends to happen more.
I suspect this is happening either due to some corresponding JS is not loaded yet or if there is any such thing called "action binding" with each elemetnt, has not happened.
Some question
- Is there a way to find out if all the JS calls are over?
- In case action binding happens, has it already bound or not.
Please share if you have any other solution.
do you know what is last to load on the page? This should be very easy to find out via Developer Tools in your browser of choice.
You can then easily use a Wait Until Keyword (there are many variations) to wait until that last item appears as you expect, then continue with your test. Setting the timeout length and interval will help control the overhead of time/performance.
Wait Until Element Is Visible id=finalElement 10 finalElement did not appear on the screen before timeout period
http://robotframework.org/Selenium2Library/Selenium2Library.html - please see the documentation for further examples and options in terms of keywords

Chrome developer tool trace function sequences

I am a newbie to Chrome developer tool and I found it is very powerful. Currently, I am looking for a way to trace the flow of functions when I open a webpage and also, I am wondering is there s how can I find which function does an element trigger when it is clicked. Here are some examples:
1) Tracing function sequences:
For example, there are 20 functions in my script. Some of the functions will call the other functions. I would like to trace the function calls. Like which function is called first and then what functions are called following by this function. Since these 20 functions are pretty huge, it is quite hard to follow the sequence by just looking at the script.
2) Which function does an element trigger in javascript:
For example, I have one button on the webpage, there is one or are more functions associated with this element. By using the Event Listener of Chrome developer tool, I can only see some DOM elements under "Click" rather what function it is associated with.
Is there a way to find associated functions?
I appreciate you help!
In Sources panel, there is a Call Stack tab, in which you could see the function call stack when code execution was halted at break points.
In Elements panel, there is an Event Listeners tab, in which you could see all event handlers bond to the element, as well as where it is in source code.
I suggest you to read some tutorials, for example this and this, and there are more. So that you could know more about it and boost your development.

Is there a way to see what Javascript functions (the name of the functions) execute in real time in Chrome's Inspector?

For example, pretend there is Javascript code that will execute someFunction() when a button is clicked and I click that button. I wonder if there is some way to see that someFunction() was just executed. Is there a way to see what functions are executed in Chrome in real time?
If it is the Profiles tab in the inspector that does the trick, how exactly do you tell what functions fire in real time with that?
EDIT 1/21/2012 12:36p Pacific: From Brian Nickel's comment below, the Timeline tab in the Inspector is the way to see what happens in realtime, but how do you see the names of executed functions in the Timeline?
The Timeline and Scripts developer tool can be used to accomplish this goal.
Open the developer tools panel and press Record under Timeline to begin tracking activity.
Trigger the event you are interested in (i.e., in your example, click on the button), then stop recording (or continue to record, but be cogniscent of the amount of data you are collecting).
Note the entires logged in the Timeline panel. Find the relevant event, and click the twistie arrow to the left of the timing bar for that event. This will expose the function calls associated with that event.
Click on link to the right of the function calls to see the relevant JavaScript. (You ask for a function name, but keep in mind that the event may be associated with an anonymous function, so there isn't always a name available.)
If you want to step through the event handler itself, insert a breakpoint at the line after the handler's declaration (presuming the event handler declaration is greater than one line). Alternatively, expand the Event Listener Breakpoints in the Scripts panel and check off the appropriate event type (as listed in the Timeline panel for the relevant event). Note that this approach will break on every instance of that event, instead of the sole invocation you are interested in.
If you are running into trouble with minified JavaScript and inserting breakpoints (because each line is so long), here's a tip: open the minified script file in the Scripts panel via the dropdown, then click on {}. This will enable Pretty Print, expanding the minified code into something more readable by adding whitespace. This allows you to insert breakpoints more granularity. Note that if you now return to the Timeline panel, script references (e.g., jquery.min.js:3) now use the pretty-printed line numbers, not the minified, whitespaceless ones.
There are a lot of good utilities you can use: console.trace();, debugger, etc.

Why is there an apparent lack of a "Next" option in Firebug's JavaScript debugger?

Seems that the JavaScript debugger is lacking a very basic feature: Next.
"Next" (like in PDB the Python debugger) should execute the current line and stop. Seems pretty basic.
Now maybe I'm completely missing something (which is why I ask), but I understand the existing commands to work as follows:
Step Into: descend into the body of current function
Step Over: execute the current function w/o descending
Step Out: move back up the stack
Resume: continue running until the next breakpoint
My reading shows that Step Over should be equivalent to "Next" but it doesn't appear to be. I just want to execute the line, w/o descending, ascending, or having to set another breakpoint imemdiately after the line I'm on. I'm very accustomed to type "n n n n n n" in PDB to step through code line by line. Firebug seems to be missing this...or I'm missing it ;-)
Finally, I also feel that "previous" or "back" should be available. With that enticing "playhead" in the leftmost column, it would be great to be able to drag that thing around, executing the line of code as it goes. I can dream.
Any clarification on this would be helpful.
The "Step over" function does not mean, "skip the next line". It means to execute it, but should it contain a function call, to treat the statement itself as the unit of work. In other words, the "over" just means, "don't step into any functions involved".
In my experience "previous" or "back" are the kinds of features that can only really be supplied by either an extremely sophisticated debugger, or else for languages that are by nature very conducive to such things. Something like Firebug is almost certainly barred by the nature of browser reality from actually implementing those. Consider what it would mean to back up over a statement that removed an element from the DOM. Firebug would have to ask the browser to give it back, and I'd bet money that there's just no way to do that (at least not without Firebug becoming even more gigantic and expensive than it already is :-)
I guess you mean that you don't want to click on the "Step Over" button several times to move to the next line. You need a button that directly move you to the next line. There is no "Next" button but you can use "Run to this Line" command in the context menu.
There are some research tools which let you to move backwards but they are not still practical.

Categories