My knowledge of JavaScript is very basic, and I'm somewhat familiar with the Chrome console. I am posting here as being uncertain about the correct terms to use, but hope to keep this question short and focused.
I have a browser page that uses JavaScript as certain elements change values. I know basically which .js file is responsible for this, but I would like to:
a) know which function is initially called when an element changes - i.e. be TOLD by the Chrome console.
b) put a "stop" in that function at a certain point, or add a line of code, or determine the value(s) of a local execution context
Are (a) and (b) possible? Using the Chrome console alone? adding console.log('status here is '+this.status) all over is very time-consuming.
Determine the context values (b)
To know the values of the local execution context, you can attach a hanlder function to the change event in your html element and log the value to the console output (console.log(myValue)). For input elements, for exmaple, a simple way to do it is adding the onchange attribute to the html element passing the handler function.
You can also add a breakpoint in the handler function using the F12 Developer Tools. Read more about it here: Google Chrome - Pause Your Code With Breakpoints
Example:
// This function will be called when you change the value and move the focus
// to a different element or when you click enter
function myHandler(input){
console.log(input.value);
}
<input value="123" onchange="myHandler(this);" />
You could also use onkeydown. For more events you can check: W3Schools - Dom Object Events
Event order (a)
Regarding the event order (a), you can reference to ths other question:
What is the event precedence in JavaScript?
Related
I'm trying to build a Tampermonkey user script that modifies the functionality of an event applied to an element.
Let's say the source website have this:
<div id="item_1">…</div>
And within the source website's Javascript:
document.getElementById("item_1").addeventlistener("click", function(){
// Source website's lines of code for the function to be applied on click event occurrence.
}
I know that I can easily overwrite the event functionality by using:
document.getElementById("item_1").addeventlistener("click", function(){
// My lines of code here
}
But what I'm looking for is to first copy the anonymous function that was previously passed-in to the addEventListener method. I want to copy it to a temporary variable so that I can retrieve the original Event Listener attached function back.
There's another question having an answer telling that copying functions of Event Listeners is impossible. I believe this may be possible somehow as I think that the passed-in anonymous function is stored within the heap with some reference. If I'm able to get that reference, I will be able to get a copy for the code to another variable.
I don't have access to edit the source's script. I know that I could have refactored the code to handle event population. Also, I know I can do some manipulation on the source's JavaScript, but I don't want to go this way as my user script code will get too complicated and if the source code was changed a little, my code will be broken easily. I want to easily copy the Event Listener function to a variable I have.
I have a form element with an ng-change handler. I want to programmatically trigger the handler, but without direct inspection of scope. I want to do this because I'm writing a Chrome extension so I can't easily access '$scope' to get the handler.
I have tried the obvious choice of
$(element).triggerHandler('change')
but that doesn't seem to work. See example here: https://plnkr.co/edit/iaz7trxVT09XWBktGhE9?p=preview (in this example I'm logging some lines to console when the change handler runs, but clicking the button doesn't log those lines).
I tried a few other methods found in various threads here, such as trigger() or manual construction of event and fire with dispatchEvent but to no avail. I don't quite understand why the event handler isn't triggering. Can anyone help?
Well, apparently (according to docs), the model change will not be triggered when the value is not changed. An ugly (yet effective) workaround would be to actually change the value briefly:
var v = $('#testField1').val();
$('#testField1').val(0)
$('#testField1').triggerHandler('change');
$('#testField1').val(v)
$('#testField1').triggerHandler('change');
Of course this will trigger the event twice, if this is a problem you could for example use a known "magic value" (e.g. min negative integer) and ignore it.
Alternatively, I'm afraid there is no simple solution: you might need to access the scope / controller to invoke the function you want directly or meddle with angular's event handling.
I am editing a complex website.
Some jQuery functions are called in response to clicking on different elements (links, div, anchor, etc.).
How can I see what JavaScript function is called when I press on an element?
In each of the functions, add a console.log(functionname). so whenever the function is called, you will see a line in console telling you the function's name.
I believe you can do this with the Profile button although I haven't used this myself yet.
you can place a breakpoint on some inside function and see if the program hits it (in firebug you can use script tab for placing breakpoint)
In chrome/safari you can inspect the call stack on any breakpoint. I'm positive that firebug will let you do the same thing.
So set a breakpoint at the place where you wan to see what's calling it and then inspect the call stack to see what chain of calls led you to that point.
Warning: jQuery does a lot of anonymous functions so it can be a little tricky to trace back.
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.
In many website pages, there are a lot of javascript codes to support the functionalities. The programmer can attach the event on the element via many methods. They can add the event directly in the element definition like
<input type="button" onclick="dosomething();">
or they can do this by javascript codes like:
<script>
document.getElementById('ele').onclick = function(){};
</script>
And usually there are so many codes here so that it's sometimes difficult for us to identify which event function are called after the element event is triggered.
So my question is: is there any method or plug-in can help to identify the next running javascript statement or function entry point after one element event is triggered?
One thing you could do is, define a function that will grasp all events assigned to each type of elements and show them somewhere on the page(preferably at the bottom). To trigger that, function you may add a button which should be clicked.
Of course, all this must be done in debugging state and you would certainly want to remove the button and the display panel when releasing the App.
We used to do this for our project, may not be elegant but it does serve the purpose.
There's no code that "emulates" the debugging of plugins like Firebug - however in case of "simple" onclick function simple alert will just show it:
var element = document.getElementById('ele');
alert(element.onclick);
And to programmatically trigger it:
element.onclick();