8.4 Chrome DevTools - Inspect + Debug

Being a web developer, it is inevitable that we are always working with a web browser. In this video, we'll be taking a look at the developer tools that comes with Chrome. Firstly, I will definitely like to point out the Chrome Developer Tool documentation, which is really comprehensive. And they will go through each of the tabs that the Chrome Developer Tool comes with. Right at the bottom of the first page of the Chrome Developer Tool, do check out the further resources to either watch a show to keep yourself updated or even take a course to learn more about the Chrome DevTools. Now for this video, I will be using the nightly build for Chrome browser and that is Canary. So if you go ahead and download the stable version of Chrome, as of today, I am running version 27. But if you run and install Chrome Canary, it will have this slight yellow logo and, let me switch to Canary now. And once you query the chrome:\\version, you will notice the word Canary will be appended to it. So from now on I'll be using Canary, so that we can also explore some of the new features that will be coming up in Chrome. So here I am in my desktop which has two very simple files, index.html and style.css. Briefly, let's go through the code. In our index.html, we have three divs with a class of box and with some default text of paragraph inside. And the style.css is also very simple. It comes with a box. And then some classes which can be applied to the box, as well as a hover effect along with a paragraph. Now let's explore some things that we can do with the Chrome DevTool. Now in order to invoke the Chrome DevTool, you can either go ahead and right-click an element and then go to Inspect Element. Or you can go Option+Command+J. And this will basically fire up the Chrome DevTool. And here you will see the various panels that the Chrome DevTool comes with. The very first thing I like to do is actually go to the settings right at the bottom right. And then turn on the Show toolbar icons. And the other thing that I did was also Show rulers. So if you like that these effects, you can also do so. The other thing is the placement of the Chrome DevTools. So if you come at the left bottom corner and if you press and hold, you can basically do a vertical or a horizontal outline. So I will just switch back to horizontal so that you can see everything. Let's go ahead and explore the elements panel very briefly. Now as I hover over each of the div tags in the elements panel, notice how it also kind of highlights it on the page. Now the cool thing about the DevTool is that you can even expand and collapse it. And more importantly, you can live edit it. So let's say we can go back to the class here. And let's add a class of alert. And there you go, it will give us a red background. How about editing it as an HTML? If you do so, the entire div will be expanded. And here you can, not only go and let's say edit the attributes, I'm gonna add in warning, but you can also go ahead and edit the paragraph, let's say, hello. On the right-hand side, we will similarly see the CSS properties. Why don't we go ahead and change some of them? So let's say for warning instead of this brownish color, why don't we just make it plain yellow? Yup, so you can do all this sort of live editing and see immediately the effect here. You can also go ahead and add in more CSS properties. So let me just try to add a border. So let's say 10 pixel solid green, so that you can just see it and there you go, you will have the green border here. If you hover over other properties, you'll see this tiny checkbox. You can even go ahead, and, uncheck them and these properties will not be applied anymore. Now, lets go ahead and try to hover it. Now, I don't like this grey hover color. How can I change the hover style? In order to change the hover style, we will come ahead right over here. And once we do this, you will see that the element states will be appearing. So we can chose the hover. And this is exactly where we can change the color. So why don't we change it to, say, light blue. And there you go, once you hover over any of the boxes, it will give you light blue color. And once you uncheck it, it will bring us back to the non-hover state and you can go ahead and hover to make the hover effect. The other cool thing about any color is that if you click the color itself, it will come up as a color palette so it is really neat to kind of go ahead and do a little bit of [UNKNOWN]. Let's, let's explore something called the computed styles which you will see right at the top here. If you expand it for the selected item, it will give us all the styles that are computed for the box div. If you come right at the bottom, there is also this section called metrics. Let's expand it. And this will give us the CSS box model. Notice how you kind of hover over it, it will tell us what are the margin, padding. Why don't we go ahead and change the border? So let's say instead of 10 border, we change it to 20. And there you go, the border at the top is changed to 20. How bout a little bit of margin at the bottom? So, I can also go ahead and change the margin to say 50. And there you go, it is also reflected there. The interesting thing is, if you come ahead and come to the style, there you go, these will be added to the element.style. And if you come to the HTML section, you will see that it will be added as the inline styles. Now what if you want to know exactly where these styles are coming from, from our stylesheet? In this case, here is exactly our line denoted. And once we click it, it will basically open up the file in the source panel. The very first thing we notice about the source panel is that we can actually directly edit it. So let's say we have the alert box here which is an orange color, why don't we go ahead and change it to plain red? And notice here once you change it, it will not only be reflected directly here, there will also be a tiny asterisk sign here telling us that, hey, this file has changed. So we can go ahead and do Cmd+S, and it will save it. So now you're wondering, okay, so it has saved it, so how do I get back my previous styles, or rather the original styles? So in order to go back to our previous revisions, we can do a right-click, and then do Local Modifications. And once you do the local modifications, you see all the revisions right here and if you select one by one, there you go, it will show us what are the deletions and additions in the line. And of course, you can also go ahead and apply that revision itself. Now let's say you are happy about this and you want to, in fact, apply the background color red. You can go ahead and do the same thing, right-click and if you Save As, you can even save as to the folder you want. So let's save it, of course it will replace the file because my original project is in the desktop. And once you try to see what is the value, there you go, you will see alert has a background color of red. So, that's pretty neat. Whenever you want to edit something in the browser, go ahead, save as, and you will get exactly what you edited. Now let's say you have selected the second div item and you want to copy the entire HTML structure. Now in order to find out what is the current selected item, in Chrome you can do $0, you will basically get to the entire DOM structure that I have selected in the elements panel. Now the cool thing is if you want to copy this entire selected HTML structure, you can do copy and then pass in a $0. Of course it will be undefined, but once you come back to your text editor and say a new file, you can paste it right there. I find this really useful when I want to copy a snippet of HTML. Finally, you can go ahead and select more stuff, for example, the head. And once you query $0, it will change to the head, because that was my currently selected one. But the cool thing is that, if you do $1, it will go to the previously selected item. And $2, the previous, previous selected item, $3, and so on. And if you want to clear your console, you can simply do Cmd+K. Next, let me move on to debugging JavaScript. Here, once again in my desktop, I have two files, one is index.html and script.js. Now index.html is really simple which only calls the script.js, and my script.js is even simpler. It is just declaring a variable called a, and a is equal to apple. Now, of course, if you go the console here and you query a, it will tell you that it is apple. Let's now go to the sources. Over here, if you click script.js, yup, it will show us exactly what we have typed in. Let's explore some of the ways that we can debug our JavaScript code. Here we will go through what our watch expressions. And we will also go through what our breakpoints, as well as step in and step out of the code. Firstly, to explore the watch expressions, let's expand a, a little bit. So let's say in the second line, we will have a equals to I love apple, and then in the third line, we will says a is equals to I love apple and a banana. So I'm gonna refresh it and yup, this will be updated here. Now notice here, if you want to watch expression, let's try to watch say a, and of course immediately, it will say a, the final value of a is I love apple and banana. Now let's say you want to step through it or rather you want to see how this variable a changes. So for this, we will set a breakpoint. So, in order to insert a breakpoint, we'll come right to the line number here, and then just click here. And, once you click, you will see this blue symbol which will be denoted as line number under breakpoint. Once I do Cmd+R to refresh it, notice that it will be paused in the debugger because we are putting a breakpoint. And notice here, it will also say a equals to apple. Why? Because right at the start of line two where the breakpoint is, a is actually apple. The cool thing about the variables, you know, to the script.js is also that when you hover over it, notice that it will also tell you that hey, a is actually apple. So now, in order to go to the next line, we will press this little arrow, the curved arrow, which is called step over. Once I do that, notice that it will go to line three, and it will say, I love apple. Let me do that one more time. It will say I love apple and banana, and once you do it, yep, it will exit it. The entire program has been executed. Now this is, of course, a very trivial and simple example so that we know how to use watch expressions for any variable in your program. Why don't we add in another variable? This time, I'll say b equals to 0. And right after this, we will basically say b equals to say 2 plus 5 times 2. And now when I come back to the browser and refresh it, yup, this will be paused in the debugger once again. Now in order to clear all the breakpoints, we can either do uncheck here and then refresh. The breakpoints will no longer [INAUDIBLE] halt the program. And inside the watch expression, let's add in b. Great. And now I have the breakpoint which I will, once again, set at line two. And, why don't we refresh it? And yes, it will be paused in line two, but notice b is 0. Next, let's do a step over. B is still 0, b is still 0 on line five. And finally, b is 12. And there you go, we have completed executing the entire program. Now let's explore these two features. One of them is step into next function, and the other one is step out of current function. So in order to explore these, I will do a very simple function right at the top. And this function will be called doublePlusOne. So basically, it will take in the number and then it will return twice the number plus one, which is basically doublePlusOne. Right at the end, I will also call the b equals to doublePlusOne and then I'll pass in b. So, I have refreshed the file, and all the current changes with the new function and calling the function doublePlusOne is written there. So next, what we will do is, do a breakpoint once again, and this time, I'll do it on line seven. And let's refresh the file. And there you go, it is paused in the debugger, now notice what happens when I do step over, it will go to the next line, next line, next line and it will go to the function declaration and it will immediately come back and then exit. Now what if you want to go inside this function declaration? Let's try this one more time. So I'm gonna refresh it, so now I can do a step over and when it calls the doublePlusOne, and if I want to explore what is doublePlusOne, I will need to go step in two. So notice here, now it will go inside var answer equals to two times the number. If I go step into, once again, it will go to line number three. But notice what happens when I go step out, it will actually come back to the function call. But let me repeat this one more time. And this time I will step into, yup, it goes to the line two, and if I want to continue inside the function, I will once again press step into. Yup, it's going to answer plus one. And step out once again. So I hope in this simple example, you will get a glimpse about how to do JavaScript debugging right in the browser. Using watch expressions breakpoints or even step over into and out of the function. Lastly, let's explore this feature under the sources panel called snippets. So when we come under source panel and we click the source tab here, you will find that under the Sources tab, there will be our project folders that we have currently opened. And next is the content script. And lastly, is the snippets. So Chrome Canary allows us to create our own snippets and store it. So let's create a very simple snippet for us. So we will come here and right-click and then do New. And let's call it query.js. So here we can do console.log and then we can say hello, and save it. And now in order to run it, we can right-click and then Run. And it will come up on our console. Of course, we can kind of bring up the console using this little icon right at the bottom. And yup, you will see the hello there. Now, this is barely useful. Here, you can even input in more scripts. So let's say you have sudden scripts that you want to execute every time a certain web application is being built. So let's say just for the purpose of demo, I'll do document.getElementsByTagName. And let's say whenever I'm developing, I always want to know what are the paragraph tags. So I will save it, and now when I run it, notice here all the paragraph tags will be here. Of course I leave it to your imagination and more importantly, how you want to use the snippets. But it definitely comes in very handy to query certain things or even execute certain commands. And note that if you quit your Canary, so let me quit it and start Canary once again. So, here I am in my about blank page, and if you fire up the depth console once again, and come to the Sources panel under Snippets, guess what, query.js will still be there. And you can execute this command anywhere, so let's just go to tutsplus.com. And once the website is there, you can go ahead and run it. And there you go, it will not only say a little hello, but also display to you all the paragraph tags that are available. And lastly, let's explore a little bit in the console log. Of course you will know how to execute this, but let me do it in a fun way in Chrome. So here I will add in a %c, to denote that it will be changed via styling, and then I can add in stylings. Let's say color is green, and say font-size is x-large. And once you execute it, there you go, you have a styled console log output. So next time you want to do a little bit of inspecting of HTML and CSS, or even edit them, as well as do a little bit of JavaScript debugging, do make use of the fantastic DevTools to increase our productivity in coding.