Why does the Chrome debugger skip over delete statements? The following code will demonstrate the observation if ran in a console.
(function () {
var foo = { bar: true };
debugger;
delete foo.bar;
})();
The answer here is in the nature of the command 'delete' its not a common function as you are used to in js. My guess is that the chrome tools are set to stop on every line that contains an object definition or an object running a method, behind the scenes almost everything one encounters in javascript is an object, however delete is not am object but an operator like '+' or '-'. And the reason it gets skipped is because this will be the only time you will have a line that doesn't throw a error but does not define or call an object.
Related
The fact that I can't think of how to do this makes me think it's some sort of anti-pattern, or impossible. If anyone has any better ideas of how to handle my situation, recommendations always welcome.
I have a legacy codebase and at one point I am retrieving function references and calling the function. These function calls are expected to return a result, but sometimes they are missing their return statement. Currently I throw an error if the returned value is nullish but this only gives me a stacktrace to the engine location that is calling the function, not the function itself.
Is there any way that I can determine the file name/number of the function, or force the function to throw an error such that a stacktrace to that actual function is generated?
There is no such feature in the Javascript language. It's not anti-pattern, just not something that the language supports. There is no requirement that a function have a return statement and there is no way to force it to throw an exception if it doesn't return a value.
Without seeing any of the relevant code, I can offer some suggestions:
Set a breakpoint at the line of your code that initiates the function call. Then, trace into the function in the debugger. You can go as far into it as you need to and each time you go step into a new function call, it will show you the file and line number that you're on. I use this technique regularly when I'm confused by some behavior by some module (either built-in to nodejs or an external module I'm using) and it's not immediately clear how to find the right code on Github for it. I just step into it and can immediately see the code and watch it execute line by line as needed for whatever problem I'm investigating.
Assuming this function you're calling expects some arguments, you can give it some sort of bogus arguments that would hopefully trigger it to throw some sort of exception and you could then see the stack trace from that exception. For example, if it was expecting a non-optional object as an argument, you could pass null and see if that triggers an exception. If it was expecting a callback, you could pass a non-function and see if that triggered an exception.
As for the name of the function, if the function has an actual name (it's not anonymous) and fn is your function reference, then you can do console.log(fn.name) and see if there is a name. You could also examine fn.toString() and see if it reveals the source code of the function. Sometimes it will and if the function is a named function that may show you its name. This won't show you what file it's in, but you could perhaps then grep for something you see in the source to find it.
Here's an example from point #3:
function hello() {
return "hi";
}
// create function reference that points to my function
const fn = hello;
// log info on that function reference
console.log(fn.name);
console.log(fn.toString());
Every time console.log is executed, a line saying undefined is appended to the output log.
It happens in both Firefox and Chrome on Windows and Linux.
If you're running console.log() from a JS file, this undefined line should not be appended.
If you're running console.log() from the console itself, it makes sense. This is why: In the console you can type a name of a variable (for example try typing window) and it prints info about it. When you run any void function (like console.log) from the console, it also prints out info about the return value, undefined in this case.
I tested both cases on my Chrome (Mac ver 23.0.1271.101) and indeed I see the undefined line when I run it inside the console. This undefined also appears when I write this line in the console: var bla = "sdfdfs"
Although talkol´s answer is ok, I try to put it more straight:
JavaScript is designed as a dynamic language which means that the type (string, void, boolean …) of a function return value is not pre-defined. If a function does not use a return statement or an empty return statement with no value, JavaScript automatically returns undefined. That means that in JavaScript every function returns something, at least undefined.
So the function console.log() in Chrome console either uses no or an empty return statement, so that the return value of this function is undefined. This function return value gets also displayed in the Chrome console.
[If somebody know where to find the definition of the console.log() function in Google Chrome source code, please comment with the link, then we can even go further and look at the real code, would be nice.]
Sources:
https://stackoverflow.com/a/20915524/1744768
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
Follow the picture to solve this problem:
Ctrl + Shift + J
Console environment in your browser is designed to take the very last statement expression in a program and evaluate it for a value and then show you that value.
The result of an assignment expression is the value that was assigned.
So the JavaScript engine just does an assignment but the console does one extra step which is to set whatever my last statement is, give you that value back. That’s why it prints 2:
In statements that have no return value you get something like undefined.
undefined is the return value of the console.log() in Chrome developer tools. You will get undefined if you do the following in Chrome developer tools, and you will see that you get undefined even though x has the value 3.
> let x = 3
> undefined
What you can do is simply create your own console.log like function with a return to change this behavior when doing a lot of coding in the developer console. Here is an example of what that looks like in the developer console:
console.log('I hate seeing the next line stating the obvious.')
I hate seeing the next line stating the obvious.
undefined
log = function(l){return l}
function log()
if(1 === 2){console.log('1 is not equal to 2.')}else{log('No Shit Sherlock.')}
"No Shit Sherlock."
That undefined you see in console is the return value of the function:
check out these two variants:
This one returns nothing
This one returns something:
Remember one thing. Any function that has some definition will always return something, If you skip the return keyword, it will eventually return undefined when you call it.
If you're using console.log to emit multiple values in a single line, here's a hacky alternative:
var1 + ' ' + var2 + ' ' + var...
(Better ideas welcome, this might blow up in certain circumstances)
Every time console.log is executed, a line saying undefined is appended to the output log.
It happens in both Firefox and Chrome on Windows and Linux.
If you're running console.log() from a JS file, this undefined line should not be appended.
If you're running console.log() from the console itself, it makes sense. This is why: In the console you can type a name of a variable (for example try typing window) and it prints info about it. When you run any void function (like console.log) from the console, it also prints out info about the return value, undefined in this case.
I tested both cases on my Chrome (Mac ver 23.0.1271.101) and indeed I see the undefined line when I run it inside the console. This undefined also appears when I write this line in the console: var bla = "sdfdfs"
Although talkol´s answer is ok, I try to put it more straight:
JavaScript is designed as a dynamic language which means that the type (string, void, boolean …) of a function return value is not pre-defined. If a function does not use a return statement or an empty return statement with no value, JavaScript automatically returns undefined. That means that in JavaScript every function returns something, at least undefined.
So the function console.log() in Chrome console either uses no or an empty return statement, so that the return value of this function is undefined. This function return value gets also displayed in the Chrome console.
[If somebody know where to find the definition of the console.log() function in Google Chrome source code, please comment with the link, then we can even go further and look at the real code, would be nice.]
Sources:
https://stackoverflow.com/a/20915524/1744768
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
Follow the picture to solve this problem:
Ctrl + Shift + J
Console environment in your browser is designed to take the very last statement expression in a program and evaluate it for a value and then show you that value.
The result of an assignment expression is the value that was assigned.
So the JavaScript engine just does an assignment but the console does one extra step which is to set whatever my last statement is, give you that value back. That’s why it prints 2:
In statements that have no return value you get something like undefined.
undefined is the return value of the console.log() in Chrome developer tools. You will get undefined if you do the following in Chrome developer tools, and you will see that you get undefined even though x has the value 3.
> let x = 3
> undefined
What you can do is simply create your own console.log like function with a return to change this behavior when doing a lot of coding in the developer console. Here is an example of what that looks like in the developer console:
console.log('I hate seeing the next line stating the obvious.')
I hate seeing the next line stating the obvious.
undefined
log = function(l){return l}
function log()
if(1 === 2){console.log('1 is not equal to 2.')}else{log('No Shit Sherlock.')}
"No Shit Sherlock."
That undefined you see in console is the return value of the function:
check out these two variants:
This one returns nothing
This one returns something:
Remember one thing. Any function that has some definition will always return something, If you skip the return keyword, it will eventually return undefined when you call it.
If you're using console.log to emit multiple values in a single line, here's a hacky alternative:
var1 + ' ' + var2 + ' ' + var...
(Better ideas welcome, this might blow up in certain circumstances)
I have a lightweight logging function. To keep it simple its something like:
function log(msg){
console && console.log && console.log(msg);
}
which i have in a seperated file "Logging.js".
Now from another file lets say "hello.js" i do:
log("Hello");
Now if i make calls to that function the console will always display Logging.js:2 as the place where the logging occured. So there is no chance to determine from where the message originated. The log message should say hello.js:1.
Is it possible to find out from where the log function is called, find out the line number of the call and then manipulate the line number displayed by the console?
Or is there an easier solution?
Caution, please read carefully: Its NOT about the current line number. It's about the line number from where the function call occured and its about how to manipulate the log output so that it displays the line number FROM WHERE the function has been called. It's not about Errors or catching Errors.
I already postet this question some time ago and it was downvoted and declared as a duplicate of How can I determine the current line number in JavaScript? in no time, but it its not. This question is not about finding the current line number.
You can construct an Error object and look at the "stack" property:
$(function() {
function a() {
b();
}
function b() {
c();
}
function c() {
$('#e').html(new Error().stack.replace(/\n/g, '<br>'));
}
a();
});
JSBin
That'll show:
c#http://jsbin.com/aLuKUSU/1:33
b#http://jsbin.com/aLuKUSU/1:29
a#http://jsbin.com/aLuKUSU/1:25
#http://jsbin.com/aLuKUSU/1:36
b.Callbacks/c#http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:3
b.Callbacks/p.fireWith#http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:3
.ready#http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:3
H#http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:3
The "stack" property of Error objects is not standardized, but it's available in Firefox, Chrome, IE10+, and Safari 6. (Don't know about mobile browsers.)
Because I'm lazy, I created a function log that basically is just an abbreviation of console.log:
function log() {
console.log.apply(console, arguments);
}
Whenever I call this, I see the logged item in Google Chrome's Developer Tools, with on the right hand side the line number where the item was logged. However, this line number is always the same, because the actual console.log call is located at one specific place in the code (namely where I declare the log function as above).
What I also tried is just:
var log = console.log;
but this always throws an error: Illegal invocation. Weird, but I guess that's not a possibility.
How can I make a shortcut to console.log, with Developer Tools showing the line number where log was called, rather than where the actual console.log call is located?
When I reported it, it was refused but the answer was simple - create the shortcut like this:
var log = console.log.bind(console);
This doesn't leave out the line number, whilst you can call it like log(...).
I just created a module to do that.
Check out: https://github.com/ahlechandre/consl
Install
npm install consl --save-dev
Usage
const { cl } = require('consl');
cl('Outputs a message on the Console using a quick');
In my case I've set up an AutoHotKey shortcut with Ctrl + Alt + L as below:
^!l::Send console.log();{Left}{Left}
The good thing is it brings the cursor back inside the brackets for quick typing.
Tried a few things, but I don't think you can do this. As soon as you wrap console.log, the line nr will be the line where this wrap is to be found in the code. I suppose we have to live with that then?