Say for example, I have the following Javascript,
var User=Backbone.Model.extend({
});
var jt=new User({name:"jonathan"});
How would I access jt in the Chrome console?
>jt // doesn't work
>Backbone.... ?
thx
you have to make the jt variable global:
jt = new User({name:"jonathan"});
or
window.jt = new User({name:"jonathan"});
or just use the console while in the debugger and set a breakpoint on that line
Peter's answer will do the trick, but it is generally considered bad practice to start making things global. If it's just a quick thing that you plan on reverting, it's ok, but you have to be careful to remember to fix it.
Since you're using Chrome, you can make use of the powerful debugger. Just add a line with debugger right after you've set something you want to inspect.
var User=Backbone.Model.extend({
});
var jt=new User({name:"jonathan"});
debugger;
If you have the developer tools open, refreshing the page will basically set a break point at the debugger. You can then hit Esc to open up a console at the exact scope at which you put your debugger line.
Related
Can I set a breakpoint on a standard JavaScript function? For example, can I pause the debugger every time context.beginPath() is called? Or every time that String.replace() is called?
UPDATE: What I meant by standard JavaScript function is functions built-in into the JavaScript engines.
Yes you can do this by overriding the original functionality by performing the following two steps:
Make a copy(reference really) of the original function:
mylog = console.log;
Override the original with your copy inserting the debugger statement:
console.log = function(){
debugger;
mylog.apply(this, arguments);
}
Now when called console.log will perform a breakpoint. (Note you'll have to handle different function arguments differently depending on the function be overriden)
Here is another example using an instance methods, for example String.prototype.replace:
let originalFunction = String.prototype.replace;
String.prototype.replace = function(...args) {
debugger;
return originalFunction.call(this, ...args);
}
console.log('foo bar baz'.replace('bar', 'BAR'));
Are you looking for the debugger statement?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger
There are 3 ways to set up a breakpoint and debug the code.
1. Chrome dev-tools / Firebug:
Using Chrome developer tools or firebug to locate the line of
JavaScript, then set the breakpoint with the mouse. In chrome, you
should first open(ctrl+shirt+I) to open developer tools.
Select the script tab or click on (ctrl+P) to open then desired file.
Search the line on which you wanted to set a breakpoint and set a
breakpoint.
Whenever you execute your code next time in a browser, the breakpoint
is fired. In watch section, you may see every expression, all
variables in scope, and the call stack too.
2. Debugger
Using debugger statement, it fires every time and it helps when it
hard to find the execution of code.
debugger;
3. Webstorm IDE / Visual Studio Code
Webstorm IDE/Visual Studio Code have the facility to debug a code from
IDE.
Javascript is a really flexible language and probably following the way to override existing javascript and debug method then please use following a way of debugging.
var fnSetAttribute = Element.prototype.setAttribute;
Element.prototype.setAttribute = function(name, value) {
if (name == 'clone') {
debugger; /* break if script sets the 'clone' attribute */
}
fnSetAttribute.call(this,name,value); /* call original function to
ensure those other attributes are set correctly */
};
For more reference please review https://alistapart.com/article/advanced-debugging-with-javascript
Works in Google Chrome Console:
debug(console.log) // sets a breakpoint on "console.log" builtin
console.log("Hello")
It shows the Sources pane and says
🛈 Paused on debugged function
I run in Chome devtools next code
(function() {
var a = 5;
debugger; // when I stop here I evaluate `a = 9`
console.log(a);
})(); // and got 5
but if I use
(function() {
var a = { a: 5 };
debugger; // when I stop here I evaluate `a.a = 9`
console.log(a.a);
})(); // and got 9
Why?
PS
also why it doesn't work in FF / Safari (it even didn't stop in debugger line )
This is behavior is simply a bug, and will be fixed in an upcoming release.
If you want a "why" deeper than that, you'll need to know a lot about Chrome's debugger and JavaScript implementation. According to the diff of one file in the fix, the debugger formerly used a context_builder.native_context but now it uses a context_builder.evaluation_context. Apparently the native_context created by the old debugger code had trouble resolving (or not treating as read-only) local-scope variables. If you really wanted more, you could contact the author of the fix.
As for why the debugger does not appear in Firefox: it will appear if you are running code from a <script> and have your dev tools open. When running code from the console, it appears that you must have the debugger tab open specifically. Obviously, this is not possible if you have the console open to type in your code, but you can wrap it in setTimeout and quickly switch to the Debugger tab:
setTimeout(function() { debugger; }, 5000)
It is a matter of how the variables are used. Objects are used by reference. So changing a.a will effectively change the value at the proper memory address. Though, changing a itself in any of your test version won't do anything because a new memory address is created for the variable evaluated in the console.
For FireFox not breaking at debugger line, it states in this page (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) : "If no debugging functionality is available, this statement has no effect.". So, you have to ensure FireBug is installed I presume.
I am calling a javascript function in a button in aspx page like
OnClientClick= "printText(document.getElementById('PrintPayslipPart').innerHTML)"
and function is;
function printText(elem)
{
PrintPaySlip = window.open('RP_PrintPaySlip.html','PrintPaySlip','toolbar=no,menubar=yes,width=1000, Height = 700, resizable=yes,scrollbar=Yes');
PrintPaySlip.document.open();
PrintPaySlip.document.write("<html><head>");
PrintPaySlip.document.write("</head><body onload='print()'>");
PrintPaySlip.document.write(elem);
PrintPaySlip.document.write("</body></html>");
PrintPaySlip.document.close();
}
I am using .net 3.5 and ajaxcontrolltoolkit 3.5.40412.2
When clicking on button the error shows as "Microsoft JScript runtime error: Object required".
My guess is that either
PrintPayslipPart is not a valid id, and so the getElementById returns null.
PrintPaySlip is not a global variable, and your environment doesn't allow it to be
implicitly defined, which could be solved by declaring it local using var
var PrintPaySlip = window.open(...);
The second one seems more likely.
HTH
first thing i will suggest to you is have Firefox with error console installed and then test the site. At least it can help you find what exactly error is instead of "Microsoft JScript runtime error"
Trust me but Firefox + FireBug + Error Console make life much better for Web (JS) developer.
This may be dumb question. But somehow this engaged me for sometime and after some basic research I couldn't find an answer.
I was learning JavaScript and a code I wrote had an error and has been outputting infinite loops of alerts. I tried the normal shortcuts like Ctrl + C and Ctrl + Z but they didn't work. So I was thinking if there is any solution to this other than ending the browser process (like by doing a Ctrl + Alt + Del).
There are workarounds, as #Sarfras mentions, but no magic button that'll save you. The F5 workaround is the best I know of.
If you are using firebug, I would suggest you look into using the log feature rather then alerts. Many people find this as a useful way of debugging.
http://getfirebug.com/logging
If you are using alert as a debugging method, I strongly suggest you use the firebug plugin.
With it, you can use console.debug("whatever message", whatever, values).
Otherwise, if your intent is to actually use a dialog message, you could use some of these dialogs rather than the browser's built-in dialogs. Besides being a standard way of showing messages, they are way nicer ;)
You can log errors without a specific browser, with a global array.
This method allows you to 'turn off' an infinite alert,
but still be able to read the error log.
var logErrors= true, errorLog= [];
function Yikes(str){
if(str.constructor==Error)str=str.message;
errorLog.push(str);
if(logErrors== true){
logErrors= confirm(str+'\n keep showing errors? ');
}
return true;
}
window.onerror=Yikes;
you can also use it around problem code,
to return values:
try{
d2= Date.fromUTCArray(D.slice(0, D.length));
}
catch(er){
return Yikes(er.message+', '+D);
}
I realise this is not the ideal place to ask about this in terms of searchability, but I've got a page whose JavaScript code throws "Stack overflow in line 0" errors when I look at it in Internet Explorer.
The problem is quite clearly not in line 0, but somewhere in the list of stuff that I'm writing to the document. Everything works fine in Firefox, so I don't have the delights of Firebug and friends to assist in troubleshooting.
Are there any standard causes for this? I'm guessing this is probably an Internet Explorer 7 bug or something quite obscure, and my Google-fu is bringing me little joy currently. I can find lots of people who have run into this before, but I can't seem to find how they solved it.
I ran into this problem recently and wrote up a post about the particular case in our code that was causing this problem.
http://cappuccino.org/discuss/2010/03/01/internet-explorer-global-variables-and-stack-overflows/
The quick summary is: recursion that passes through the host global object is limited to a stack depth of 13. In other words, if the reference your function call is using (not necessarily the function itself) was defined with some form window.foo = function, then recursing through foo is limited to a depth of 13.
Aha!
I had an OnError() event in some code that was setting the image source to a default image path if it wasn't found. Of course, if the default image path wasn't found it would trigger the error handler...
For people who have a similar problem but not the same, I guess the cause of this is most likely to be either an unterminated loop, an event handler that triggers itself or something similar that throws the JavaScript engine into a spin.
You can turn off the "Disable Script Debugging" option inside of Internet Explorer and start debugging with Visual Studio if you happen to have that around.
I've found that it is one of few ways to diagnose some of those IE specific issues.
I had this problem, and I solved it. There was an attribute in the <%# Page tag named MaintainScrollPositionOnPostback and after removing it, the error disapeared.
I added it before to prevent scrolling after each postback.
If you came here because you had the problem inside your selenium tests:
IE doesn't like By.id("xyz"). Use By.name, xpath, or whatever instead.
Also having smartNavigation="true" causes this"
I set up a default project and found out the following:
The problem is the combination of smartNavigation and maintainScrollPositionOnPostBack. The error only occurs when both are set to true.
In my case, the error was produced by:
<pages smartNavigation="true" maintainScrollPositionOnPostBack="true" />
Any other combination works fine.
Can anybody confirm this?
Internet Options
Tools
Internet options
Advanced
Navigation section
Click > Disable script debugging
display a notification about every script error
sign in
You will smile !
My was "at line 1" instead but...
I got this problem when using jQuery's .clone method. I replaced these by using making jQuery objects from the html string: $($(selector).html()).
I have reproduced the same error on IE8. One of the text boxes has some event handlers to replace not valid data.
$('.numbersonly').on("keyup input propertychange", function () {
//code
});
The error message was shown on entering data to this text box. We removed event "propertychange" from the code above and now it works correctly.
P.S. maybe it will help somebody
I don't know what to tell you, but the same problem occured with jQuery table sorting and SEARCH.
When there is nothing left in the table, where you are searching a string for example, you get this error too. Even in Google Analytics this error occurs often.
In my case I had two functions a() and b(). First was calling second and second was calling first one:
var i = 0;
function a() { b(); }
function b() {
i++;
if (i < 30) {
a();
}
}
a();
I resolved this using setTimeout:
var i = 0;
function a() { b(); }
function b() {
i++;
if (i < 30) {
setTimeout( function() {
a();
}, 0);
}
}
a();
This is problem with Java and Flash Player. Install the latest Java and Flash Player, and the problem will be resolved. If not, then install Mozilla Firefox, it will auto install the updates required.