Console Tab in Chrome Developer Tools

Console Tab

 Today I am going to talk about some features of the Console tab which are again very helpful for debugging web applications.

Log

Gone are the days, when people used to put alert() statements everywhere throughout the code in order to check variable values or control flow in the JavaScript code. Now we can use console.log() statements in order to see what's going on in the client side code. We can output all the values and the results are visible in the Console tab.

Warn

If we want to output the message as a warning, we can use console.warn() statement. These messages appear with a yellow warning sign. These are useful if you want to put some messages for less likely scenarios. We can even filter all the warnings together.

Info

Messages output using console.info() statement come with a blue info sign. These can also be filtered.

Error

Using console.error() statement we can output the error in the console tab. It appears with a red color. We can also navigate to where the error occurred directly as the source is displayed right next to the error. 

Assert

console.assert can be used for testing. For example,

console.assert(10 == 5*4,"Items Not Equal");

So it will break at this point and take us to the script where the test failed.

Group

Using a lot of console.log statements can become unwieldy. So in order to manage log statements better, we can group them together.

        console.group("Group Example");

        console.log("Message 1");

        console.log("Message 2");

        console.groupEnd(); 

So here the 2 log messages will come under a single group. Similarly, we can also use console.groupCollapsed() if we want the group to appear as collapsed.

Time

In order to find the time taken by a snippet of code, we used to get the current time before and after and subtract the two timestamps. Using console.time() makes it more convenient and quicker to find out the time.

        console.time("Loop Time");

        for (var i = 0; i < 100000; i++) {}

        console.timeEnd("Loop Time"); 

console.time() denotes the starting point and console.timeEnd() denotes the end point.

dir

console.dir() prints the JSON representation of the supplied object. For example,

console.dir(document);

will print the whole document's JSON representation.

dirxml

console.dirxml() prints the XML representation of the supplied object.

console.dirxml(document);

will print the whole document's XML representation.

Count

Using console.count we can keep the count without maintaining a counter explicitly. Another very handy feature for debugging.

Profile

Using console.profile() we can start and using console.profileEnd() end profile. Profile is pretty useful to find out what all code got executed and how much time each part took. Its similar to SQL Server profiler.

Trace 

In order to see the stack trace I can put this statement anywhere in my JavaScript code. This will show me the stack trace of who called this statement.

Execute JavaScript

Other than these useful commands, we can also execute any JavaScript code in the console tab directly. I can inspect or change the values of any variables or elements.

Conclusion

In this post, we discussed about different console tab commands and how they can be helpful in debugging and development. Once you start using it, you will realize how useful it is in everyday development and debugging.
For future updates to my weekly blog, please subscribe to the blog.

Elements Tab in Chrome Developer Tools

When I see people struggling with Internet Explorer Debug tools, or making a small UI change in the application and re-running the whole solution through visual studio, I feel like it's high time I write a post on Chrome Developer tools. I was discussing the Chrome's power with a friend of mine and he suggested me to write a post on it. Chrome Developer tools are far ahead in features as compared to what's available with any other tool for convenient application development and debugging.

So let's hit the F12 key (or right click Inspect Element) and start rolling. In general, there are 8 tabs, I am going to focus on the Elements tab in this post.

Elements Tab

Editable DOM

The Elements tab shows nicely formatted HTML. We can easily navigate through the DOM structure and understand how the document is laid out. We can see information for any HTML element like the class, id, divs, head etc. You can edit anything like classes or text and see how the page looks. This is great if you are debugging or see how the page will look once its rendered. We don't have to go to Visual studio, change some small text and run the solution again to see how it looks. You have the editor right here in the browser.

You can even see the DOM element structure at the bottom. When we select an element, it's parents are shown to the left. We can select any parent from the bottom line and navigate through the HTML easily.

Search/ Ctrl+F

We can search for any element in the page. We can even use XPath and CSS selectors. I use CSS selectors pretty often. For example, I want to see how many elements use this class I will use ".myClass" in my search box. I think this is really cool.

CSS Styles

On the right hand side, we see the Styles window. We can play with the css right here and see the results immediately. Once we have a satisfactory look and feel, we can just copy the css and paste it into our solution. Doesn't it make our life easy.
The CSS window allows us to check/uncheck any property, search for the properties, add new properties and edit existing ones. One thing that I want to explicitly mention which is very helpful is when I edit the color property, I can use color picker and choose which color I want to use.

Toggle Element State

If we want to see how a specific element looks in different states like focused or active, we can test it by just using these checkboxes as shown in Fig. This is particularly helpful when we have multiple nested elements and we need to see how these elements state affect one another. Hovering a mouse on them activates hover on both the nested elements. But with these we can debug each individual item separately.

New Style Rule

Plus Sign adds css style to the specific class you are currently accessing. We can add css to the specific class and we can examine the results applied to the whole class simultaneously.

Computed Tab

The computed tab shows the final computed style rules that are rendered on screen. If we click on the arrow to the left of the style, it shows the source file and line number.  

DOM Breakpoints

This is yet another useful feature while debugging. If we want to see who is adding, removing or modifying elements to a specific DOM element, we can  put a breakpoint on the DOM element. As shown, we have three options:
i) Subtree Modification 
ii) Attributes Modification
iii) Node Removal



This will stop the application at any point where the specific action is invoked. This helps us in debugging issues related to any kind of dynamic DOM manipulation. 

Properties

This window lets us edit the properties of any HTML element on the fly.  I can edit the innerText property and see the results on the fly.

Event Listeners

This is one feature that I don't like much. This shows the events attached to a specific element. However, clicking on it doesn't always navigate us to the actual callback function. For example, if I used jquery to bind click event to a specific element, navigating to the click event shows me click event in jquery file which is of not much use to me. I think this will improve in future but for now this is helpful sometimes, not always.

Conclusion

This is the power of just the Elements tab of Chrome. I will explain other tabs in future posts. I hope it was useful and you got to learn something new out of this post.

For future updates to my weekly blog, please subscribe to the blog