Similar to other questions here, like this one.
Is there a way to break on the change of a variable value in any JavaScript debugger? (like IE Developer tools, Visual Studio, or Firebug)?
I guess it's something like a "watch variable", but I want to be able to see the callstack and pause it when the change to the variable actually occurs.
An alternative approach might be to override the value setting with a custom setter, and put a breakpoint in that, but unfortunately that won't work for IE AFAIK.
UPDATE
It appears that this type of behavior is available at least for unmanaged code written in C++ So I thought maybe a javascript engine written in C++ (Google's V8) might have something similar, but that doesn't appear to have what I want either.
You don't even need an IDE - you can use "Object.watch()":
Object.Watch Tutorial
If you use any one debugger, I'd strongly recommend Firebug. For all your Javascript, HTML and CSS needs :-):
http://getfirebug.com/javascript
===========================================================
Update for 2019:
Object.Watch is Ancient History. Uncoincidentally, it's unavailable in most contemporary browsers.
My personal favorite JS debugging tool these days is Chrome Developer Tools.
My personal favorite JS IDE (for Angular, .Net Core, etc) is Microsoft Visual Studio Code (MSVC).
You can do just about any "expected" debugging operation - including set watches - with the Chrome debugger (just as you could with FF Firebug).
Chrome debugger is well integrated with the MSVC IDE.
Both are "free" (at least "free as in beer"); both run well on Windows, Mac and Linux.
I'm having success with this library in Chrome and it looks to support all major browsers.
https://gist.github.com/eligrey/384583
Just include the .js file, then call:
yourObject.watch('someProperty', function() {
doWhatYouWant();
debugger;
console.write('this too');
alert('Object Changed'); //etc
});
I don't know if I misunderstood your question. If you want to watch an expression and stop when it reaches a certain value while in a js debugging session in Chrome Developer Tools, it's rather trivial.
You can simply put a breakpoint on the line where the value you want to check is, then click with right mouse button on it and select "Edit breakpoint...". A dialog will pop up prompting for an expression, where execution will stop when its value its true.
For instance, let's say you have a loop and you are adding one unit to a variable inside it and want to stop execution when the variable equals to 3. The expression in loop would look like this:
n = i++;
You must set your breakpoint on that line and the expression to watch (after prompted by "Edit breakpoint...") would be n == 3. When running your code it will stop there when your variable reaches that value.
You'll notice your condition is set because your breakpoint turns orange instead of blue.
Related
I'm trying to reverse engineer a malicious JavaScript. When I initially load the side, JS code is injected that includes the -debugger- statement and injects breakpoints into my chrome developer console.
Reading through stackoverflow
Deactivate all breakpoints does not help -> script freezes
Continue debugger afterwards does not help -> script freezes
Mark the script as blackbox does not help -> script already frozen. Reload doesn't work.
Do you have any ideas how I could analyze / debug the script?
Actually I'm not even able to use the Console from the chrome developer tools because everything freezes.
Chrome Developer Console
you probably found the option to right-click the line next to the debugger statement and select "Never pause here".
however if blackboxing does not work for you - the above won't work either.
you can use blackbox with a regex pattern, if applicable.
it probably won't work either because malicious codes often use window.eval. in that case you override the window.eval yourself. for example
window.eval=x=>console.log(x);
visit chrome://version/
check v8 version
building v8 from source
edit src/ast/ast.h
class DebuggerStatement final : public Statement {
private:
friend class AstNodeFactory;
friend Zone;
-- explicit DebuggerStatement(int pos) : Statement(pos, kDebuggerStatement) {}
++ explicit DebuggerStatement(int pos) : Statement(pos, kEmptyStatement) {}
};
building v8 again
diff out.gn/x64.release/d8
patch chromium binary
Similar to other questions here, like this one.
Is there a way to break on the change of a variable value in any JavaScript debugger? (like IE Developer tools, Visual Studio, or Firebug)?
I guess it's something like a "watch variable", but I want to be able to see the callstack and pause it when the change to the variable actually occurs.
An alternative approach might be to override the value setting with a custom setter, and put a breakpoint in that, but unfortunately that won't work for IE AFAIK.
UPDATE
It appears that this type of behavior is available at least for unmanaged code written in C++ So I thought maybe a javascript engine written in C++ (Google's V8) might have something similar, but that doesn't appear to have what I want either.
You don't even need an IDE - you can use "Object.watch()":
Object.Watch Tutorial
If you use any one debugger, I'd strongly recommend Firebug. For all your Javascript, HTML and CSS needs :-):
http://getfirebug.com/javascript
===========================================================
Update for 2019:
Object.Watch is Ancient History. Uncoincidentally, it's unavailable in most contemporary browsers.
My personal favorite JS debugging tool these days is Chrome Developer Tools.
My personal favorite JS IDE (for Angular, .Net Core, etc) is Microsoft Visual Studio Code (MSVC).
You can do just about any "expected" debugging operation - including set watches - with the Chrome debugger (just as you could with FF Firebug).
Chrome debugger is well integrated with the MSVC IDE.
Both are "free" (at least "free as in beer"); both run well on Windows, Mac and Linux.
I'm having success with this library in Chrome and it looks to support all major browsers.
https://gist.github.com/eligrey/384583
Just include the .js file, then call:
yourObject.watch('someProperty', function() {
doWhatYouWant();
debugger;
console.write('this too');
alert('Object Changed'); //etc
});
I don't know if I misunderstood your question. If you want to watch an expression and stop when it reaches a certain value while in a js debugging session in Chrome Developer Tools, it's rather trivial.
You can simply put a breakpoint on the line where the value you want to check is, then click with right mouse button on it and select "Edit breakpoint...". A dialog will pop up prompting for an expression, where execution will stop when its value its true.
For instance, let's say you have a loop and you are adding one unit to a variable inside it and want to stop execution when the variable equals to 3. The expression in loop would look like this:
n = i++;
You must set your breakpoint on that line and the expression to watch (after prompted by "Edit breakpoint...") would be n == 3. When running your code it will stop there when your variable reaches that value.
You'll notice your condition is set because your breakpoint turns orange instead of blue.
I'd like to set a breakpoint in a "Cart.add" function in the Chrome or Safari JavaScript debuggers. Problem is, this function is defined in a large minified JS file, and doesn't exist on a line by itself.
Some documentation says that the WebKit-based debuggers support "break" or "debug" commands in the debug console, but those don't seem to work in newer versions of the debugger.
Setting a breakpoint on that line of the JS file doesn't work either, since there are lots of functions on that line.
Any suggestions?
In Chrome when you open Scripts tab you can prettify selected file by clicking on { } button ("Pretty print") at the bottom. After that you can find your line and set a breakpoint. The code will remain prettified with breakpoints in place after a page refresh.
The debugger statement is probably what you're looking for.
Evaluating the DebuggerStatement production may allow an implementation to cause a breakpoint when run under a debugger. If a debugger is not present or active this statement has no observable effect.
The production DebuggerStatement : debugger ; is evaluated as follows:
If an implementation defined debugging facility is available and enabled, then
a. Perform an implementation defined debugging action.
b. Let result be an implementation defined Completion value.
Else
a. Let result be (normal, empty, empty).
Return result.
The break statement is for exiting loops and switch statements and has nothing to do with debugging.
The real solution though is to not bugger your code in the first place :)
1) The error message should give you a link to the source code in the
Sources tab. Click on that link to get taken to the transpiled code.
2) Click the "{ }" icon at the bottom of the source code in the
Sources tab to format the transpiled code for easier debugging.
3)Stick a breakpoint at the line that is failing.
4) Reproduce the
problem again. This time, it should break at the breakpoint before
the error occurs.
5) Examine the local variables and call stack to
determine what exactly is going wrong.
For chrome users, you'll want to enable automatic pretty print in the experimental features.
setting your breakpoint should work now.
If you have saved the webpage then beautify your js file using jsbeautifier.org which formats your entire script. Then replace your js content with the beautified version. From here you can debug your JS easily
I'm not a JavaScript Wizard by a long shot. But I am a web-developer and so I need to know my way around it at least a bit.
Something I'll often do is simply alert a variable to see what it is.
However, the problem is that I'll often get a result like: "object HTMLInputElement". To me this means little to nothing. Sure I can look it up, but I need to alert children() of children() of children(), etc...
I've tried walking through the JavaScript with Firebug, but for some reason this is very slow. Firefox hangs when I start a debug session, for every single debug session and I don't know why.
So, I want to inform if there is a way to get detailed info on variables some other way. Or a system I can use to work with to make things easier.
I find the developer tools in Chrome work quite well, giving a good amount of detail on demand (usually just hovering the mouse over the variable in the script tab; if that variable is a structured object, a little tree control appears and you can drill down). But then, I don't have your Firebug issue either (or at least, not often anymore).
Debugging with alert is very time-wasteful and, as you've found, frustrating; if at all possible I'd look at using a real debugger (like Chrome's Dev Tools; I've also heard good things about Opera's).
This should help:
http://www.openjs.com/scripts/others/dump_function_php_print_r.php
The easiest way to inspect a javascript variable is with a debugger. If Firebug is not working out for you try using Google Chrome, it has an inspector built in.
Btw - not sure what you mean by "start a debug session". If you have firebug installed, you should simply be able to click on the firebug icon on the bottom right of your browser. Go to the script tab, and select from the drop down whatever js file you want, stick in a break point (just left-click on the margin) and refresh the page. I've never had a problem with Firebug, it's always worked extremely well. I strongly advise figuring out whatever your issue with it is, it will make your life a million times easier.
Using any of the browser dev tools, including IE9, you can use console.log to get the variable output on the console. What information this gives you will vary by browser, but with Firebug it allows you to explore the variable in the DOM inspector tab, with full access to all properties and functions (you can even copy the content of a function to paste elsewhere).
For instance:
var foo = {};
// Do lots of stuff with foo
if (typeof(console) !== "undefined" && console.log) { // prevent errors when console not open, ideally all console calls should be removed before going into production
console.log(foo);
}
This has the advantage that it doesn't require any break points, so no slow step-debugging. It won't solve everything though, you'll often still need the debugger.
I have almost the same problem as this unanswered question. The only difference is I'm using VS2008, but I'm in an MVC project calling this javascript function:
function CompanyChange(compCtrl) {
alert(compCtrl.value);
debugger;
var test;
for (var i = 0; i < document.all.length; i++) {
test = document.all[i];
}
}
I hit the alert, then I get the message "there is no source code available for the current location." At which point the page becomes unresponsive and I have to manually stop the debugger just to shut it down.
I've logged into another machine and ran this exact code and it works fine, I hit the debugger and can step through. I've checked to make sure all settings in VS>Tools>Options>Debugging are identical as well as IE>Options>Advanced and they are. Both machines are Windows 7 Enterprise edition 32-bit, VS2008, IE8.
I've also tried attaching a process manually in VS, and using the 'Developer Tools' in IE which didn't work (said there already was a process attached).
I was hoping someone may have had this problem and found a work-around because I've already done a lot of searching and tried all the options I've read. Anyone else run into this?
Thank you,
Jeff
I recently answered the original question, so thought I'd post my answer here too:
The debugger cannot debug both Silverlight code and Script code at the same time, if the Silverlight debugger is selected JavaScript debugging is switched off.
To resolve this go to the Project's Properties and select "Start Options". Next check that the Silverlight checkbox is NOT ticked if you want to be able to debug JavaScript. (It is unfortunate that the UI here is not clear about this side effect.)
Even I had the same "Source code not available" msg for ie8. Actually I was having 2 different methods with same names having different parameters in 2 different pages and one of the method which I was invoking was not getting called due to the overloaded method which Ie8 doesn't detect. So I just renamed the function and it resolved the issue