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
Related
I have created the new child window using chrome.app.window.create API in order to print the content of window using window.print().but my question is how can i pass the content in that html.please could anyone help me in this.
The DOM of the new window is accessible via window.document.
The window here isn't the window passed to the chrome.app.window.create callback function (call it createdWindow), but rather createdWindow.contentWindow.
So, the DOM you're looking for is createdWindow.contentWindow.document. Modify that DOM however you like and then call createdWindow.contentWindow.print().
UPDATE -- Here's the code following what I said above:
window.onload = function() {
chrome.app.window.create('printwindow.html', {},
function (createdWindow) {
var win = createdWindow.contentWindow;
win.onload = function () {
win.document.querySelector('#content').innerHTML =
'<p>Here is something to print.</p>';
win.print();
}
}
);
};
printwindow.html is:
<!DOCTYPE html>
<html>
<head>
<title>WindowToPrint</title>
</head>
<body>
<div id="content"></div>
</body>
</html>
I have tested this code and it works. I understand that the OP has gone another way, but it would be nice for others looking at this question if this could be marked as the answer.
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>
.....
I noticed recently that if jQuery ajax is called right after injecting jQuery into an inner iframe, jQuery loses its functions - like jQuery(..).dialog(), .draggable, and any other plugins. If the ajax call is commented out, the jQuery works fine. Is this a known bug, or something I'm doing wrong? This problem can be seen in this file, with jQuery in the same directory:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
Try and <button id="btn">load</button>
<iframe width=300 height=300></iframe>
<script>
"use strict";
jQuery('#btn').click(function(){
var $ = jQuery;
console.log(typeof jQuery('iframe').dialog);
var doc = jQuery('iframe')[0].contentDocument;
function insertscript(src) {
var newscript = doc.createElement('script');
newscript.setAttribute('src',src);
doc.documentElement.appendChild(newscript);
}
insertscript('jquery.js');
//This breaks the jQuery plugins:
var test = $.get('jquery.js',function(){
//Now we know jQuery should be in the frame.
});
//So does this:
//jQuery.ajax({url:'http://192.168.1.17/wordpress/wp-includes/js/jquery/jquery.js',cache:true,processData:false});
console.log(typeof jQuery('iframe').dialog);
window.setTimeout(function(){
//jQuery is no longer the original jQuery object. Note the cached reference $().dialog does exist though.
console.log('after awhile... dialog is ' + typeof jQuery('iframe').dialog);
},3000)
//jQuery.ajax({url:jqurl,cache:true,processData:false});
});
</script>
</body></html>
This is a minimal sample of the problem, making sure the iframe has loaded a certain jQuery.js (then ajax should have the cached script) before some other stuff is added to the iframe.
Click load, and after while, console log will show "after awhile... dialog is undefined" - only when ajax was used.
Update: It looks like $.get('jquery.js') actually runs the script. $.get('alert.js') shows an alert, when alert.js has an alert function. (In the case of jQuery, re-defining the global jQuery reference.) Why does jQuery's ajax have this behavior? Does this happen with all ajax implementations?
As someone answered earlier (whose answer got deleted?), jQuery ajax automatically chooses what to do depending on what type of content you requested. (An unfortunately under-documented feature). loading an external js will not just return when the browser has fetched the script, it will also run the script.
Whenever you re-include jQuery at a later point, it rewrites the window.jQuery object, therefore removing the jQuery.prototype.dialog, etc.
The Firefox .watch function can be helpful in cases like this, to see where something got redefined. This, for example, would give you a stack trace of anything that redefines jQuery:
window.watch('jQuery',function() { console.trace() } )
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";
}
In the HTML head section:
<script type="text/javascript" src="Scripts/editScripts.js"></script>
Just above the </body> tag(closing tag, bottom of the html page). Also: this is the old code, this is how it was when it was not working:
<script type="text/javascript">if(document.getElementById)initialize();loadEvents();</script>
</body>
</html>
In the editScripts.js file:
/*global document,addFileInput*/
function loadEvents() {
var a = document.getElementById('addField');
a.onclick = addFileInput;
}
var upload_number = 2;
function addFileInput() {
var d = document.createElement("div");
var file = document.createElement("input");
file.setAttribute("type", "file");
file.setAttribute("name", "addFile[]");
file.setAttribute("size", "35");
file.setAttribute("class", "file");
file.setAttribute("id", "addFile"+upload_number);
d.appendChild(file);
document.getElementById("moreUploads").appendChild(d);
upload_number++;
}
This would not work. I replace the javascript in the footer with this.This is the new code, which does work as I expect it to.:
<script type="text/javascript">if (document.getElementById)loadEvents();</script>
And now it does work... I don't see how leaving out that function call, even though it the function it was referring to doesn't exist, would mess things up so royally.
In an unbracketed if statement, only the first statement is conditional. Every statement following it is unconditional regardless of indentation.
Thus, in the first example, loadevents() executed unconditionally.
The browser would have reported an error when attempting to call the "initialize" function since there was no such function. Therefore, the very next line where you call "loadEvents" wouldn't run. See this example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS Error Test</title>
</head>
<body>
<script type="text/javascript">
if(document.getElementById) {
initialize();
alert("You shouldn't see me!");
}
</script>
</body>
</html>
In that example, the alert box shouldn't appear because I haven't declared an "initialize" function and the browser will report a JS error. Removing the "initialize" function, however, will cause the alert box to appear.
So that's how by removing the cause of the Javascript error you fixed your problem.
probably because you arent calling your scripts on document load event. so when you called your scripts in the header before your dom fully loaded, none of it worked, but now when you are calling it after the dom loads, it works.
The correct fix for all of this should be calling your scripts after the document fully loads, or at least from the body onload event:
<body onload="initScripts()">
And then add all of the scripts you want to run on page load in the initScripts function.
also, there are much better ways of doing this, for example using jquery, and/or reading this: http://onlinetools.org/articles/unobtrusivejavascript/chapter4.html
You say: "I don't see how leaving out that function call, even though it the function it was referring to doesn't exist, would mess things up so royally." That's inconsistent with the rest of your question, which implies that adding the call messed things up. But I think the text I'm quoting is the correct description.
Here's the real answer. The old code:
if(document.getElementById)loadEvents();
does not call loadEvents if getElementsById is not defined. It's not defined in all browsers.
The new code, instead, you not only leave out the function call: the semantics change as well.
if(document.getElementById)initialize();loadEvents();
always calls loadEvents, so what you want to happen always does.