I was wondering if it's possible to get the variables I used in my files via developer tools (in chrome, safari or firefox).
For example, if I have declare a variable 'test-1' in a file 'file-1.js' I want to get that varibale via developer tools.
EDIT
And if it's possible to block it
Use debugger to get the variable value in the console.
Try this:
(function() {
var a = 100;
debugger; //write a in conseole and you will get 100
function test() {
var b = 200;
debugger;
//write b in conseole and you will get 200
}
test();
})()
To resume script execution press f8
To step over next function call press f10
You can set the variable to be watched in the browser debugger. You could also set a breakpoint on the function and then step through the many properties and variables of that function.
Here is how to do it in Fire Fox.
Examine, modify, and watch variables
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 new to debugging JavaScript and AngularJS. I have breakpoints in virtually every line of the following code segment, but I am not able to find the response variable or data or content in the Firefox debugger. There is a very dense nested structure of variables in the debugger. Where do I look in the Firefox debugger variables structure to find the values for response or data or content in the code below?
The alert says that the confirmStatus variable's value has not changed from its default and thus was not populated by the call to the backend service, even though the backend service call produced console logs indicating that it was fired. I want to find out what is coming back and in what form so that I can alter the client side code below.
Here is the segment of Javascript code that I am running through the debugger:
$scope.$on('$viewContentLoaded', function() {
var str1 = "/confirm-email?d=";
var str2 = $routeParams.d;
var res = str1.concat(str2);
$http.post(res).then(function(response) {
$scope.confirmStatus = response.data.content;
});
var str3 = "confirmStatus is: ";
alert(str3.concat($scope.confirmStatus))
alert("viewContentLoaded!")
});
I would suggest using the debugger first. This means:
open the debugger with the developer tools menu or keyboard shortcut: https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Open_the_debugger
Pick the file you want to debug, key shortcut is on mac, then type in part of your .js file to have it open in the debugger.
You should see the source code for your .js file now, and you can click in the left-nav to the line you want to stop on, e.g. the $scope.confirmStatus = ....
There is also a good trick with angular where you can access the scope from the console. To do this
Again open the developer tools this time to the console not debugger
Right-click on the page near some html owned by angular, and pick "Inspect element"
In the console: angular.element($0).scope(), and you will have access to the controller scope for that element.
That said, you might want to try and capture the error handler for the http.post. e.g.
$http.post(res).then(function(response) {},
function(err) {});
Keep in mind that this function will run in parallel to current one, at a later stage when response will come from server:
function(response) {
$scope.confirmStatus = response.data.content;
}
You should put a debugger break point into this $http callback function -- response variable will be destroyed as soon as callback function execution will end.
Your alert will always display unmodified confirmStatus, because confirmStatus is changed in callback function which will be executed later when response will come from server.
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.
Is it possible to get chrome dev tool or firebug to break when a new variable is defined in an object? The object that I am interested is specifically the "window" object.
I get
Uncaught ReferenceError: remoteUser is not defined
for "if(remoteUser)" in Chrome Developer Tools. The error doesn't occur everytime the page is visited, so I want to findout the line where the variable does get defined and get set to a value.
I could search the javascript files for that variable, but that route is very tedious.
You could change it to a property and invoke debugger; in Chrome:
Object.defineProperty(window, 'remoteUser', {
set: function() {
debugger;
}
});
Then just step up the call stack.
There's a built-in thing in Firefox: watch
One can watch even not-yet defined variable.
Usage: window.watch("remoteUser", callback)