I am trying to debug legacy scripts with Firebug. As per my knowledge (Which I got yesterday)
we use Step over (F10) to debug line by line and Step into (F11) to dig into JS function.
But when I use Step into on any JS function call, it takes control to next line. I want to see what is hidden inside the function. How can we do it ?
I kept break-point inside the function and then tried Step into then it takes control inside the function body. But it is tedious to find each function method and set break-point.
Is there any other way to do it ? or which is the right way ?
For example :
i2b2.ONT.ctrlr.FindBy = {
clickSearchName: function() {
// do some stuff
i2b2.ONT.ctrlr.FindBy.doNameSearch(search_info); // I tried Step into here
// some more stuff
}
doNameSearch: function(inSearchData) {
// If I set break-point here then only I can debug it
// or it directly takes control to `// some more stuff` in `clickSearchName:function`
}
}
PS: It also more external JS function calls.
Thanks,
Ajinkya.
"Step into" will step into the function if there is JS source for the function. If not (like for document.getElementById("foo"), it will step over it since it doesn't have anything that it understand to step into.
If you can point us to a working example where you are having the problem (either a jsFiddle reduction of the problem or a working web page) with instruction on where the relevant code is, we can probably help more.
Judging by your code example, I'm wondering what you're trying to step into. The line of code that starts with clickSearchName defines a function. It doesn't execute it. So, it won't go into that function until some later code actually calls clickSearchName. So, perhaps you're breaking on the definition of the function and trying to step into the function when it isn't being executed. That's just a guess though since we don't have a working example to try ourselves.
Add the line debugger; to your code at the place where you want to break into the debugger, it's a JavaScript keyword, which should do what you want. Just remember to take it out when you're done debugging your code.
Related
I'm trying to debug something live on a customer website and my code is all inside an anonymous function block. I don't know if there's anyway to reach that code to execute functions or look at variables in there. I can't put a breakpoint either because this code is dynamically generated each time the page is refreshed and the breakpoint doesn't stick.
(function() {
var Date = "14 September 2022 14:44:55"; // different every refresh for example
var Holder = {
var Items = {
item1: "Value1",
item2: "Value2"
};
function getItem(name) {
return Items[name];
};
function setItem(name, value) {
Items[name] = value;
};
setTimeout(DoSomething(), 2000);
})();
That's not the actual code, just a bare minimum example to illustrate the problem.
Is there anyway to get reach getItem() or Items?
Without a breakpoint that code probably runs to completion then POOF it's all gone anyway.
Redefine setTimeout
If it really is the case that the code inside the anonymous function calls other browser methods, you might be able to insert a detour at runtime that you can then put a breakpoint on.
For this to work, you will need to be able to inject new code into the page before the anonymous code, because there's no other way to invoke the IIFE.
Your example code uses setTimeout, so here's what I would try to insert:
let realSetTimeout = window.setTimeout
window.setTimeout = (...args) => {
debugger
return realSetTimeout(...args)
}
Lots of unrelated code might be calling setTimeout, in which case this could break the page or just make debugging really tedious. In that case, you might make it only debug if one of the setTimeout args has a value that's used in your example, e.g.:
// only break for our timeout
if(args[1] === 2000) debugger
Something like that might not trigger for only your code, but it would hugely reduce the number of other codepaths that get interrupted on their journey through the commonly-used browser capability.
Alternatively, use Charles Proxy to rewrite the body of the HTML page before it enters your browser. You could manually insert a debugger call directly into the anonymous function. Charles is not free, but I think they have a demo that might let you do this. If you do this professionally, it's probably a good purchase anyway. Your employer might even pay for the license.
If you can't use Charles (or a similar tool), you could instead set up a local proxy server using Node which does the rewrite for you. Something like that might only take an hour to throw together. But that is a bigger task, and deserves its own question if you need help with that.
No unfortunately.
The variables inside of the anonymous object are created in a scope which is inaccessible from the outside.
One of the main benefits of using a closure!
You’ll have to find a way to insert your own code inside of it by modifying the function that is generating those objects. If you can’t do that, then you’ll have to take the fork in the road and find another way.
Before this gets marked as a duplicate: I have read posts all day about this so I know there are tons of similar questions on SO but none that I've seen so far go into the details that I need to understand.
Having said that, there are no good commented examples of how the process works. Could someone answer the following question with well a well-commented example so I could finally understand this ability?
I have a function that I want to call in one file but I need to make sure that another event in another file has already happened before I call it. These files have no connection (one is an angular 2 TypeScript file that starts the app and the other is a JS file that manages a hopscotch tour). I understand that I will need to use a global variable and I believe that the best solution I've read is going to involve using setters and getters. All examples I've seen of this seem to assume that it's just intuitive and leave out the part where I get to understand how it's working. Maybe it is intuitive but I'm not making the leap yet.
Global variable in TypeScript file:
global_variable = false;
Function I want to call in JavaScript file based on the listener:
function call_if_other_function_finishes() {
if (global_variable === true) { // I have the global already created
// run hopscotch tour
}
} // how do I turn this into a listener?
The function I need to have finished first in TypeScript file:
function someFunction() {
// run its code
GlobalFile.global_variable = true; // Should trigger the listener.
}
Thanks in advance!!
One solution is to just define the function as you do in your example and then run it when you need it:
function someFunction() {
// run its code
call_if_other_function_finishes() // it's globally defined anyway
}
My JS code is getting bigger and bigger and also older. This means that, while working on other projects, I tend to forget all the sequences in which I call my functions. I would like to know if there's a tool which can parse my .js file and produce a (simple) document in which each function has listed all the other function it call. This is just a static source code analysis; I don't need it to do anything at run time.
Overly simplified example:
function firstFunction(){
...
secondFunction();
thirdFunction();
}
function secondFunction(){
...
thirdFunction();
}
function thirdFunction(){
...
secondFunction();
firstFunction();
}
The resulted (text) document would simply list the function calls (I don't care about format):
firstFunction: secondFunction, thirdFunction
secondFunction: thirdFunction
thirdFunction: secondFunction, firstFunction
EDIT: please note that I would like not to change my code; I have tens of functions with some of them calling more than 10-15 other functions; printing messages before or after each function call would require to much time, both for writing and running each scenario.
EDIT no.2: I could do this with any basic text editor by selecting each function name and searching for instances of that name in the file; this method would require much more time and brain cells than I can afford right now; an automated tool would have been perfect.
console.trace() works very well on Google Chrome. In addition console.log() could be handy, when console.log() is called, the stacktrace is also displayed.
Could someone explain the javascript that makes up Google's Website Optimiser Control script? Specifically: the first two lines, which seem to be empty functions, and why is the third function wrapped parentheses () ?
As far as I can tell this script is basically writing out a new <script> which presumably loads something for A/B testing.
function utmx_section(){}
function utmx(){}
(function() {
var k='0634742331',d=document,l=d.location,c=d.cookie;
function f(n) {
if(c) {
var i=c.indexOf(n+'=');
if (i>-1) {
var j=c.indexOf(';',i);
return escape(c.substring(i+n.length+1,j<0?c.length:j))
}
}
}
var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+'" type="text/javascript" charset="utf-8"></sc'+'ript>')
}
)();
I've attempted to step through with the firebug debugger but it doesn't seem to like it. Any insights much appreciated.
Many thanks
inside anonymous function it shortens names of document and cookies inside it at first, function f(n) gets value of cookie under name n. Then Google reads its cookies and with help of d.write it loads its scripts (as I see they are related to Google Analytic). This way it makes On-Demand JavaScript loading... Actually you load these scripts all the time, Google just needs some additional parameters in url, so this is done this way - save parameters in cookie, which next time are used to get script again.
And finally back to the first two magic lines :) After Google loads its script (after executing d.write), there are some functions which uses utmx and utmx_section, as well as definition of these functions, or better to say overriding. I think they are empty at first just because another function can execute it before its real definition, and having empty functions nothing will happen (and no JS error), otherwise script would not work. E.g. after first iteration there is some data, which is used to make real definition of these functions and everything starts to work :)
The first 2 functions are in fact empty, and are probably overridden later on.
The third function is an anonymous self-executing function. The brackets are a convention to make you aware of the fact that it is self executing.
the "f" function looks up the value given to it in the document's cookies and returns it. Then a new script tag is written to document (and requested from server) with these values as part of its URL.
Is there a way in Firebug (or any other debugger) to see the functions that are being called as a page loads?
Edit: Breakpoint is really not what I'm looking for- I'd like to see the functions being called with the arguments that are being passed as I work on the page - something similar to the console - where I can see Http AJAX Post messages - with post values and the response.
Edit2: It looks like Profiler is something that I was looking for - but is there a way of looking at the parameters passed to the function and the return value?
You can always just print it out yourself. ( I know this may not be the answer you wanted.)
But what you can do is add a
<div id="debug"></div>
in your document.
Then add:
function log(str) {
$('#debug').append(str); // I'm using jQuery here
}
and then you can add the logs in your javascript, e.g.:
function myFunc(foo, bar, baz) {
log("myFunc called with ("+foo+", "+bar+", "+baz+")<br/>");
// your stuff
}
Tedious, but effective (IMO).
Firebug's console.log statement will dump stuff to the console for you, you just need to add console.log statements. For post requests and responses, use the net panel. Personally, I think adding a debug function and div to your page is overkill.
I think you need to make this more specific if you want to get more specific answers than "just use a breakpoint". Do you know what "code profiling" is? Is that what you want to do? You can google for "firebug profiler", and there is also some information right here on SO, e.g. Understanding Firebug profiler output