Is it possible to see all javascript function calls as a tree in any web debugger?
UPDATE
I mean debugger could remember each function call, from which other function it was done, also it could remember stack frame per each call and entire DOM snapshot.
UPDATE 2
The following page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Trace and log all javascript functions calling tree/graph?</title>
<script type="text/javascript">
function init() {
setDiv2("This div text was changed once");
setDiv2("This div text was changed twice");
};
function setDiv2(text) {
document.getElementById("div2").innerHTML = text;
}
window.onload = init;
</script>
</head>
<body>
<h1>Trace and log all javascript functions calling tree/graph?</h1>
<p>Stack Overflow Question #20910262</p>
<div id="div1">This div will not changed</div>
<div id="div2">This div text will change</div>
<div>
<h2>The call graph should be follows</h2>
</div>
</body>
</html>
Should give the following call graph
because setDiv2() function called twice.
In profiler's top-down view it is visible as
where setDiv2() function drawn once. This is good for profiling, but this is not call graph.
So the question persists.
UPDATE 3
Moreover, users should be able to step on each tree node and see the values of all variables and the state of entire DOM tree at the moment, represented by the node.
Your need is obviously a custom profiler. Chrome JS profiler is a good handy tool. but i don't think that is correct tool for you. Also among the others Firebug or Safari profiler (webkits) won't do the job for you. So you need to develop your own custom profiler. since the others are only interested/targeted with CPU time profiling or memory usage profiling or CSS selectors.
You can modify Object.prototype.constructor. so all the global functions you have defined can have special profile method. or borrowed method via Function.prototype.bind() you can populate all the data you need from executions into a special data object. which can be like in a tree hierarchy. Here is the places to start a custom profiler.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function
and
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
Let us know if you can complete a custom profiler for javascript. it will be really useful tool for more people including me.
Yes, of course. Every browser has support to debug javascript code. You need to read about in specific browser you use. For example you can open developer tools in Mozilla Firefox by clicking Ctrl+Shift+K. In Internet Explorer you need to click F12 key. For Google Chrome Ctrl+Shift+I. After openning tools, you need to set up breakpoint at which you want to see stack trace, local variables and etc. After setting breakpoint you need to reload web-page, because when page is loaded all js is executed first time, and you can catch after loading, or make some event for catch breakpoint.
try console.trace() in your setDiv2 function , in this case you will see the both tree calls in chrome console.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Trace and log all javascript functions calling tree/graph?</title>
<script type="text/javascript">
function init() {
setDiv2("This div text was changed once");
setDiv2("This div text was changed twice");
};
function setDiv2(text) {
document.getElementById("div2").innerHTML = text;
console.trace()
}
window.onload = init;
</script>
</head>
.....
Related
I'm trying what should have been a simple operation: when a user clicks a link a modal window pops up that's populated with some appropriate data in a string. Here's the HTML for the window:
<!DOCTYPE HTML>
<html>
<head>
<title>Modal Display Window</title>
</head>
<body>
<div id="modal_display_block">REPLACE THIS</div>
</body>
</html>
And this is the Javascript function that calls and populates the window:
function displayCenterBlock(data) {
DispWin = window.open("modal_window.html", "", 'toolbar=no,status=no,width=300,height=300');
DispWin.onload = function() {
DispWin.document.getElementById('modal_display_block').innerHTML = data;
}
}
This works great in every browser I've tried except Internet Explorer. In IE the innerHTML does not get rewritten by the data. Is there some IE-specific trick or tweak I need to apply to get this working in that browser?
Many thanks in advance!
ON EDIT: I've discovered that if I move the element rewrite line out of the onload function it then works fine in IE but not in other browsers. It appears my options are to use some conditional code to rewrite at once for IE and to wait for page load for all other browsers, or to abandon the rewrite element approach and just use a document.write. I get from forum searches people like to discourage document.write but that's looking pretty appealing right now.
Okay, for better or worse this code achieves the goal and appears to work cross browser, even in IE.
DispWin = window.open("", "Display", 'toolbar=no,status=no,width=300,height=300');
DispWin.document.open();
DispWin.document.write(data);
DispWin.document.close();
DispWin.focus();
I get that document.write can re-write the whole page, and that is sometimes bad, but in this case that is exactly what I want: a single small page displaying only what was passed in the data argument. I can style it inline.
I would love to know if using Chrome's Developer Tools Console tab, I can manually access the function scope handed to jQuery when document ready is called.
So for example, if I have the following HTML and Javascript:
<!DOCTYPE html>
<html>
<head>
<title>Accessing jQuery scope via Developer Console</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var globalId = "awesomeApp";
$( document ).ready( function() {
var id = "myAppId";
this.id2 = "myAppId2";
} );
</script>
</head>
<body>
</body>
</html>
If I type 'globalId' into the Developer Console window it will output 'awesomeApp'.
Please could someone advise me if it's possible to manually reference the jQuery scope from the Developer Console window, ie the function handed to jQuery when $(document).ready is called.
So, based on the above code, if I type:
[theAnswerToMyQuestionScope].id it would output 'myAppId'
or
[theAnswerToMyQuestionScope[instance]].id2 it would output 'myAppId2'
Many thanks in advance for help provided.
When the debugger stops at a breakpoint you are working in the current scope.
So if you set a break point inside a the anonymous function you can type commands in the console and work in the current scope.
i.e typing [instance]].id2 in the console in that break point should output myAppId2
I am wanting to build some simple modules to help my students learn javascript. I have made a set of functions that I would like for the student to be able to enter and then that function be executed. For example. I have a function that moves an image from 1 div to another called move(); I then have a text field where the user needs to type move(); When they click submit I want the code they wrote to be executed so they can see what it does.
I had a really hard time searching for this and was hoping someone could point me in the right direction. Thanks!
<body>
<textarea id='userInput'></textarea>
<div id='go'>Go</div>
<div id='canvas'>
<div id='r1c1' class='square'><img src='dog.png' id='dog'></div>
<div id='r1c2' class='square'></div>
</div>
</body>
</html>
<script>
$('document').ready(function(){
$('#go').click(function(){
var code = $('#userInput').val();
EXECUTE code; //This is where I want the code to be executed//
});
});
function move(){
$('#dog').appendTo('#r1c2');
};
You can use eval() for this purpose (on w3Schools)
To take this even further, you can wrap the code in a try catch block to handle user errors.
You can also use the console with most browsers to execute javascript. Hit F12 to load up the developer tools on all of the browsers. Click on the console tab. Type javascript until your heart's content.
One advantage to this method is that you should be able to execute any code that is included on the page.
I have just started working through Professional JavaScript for Web Developers and am trying to run the code as I go along. I have hit a wall early on with trying to embed JavaScript in a HTML document. If I define a function and call it in the same document, nothng happens. Similarly, if I define a function in the document and call it from either the Firefox scratchpad or FireBug nothing happens. I can however run the whole thing (define the function and call it) from the scratch pad or FireBug.
The code I am using for the page is:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script type="text/javascrtipt">
function compare(a, b) {
if (a < b) {
alert ("A is less than B");
} else if (a > b) {
alert ("A is greater than B");
} else {
alert ("A is equal to B");
}
};
</script>
</head>
<body>
<p>Paragraph 1</p>
<script type="text/javascript">compare(5, 6);</script>
</body>
</html>
I have found similar questions like the one below which I think answers my question but I don't understand it enough to apply it to my scenario. How would I make the function above global (if that is whats needed here)?
Calling custom functions from firebug console
Thanks,
Ger
The problem here is not in your logic, rather it is in a simple typing error.
Where you specify the script type in the head, you misspelled javascript - correct that and the script executes.
Further to this, it may be worth mentioning that, when using the HTML5 doctype, you omit the script type if you wish because this is now the default for HTML5 documents.
After correcting the typo "text/javascrtipt" the compare function can be successfully called from Firebug console (command editor) with, e.g.
compare(3,4);
and a following click on "execute". Tested with Firefox 24.0 / Linux.
As usual, I want to alert users to unsaved changes when leaving a page. I have this test page:
<html>
<head>
<title>Testing</title>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/base.js"></script>
<script language="JavaScript1.1" src="https://127.0.0.1:8443/scripts/edit.js"></script>
<script language="JavaScript1.1">window.onbeforeupload=moveAway</script>
</head>
<body onLoad="init()">
Google
</body>
</html>
The moveAway function is defined in "edit.js" like this:
function moveAway ()
return "foo";<br>
}
The event doesn't fire, or at least it just leaves the page silently (using IE8, Firefox 15, and Chrome 20). I've tried breakpointing the function in Firebug and it never gets to the breakpoint. I've tried it from the web server (an SSL server, the test version of which runs at 127.0.0.1:8443) and I've tried opening the file directly with the browser (which is why I used absolute URLs for the first two <script> tags). I've tried removing the "src=" attribute from the script tags.
On the other hand, this page has an example which does work (at least in Firefox):
https://web.archive.org/web/20211028110528/http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm
There is also a very similar example at MSDN which also works:
http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
I really can't see the difference between what they do and what I'm doing. can anyone tell me why their code works and mine doesn't?
use jQuery bind function.. it works great for me..
see bellow
$(window).bind('beforeunload', function() {
return "Want to leave?";
});
onbeforeupload , really ? it should be onbeforeunload. Is that a spelling mistake, or is that how your actual code is ?
You have a syntax error, the function should be:
function moveAway () {
return "foo";
}