I know one of the most basic debugging tools in JavaScript is console.log(). The console comes with several other useful methods that can add to a developer’s debugging toolkit.
but
I'm pretty confused about console.table() method. Is anyone explain?
The Console Object:
The console object gives you access to the browser’s console. It lets you output strings, arrays, and objects that help debug your code. The console is part of the window object, and is supplied by the Browser Object Model (BOM).
There are four different ways of outputting a message to the console:
log
info
warn
error
while
there is another method that is:
console.table()
let me explain
The table method displays an array or object as a table.
console.table(['Javascript', 'PHP', 'Perl', 'C++']);
example:
const superhero = {
firstname: 'Peter',
lastname: 'Parker',
}
console.table(superhero);
Related
Still hoping someone help me with guidance.
I am newbie learning by doing, not able to access an array property inside an object when it is clearly there as shown from same console log output.
The array property of the object is:
console.log("vCompanyStakeholders",vCompanyStakeholders, "vCompanyStakeholders['buyer']",vCompanyStakeholders['buyer'],"vCompanyStakeholders.buyer",vCompanyStakeholders.buyer );
Console output (as shown in image too):
vCompanyStakeholders {}buyer: (4) [{…}, {…}, {…}, {…}]proto: Object vCompanyStakeholders['buyer'] undefined vCompanyStakeholders.buyer undefined
Console
Background:
I am initialising following in state : "companyStakeholders" : {},
Then in a separate function I am getting data using an API and inserting a few arrays in the above field. buyer (in the above question) is one of the arrays populated.
Then just before the above statement, in my question, I am saving the companyStakeholders in the variable vCompanyStakeholders as follows "const vCompanyStakeholders = this.state.companyStakeholders;"
3> My intention is to use the buyer array by sending it as parameter to another function after the above statement but the array is coming as undefined. Hence using console.log for debugging.
As we can clearly see from the console.log that the buyer array exist. I am confused why I cant extract it into its own variable for further use. I understand being a newbie I am making some very silly mistake
Console.log(vCompanyStakeholders.buyer['PROPERTY IN BUYER YOU WANT TO LOG'])
I have an object downloaded from firebase which is of type Bug (Custom type). However, when I tried to console log the output with the following code
console.log('bug',this.bug);
I get the following result. It is what I expected where I can go on and do things like
console.log('company', this.bug.companyName)
However, I want to get that key value as well. Howe can I do that? I tried to do
console.log('company', this.bug.key)
console.log('company', this.bug.$key)
and both of them does not work
try to run
console.log('company', this.bug["$key"])
remember property lookup on objects is either
obj.someKey // or
obj["someKey"]
I realy cant understand javascript. Maybe someone can explain me the difference:
validationErrors[value.element.name] = value.method;
console.log(validationErrors);
alert(validationErrors);
console.log(validationErrors) returns well formed array with values, and alert(validationErrors) returns empty array. Why?
The console is more of a debugging environment and can understand the JS objects that are passed in the log function.
Alert on the other hand is a dialog box and will coerce its arguments into string values. Which is why the output is not as well formatted as the console.
Here is a little snippet of what is actually happening in the alert box.
var validationErrors = [ 2, 3, 4 ];
console.log(toString(validationErrors));
Output >> "[object Window]"
It's also best practice to use the console for logging purposes and not the alert box.
you can try this
alert(JSON.stringify(validationErrors));
Alert have some limit according to browser it varies but most You'd probably be best staying under 1000 characters though, as many browsers seem to begin to truncate after 999.
And if you are giving object in alert it will never reflect the values so prefer console for object and other data type can be used in alert but its not a good practice.
console give proper view of data like object in array can be studied easily in console.
Alert is used to print messages, which means it is used to display string values. When you pass anything other than string to alert, it calls .toString function of it and prints the output.
Now why did you get a blank string?
An array is supposed to have indexed values only. So you can do array[index] = "bla bla". But when you do array["something"] = "something else", it adds a property to that array (since arrays are also objects in Javascript).
According to MDN
The toString() method returns a string representing the specified array and its elements.
In simple, it will loop over length of array and join all elements with ,(comma)
But you do not have elements in it. You have set properties. So length is 0 and hence it returns ""
Following is a simulation
var a = [];
a["test"] = "foo";
console.log(a);
console.log(a.toString());
alert({})
Reference
Alert
Array.prototype.toString
All objects in Javascript are passed by reference. So when you passed something to console.log() and it would be changed in code further, in console you will see changed value. On other hand, alert() displays message box and stops code execution, so in message box you see values exactly as they are at alert()'s call time.
For debugging purposes, you may want to use browser's debugger - I recommend Chrome Dev tools. There is free course from codeschool.com to help you discover such great tool: https://www.codeschool.com/courses/discover-devtools
I'm writing a custom console.error function so that every time an error occurs I receive an e-mail. To send the error in e-mail body I use JSON.stringify(). The problem is that it is missing some properties. See the two images below:
Email:
In console:
And here is how I use JSON.stringfy:
JSON.stringify(arguments, null, 4);
I've been googling and found people with the same issue, but so far no answer.
Could you help me, please?
Edit : See this.
Since your Error object is inside another object, you might have to use 2 stringify calls :
JSON.stringify({
0: ...,
1: JSON.stringify({errorObject, ["message", "arguments", "type", "name"]}),
});
Or something like that.
If I'm getting this correctly, the informations you are lacking are in the Error object. My guess would be that JSON.stringify calls .toString() for each object inside it. Though, for an Error object, maybe the toString() function doesn't return ALL the informations you want, versus what you see in the console.
Maybe you'll have to call the Error object's .description() function yourself.
Please help me in printing the complete object using console.log method. If I am simply putting the name of the object it simply prints [object] [object]. But I want to print the object with complete hierarchy.
For an example, I am getting object in the following method,
getObject : function(responseObj) {
console.log('Object hierarchy is'+responseObj)
}
This simply returns [object] but I want to see the complete hierarchy in the developer tools. Please see, I am using sencha.
Use console.dir, and don't concatenate...
console.dir( responseObj );
Or if you want a label, use a comma to pass multiple arguments.
console.log('Object hierarchy is:', responseObj)
The problem here is that you are concatenating an object onto a string, so it's not doing what you are expecting. Instead of putting it all into one console.log call, do two, the first with the text you want, and the second with just the name of the object in it.
getObject : function(responseObj) {
console.log('Object hierarchy is:');
console.log(responseObj);
}
edit:
If you are logging into a text/non-interactive console, that doesnt let you explore the object, you'll need to implement a custom inspection function, something like this gist will get you started. What this is doing is echoing out the property name, and the value it finds step by step, but pay attention to what it says there about scoping.
edit edit:
didn't know about console.log taking multiple parameters, never needed it :o handy though!