1.1 Introduction

Hello, everybody. My name is Umar Hansa, and thank you so much for checking out this introductory video to the Step To Us course. In this course we'll have a look at the Google Chrome Developer Tool specifically, and we're gonna get a feel for how to incorporate it into our work flow. First of all some quick background for those of you who haven't used the DevtTools. Here I am on this tutorial error for textPlus and funnily enough it's also about the DevTools. And one of the nice things about the web platform is you can right-click on any page and view the source. And just like that you get a rough feel for how it was constructed. However one of the nice things about the DevTools is that it has a much more contextual view of the current state of the page. To open up the DevTools, I right-click on the page like I've just done, and I'll select inspect element. Immediately you'll notice on the left-hand side, there's a representation of our dom. On the right-hand side, there's all the styles. Since I inspected that header, which is right over here, I can actually add some style. So I changed the color to green. And as you can see that's nice, and easy and straightforward. When browser developer tools were first emerging, they were very commonly used for just inspecting an element and changing the styles in it. But now you can do so much more. For example, you can execute arbitrary JavaScript. You can view the network traffic, and you can view all sorts of performance stats. Here's a sneak preview of one of the later lessons where we take a look at canvas inspection, and that's the ability to take a canvas on this page and understand the individual draw calls which executed to actually draw the image to the canvas. And for those of you who work to get your webpages working in mobile devices, we also take a look at the new responsive design mode to find out how to easily test our webpages at various responsivity levels right through the DevTools. Let's chat a bit about who this course is for. Now at the beginning, I gave you a very simple example of just adding a style to a DOM element, but that's really only the tip of the iceberg. I've dedicated entire lessons to each panel in the dev source. So maybe you're a service engineer and instead of having to go to the terminal and execute code requests just to see what headers are showing up, you can come right to the network panel and see the headers here. Alternatively, maybe you're a designer and you work with a front end developer. I'd suggest at least being familiar with the DevTools and learning how to do basic things like adding styles, maybe triggering things like hover pseudo classes. So you're able to be really specific in your feedback to the front end developer. And maybe you are a front end developer yourself. If you've worked on some complex web apps, you'll know that performance is really critical. And this is why we'll take a detailed look at the timeline panel to understand how to really get rid of that junk from your webpages while scrolling. We'll also get to cover a few experimental features. So I'll just click on that settings code and I have access to a few nifty settings in the DevTools and I can come over to experiments and enable some features which aren't necessarily ready for the stable version of Chrome, but you can still enable and get a feel for what will be coming. Hopefully you'll find this course useful, whether it's for your friend in web development workflow or even your design workflow, and if so, I'll see you in the next lesson.