TECHY360
Everything You Need To Know About Tech

Debugging Front-end: Console

0 106

Developers write code and make mistakes, of course, not intentionally, but still. The older the error, the more difficult it is to find and fix it. In this series of articles, I will try to show what you can do using Google Chrome Devtools, Chrome plugins, and WebStorm.

This tutorial will cover Console Chrome, the most commonly used debugging tool. Enjoy it!

Console

To open Chrome DevTools:

  • Choose More Tools> Developer Tools from the Chrome main menu.
  • Right-click on any element of the page> “Inspect”.
  • Press Command + Option + I (Mac) or Control + Shift + I (Windows, Linux).

Look at the “Console” tab and what is there.

The first line
is to clear the console

top- The default Console context is top if you are not checking any element or context of the Chrome plugin.
You can change the execution context (top frame of the page).

Filter:
Filters console output. You can filter by severity level, regular expression, or hide network messages.

Settings:
Hide network – Hide network errors such as 404.
Saving Logs – The console will save logs between updates or navigation.
Selected Context Only – we can change the context of the logs in [top].
Custom posts only – hide warnings created using the browser [violation].
XMLHttpRequests Logs – there is nothing to explain.
Show timestamps – timestamps are displayed in the console below.
History autocomplete – Chrome remembers what you typed;)

Selected Console API

The console will run every JS code you type in the context of your application. Therefore, if something is available in a global area, you can easily see it through the console. You can also simply enter and see the result of the expression, for example: “null === 0”.

console.log – description

By definition, console.log maps output to the console. This is the part that you probably know; what might be new to you is that console.log stores a reference to the object you are outputting. Take a look at the code below.

var  fruits  =  [ { one : 1 } ,  { two : 2 } ,  { three : 3 } ] ;
console . log ( 'fruits before modification:' ,  fruits ) ;
console . log ( 'fruits before modification - stringed:' ,  JSON . stringify ( fruits ) ) ;
fruits . splice ( 1 ) ;
console . log ( 'fruits after modification:' ,  fruits ) ;
console . log ( 'fruits after modification - stringed:' ,  JSON . stringify ( fruits ) )

When debugging objects or arrays you need to be careful. We see that fruits before modification contain 3 objects, but they are no more. To see the results at this particular moment, use JSON.stringify to keep the information visible. Of course, this can be inconvenient for large objects. Do not worry – we will find a better solution later.

console.log – sorting object properties

Does JavaScript guarantee the order of the properties of an object?

4.3.3 Object – Third Edition ECMAScript (1999) An
object is a member of type Object. This is an unordered set of properties, each of which contains a primitive value, object, or function. A function stored in an object property is called a method.

Later … in ES5, it has changed a bit – but you cannot be sure that your object properties will be ordered. Browsers have implemented this in various ways. If we look at the result of Chrome, we will see something disturbing.

var  letters  =  {
  z : 1 ,
  t : 2 ,
  k : 6
} ;
console . log ( 'fruits' ,  letters ) ;
console . log ( 'fruits - stringify' ,  JSON . stringify ( letters ) );

Surprise! Chrome sorts properties in alphabetical order to help us. I can’t decide if I like it or not, but it’s good to keep that in mind.

console.assert (expression, message)

Console.assert throws an error if the calculated expression is false. Essentially, assert does not stop further code execution. This can help debug long and confusing code or find errors that occur after several iterations.

function  callAssert ( a , b )  {
  console . assert ( a  ===  b ,  'message: a! == b ***** a:'  +  a  + 'b:'  + b ) ;
}
callAssert ( 5 , 6 ) ;
callAssert ( 1 , 1 ) ;

console.count (shortcut)

Simply put, this console.log, which counts how many times it has been called with the same expression. WITH THE SAME.

for ( var  i  = 0 ;  i <= 3 ;  i ++ ) {
	console . count ( i  +  'Can I go with you?' ) ;
	console . count ( 'No, no this time' ) ;
}

As you can see in the example, only the same row was counted.

console.table ()

A great debugging feature, but sometimes I’m just too lazy to use it, although it will likely speed up my work … so please don’t make this mistake. Be effective.

var  fruits  =  [
  {  name : 'apple' ,  like : true  } ,
  {  name : 'pear' ,  like : true  } ,
  {  name : 'plum' ,  like : false  } ,
] ;
console . table ( fruits ) ;

Great … firstly, you are all well placed on the table; secondly you also addedconsole.log. Chrome works well, but that’s not all.

var  fruits  =  [
  {  name : 'apple' ,  like : true  } ,
  {  name : 'pear' ,  like : true  } ,
  {  name : 'plum' ,  like : false  } ,
] ;
console . table ( fruits ,  [ 'name' ] )

We can decide whether we want to see all or only some columns of the entire object.
The table is sortable – just click on the column heading that you want to sort.

console.group () / console.groupEnd ();

Related Posts
1 of 26

This time we will start with the code. Let’s see how grouping works for the console.

console . log ( 'iteration' ) ;
for ( var  firstLevel  =  0 ;  firstLevel < 2 ;  firstLevel ++ ) {
  console . group ( 'First level:' ,  firstLevel ) ;
  for ( var  secondLevel  =  0 ;  secondLevel < 2 ;  secondLevel ++ ) {
	console . group ( 'Second level:' ,  secondLevel ) ;
	for ( var  thirdLevel  =  0 ;  thirdLevel < 2 ;  thirdLevel ++ ) {
  	console . log ( 'This is third level number:' ,  thirdLevel ) ;
	}
	console . groupEnd ( ) ;
  }
  console . groupEnd ( ) ;
}

Great if you are working with data. Digging deeper …

console.trace ();

Trace prints a stack trace to the console. Good to know, especially if you are developing libraries or frameworks.

function  func1 ( )  {
  func2 ( ) ;
}
function  func2 ( )  {
  func3 ( ) ;
}
function  func3 ( )  {
  console . trace ( ) ;
}
func1 ( ) ;

console.log vs. console.dir

console . log ( [ 1 , 2 ] ) ;
console . dir ( [ 1 , 2 ] ) ;

Here the implementation is browser dependent. Initially, dir was supposed to store a reference to the object, while log was not. (the log showed a copy of the object). Now, as we saw earlier, the log also saves the link. Let’s stop here, because they display objects in different ways. Not very difficult and useful when debugging HTML objects.

$ _, $ 0 – $ 4

$ _ returns the value of the last evaluated expression.
$ 0 – $ 4 – Works as a historical link to the last 5 proven HTML elements.

getEventListeners (object)

Returns event listeners that are registered on specific DOM elements. There is also a more convenient way to set listeners, but I will talk about this in the next article.

monitorEvents (DOMElement, [events]) / unmonitorEvents (DOMElement)

If any of these given events happen, we will get information on the console. Until you run unmonitored for this event.

Selecting items in the console

To open this screen, press ESC on the Element tab.

If there is nothing else related $

$ () – document.querySelector (). Returns the first element matching the CSS selector (for example, $ (‘span’) will return the first span).
$$ () – document.querySelectorAll (). Returns an array of elements matching the CSS selector.

Copy output

Sometimes you work on data. You might want to create a draft or just see if there is a difference between the two objects. Selecting everything and then copying can be difficult. Fortunately, there is another way.

Right-click on an object and click Copy or Save as global. After that, you can work with the saved item in the console.

Everything in the console can also be copied using copy (‘object-name’).

Styling console output

Imagine that you are working on a library or a large module that your entire team/company will work with. It would be nice to highlight some of the logs in dev mode. You can do this – try the code below.

console.log (‘% c Truly hackers code!’, ‘background: # 222; color: # bada55’);

% d or% i is an integer
% f – floating point value
% o – extensible DOM element
% O – extensible JS object
% c – CSS output formats

This is all for today, but not all in this thread. Below you will find links for further reading.

Command Line
APIs Console APIs from MDN Console APIs from
CSS Selectors 

Comments
Loading...

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More