Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:11Length:1.6 hours
Toolsforjs
  • Overview
  • Transcript

3.1 Browser Development Tools

Every browser has built-in tools that let you manipulate the document, view network traffic, and debug JavaScript code. We’ll look at Chrome’s development tools in this lesson.

Related Links

1.Introduction
1 lesson, 00:40

Free Lesson
1.1
Introduction
00:40

2.Code Editors
3 lessons, 23:10

Free Lesson
2.1
GitHub's Atom
09:30

2.2
Adobe's Brackets
06:06

2.3
Microsoft's Visual Studio
07:34

3.Runtime Environments
1 lesson, 10:41

3.1
Browser Development Tools
10:41

4.JavaScript Components
3 lessons, 39:01

4.1
Require.js
13:31

4.2
Modernizr
09:43

4.3
Handlebars
15:47

5.Node Packages
2 lessons, 23:47

5.1
NPM and Browserify
08:42

5.2
Grunt
15:05

6.Conclusion
1 lesson, 00:42

6.1
Conclusion
00:42


3.1 Browser Development Tools

If your code editor is the most important tool that you will use when writing JavaScript, then a very close second is the set of built-in developer tools that you can find in any browser. So I'm primarily talking about client side development here. However, you can find similar tools for environments like node. And for this lesson, I'm going to be using Google Chrome's development tools. However, you can find the same things inside of other browsers. For the most part, every browser has the same set of tools. They might have a few variances here and there, and of course, they will be laid out a little bit differently. But for the most part, what you see in this lesson is going to be available to you In any browser. And this is the document that we are using in this lesson. It is a very simple document. It has a paragraph that has an id of helloWorld. We're pulling in an external JavaScript file called main.js, and inside of this JavaScript file, we are retrieving that paragraph element and then setting its border. Then we have some JavaScript code embedded in the document, where we have a for loop, and we are writing the counter to the document. And then finally, we have some CSS. For the body, we are setting the font size to 18 pixels, and then for p elements, they have a padding of 5 pixels, and a foreground color of green. So let's go to the browser, and let's pull up the developer tools. We do so by going to the menu and then More tools, and then there's this Developer tools option. And you can see that the keystroke is Ctrl+Shift+I. You can also get to the developer tools by pressing the F12 key, and that's pretty universal across all browsers. If you want to pull up the developer tools, press F12, and chances are very good that they will come up. And Chrome organizes the tools in these tabs. We have Elements, Network, Sources, Timeline, and so on and so forth. We're primarily going to focus on Elements, Network, and Sources, as well as the Console. The other tabs are useful, but I find Elements, Network, Sources, and Console to be the most important. So we're gonna start with Elements because that is what we have here. And you can see that we have the HTML of the document, but if you notice, this is the actual HTML as it is rendered within the document itself. This is not like we are pulling up the context menu And then viewing the source, because this IS the response from the server, whereas what we see in the Elements is the actual HTML. So as we manipulate the elements within this Elements pane, we will be changing the document, and if we make any changes to the document, either through JavaScript or using the Console, we would see those changes reflected here in the Elements pane. You can also automatically get to the Elements pane by right-clicking on an element within the document and then choosing Inspect element. So I have right-clicked on the paragraph element for Hello World, and if I choose Inspect element, then that's going to take us to the Elements pane and it automatically selects this p element. And as you select elements, over on the right-hand side, you can see that the style information changes. So if we select our p element that has helloWorld, we can see that it has a style of 1 pixel solid black. And we also see this check mark. If we uncheck this box, we see that this styling has been removed from the element. Of course, this isn't making any changes to the document itself. If we refresh the page, then that check mark is back. But we can use these tools to play around with not only the HTML, but the CSS as well. And we can also see that the tool tells us where these CSS properties are set. Here we have element.style, that means that this is set with the style attribute. And of course, we can see that over here as we look at the HTML. But then we can see that we have a p element rule, where the padding is set to five pixels, the foreground color is green. And we can see that this is inside of the index.html file. If we had an external CSS file that had styling for p elements, we would also see that listed here as well. And in fact we can see the user agent stylesheet. And if we scroll all the way down, we can see the dimensions of this element. Not only the actual heighth and width, but we can see the padding, the border, and then the margin. And if you scroll up a little bit, we can also see what is inherited from parent elements. In this case, we have body, where the font size is 18 pixels, so we can uncheck that if we wanted to. And we could see that the changes were automatically updated within the browser. And we can also add or change these values. So if we wanted to see what this looked like with blue foreground color, than we can easily change that. And if we wanted to add another rule that had text-decoration, we could set it to underline, and then we could see what that looked like within the page. And of course, once again, this is not updating the document itself. That's rather impossible to do. So if we refresh the page, then all of those changes are gone. Now inside of the Elements pane itself, we can modify this HTML. If we wanted to change the value of the style attribute, we could do that by pulling up the context menu and choosing edit attribute, then we can change this to two pixels, solid black, or if we wanted to add an attribute. Let's say we wanted to add a CSS class, so we could add attribute, class = class-1. And if we had a rule for class-1, then we would see those style properties applied to this element. We can also remove elements. We can copy and cut, so we can move elements around if we needed to. And so the Elements pane gives us a lot of flexibility and a lot of functionality, but a lot of it isn't really useful for JavaScript development. The network tab, however, is extremely important, because it lists every HTTP request that is made from this page. That includes JavaScript, CSS, images, anything that is loaded via HTTP. And this is important because it also loads requests made with XMLHttpRequest objects. So you can see the method that the request was made with, the status of that request, the content type of the response. You can also view the actual content of the response by clicking on the resource. So if you are hitting a particular URL, and you want to ensure that you are getting the correct data, you can do that. And then we have the Sources tab, which lists all of these sources in our web page. So right now we have index.html. We can also view the JavaScript file, main.js. So if we wanted to, we could debug our code in this Sources tab. So if I want to set a break point here on line four in main.js, and if I refresh the page, then we're going to hit this break point and code execution is going to stop. In here we can inspect the different parts of this code, like for example, if we wanted to inspect this element variable, I can move the mouse cursor over element and we get a whole host of information about this variable. We can see that it contains a p element with an id of helloWorld, and then we can see all of the properties that are part of that dom element object. And as we are paused here, we can also change anything about this element object that we might want to. For example, if we want to change its inner HTML, we can go to the console, and since we are paused inside of this anonymous function, we could use element because we are in scope of a function with this variable. And we can set the inner HTML to Foo, and we can see that being automatically changed within the document. But a lot of times we want to pull up the console as we are in the Sources tab, and you can do so by simply pressing the escape key. So let's change this back to Hello World, and then we will resume code execution. You can click on this icon here or you can press the F8 key. Let's view index.html. First, let's clear this break point and we'll go back to index.html, and we'll set a break point on line 15. Let's refresh the page and we are going to hit this break point, so code execution stops once again and we can inspect these variables as well. We can see that i = 0. We can move over document, and we see that this is the document. And over here, on the right-hand side we have this Watch Expression. This is something that I added earlier. But you can easily add an expression to watch, like for example, a variable. Simply type the variable name, and there you go. You can also have other types of expressions. We could set i = 0, and that of course is true, but as we step through this code, we're going to see that i is going to change in value, and thus this other watch expression is going to change to evaluate to false. So as I step through this code, we see that i changes value to 1, and now our other conditional expression changes to false. So as you are stepping through code, you can watch anything that you want to watch, as long as it is in scope of where the code is paused. You can also view the call stack, which in our case, we don't really have one. But if we were inside of a function that was called from another function that was called from yet another function, then we could see that call stack. So there's a lot of functionality that the Sources tab gives us, and most of that functionality is for debugging our code. So there you have a very brief look at the developer tools given to us by the browser. Once again, these are tools that you will find in any browser, be it Chrome, IE, Firefox, Safari, or Opera. They are incredibly important to us as we run and test our code in the browser.

Back to the top
Continue watching with Elements