6.1 Extensions and Conclusion

Okay. I thank you so much for watching this Step Tools course. I really appreciate it. This is the last lesson. And in this lesson, we'll be taking a look at DevTools Extensions. A DevTools Extension works kind of similarly to a Chrome extension. But, it has some different capabilities. For example, it can actually attach a panel to the DevTools. So just like how audits and console is a panel, you can actually make a DevTools Extension with a name a functionality of your choosing. That's useful for more general DevTools Extensions. You can also have more specific ones. For example, in the elements panel, you can even attach your own ping right here. Which in turn, has access to the currently selected download. So you can provide some extra functionality to your user there. Note in this lesson, we're not really going to cover the creation of dental extensions, but rather just using them and what's out there and what they're able to provide to us. On the DevTools documentation page, there's actually a dev tools extension gallery, which lists a few creative dev tools extensions. Do check it out. We'll be picking a few from these, and looking at them. To start out, let's have a look at PageSpeed Insights. So this is the dedicated extension page on the Chrome webstore. And I'll hit this free button. And accept the permissions. Cool, I get a little notification saying, that it's been installed. And I will start using it. So here I am on the Chrome webstore homepage. I'll open up the DevTools. And as you can see, we get this new panel called page speed. I can click on this, and, this is kinda nice. As you can see, it's like a PageSpeed experience, but right here in the DevTools. I'll hit start analyzing. And we get results very similar to that of the page speed service. One thing that I really like is all the resources that it mentions. You can actually click on them and be provided to a link to preview them right there and then. I'll close that. One touch which is even nicer than that. If I click on Minify CSS. Okay, I get the usual link to the CSS file in question. It's telling us that we could've optimized it. And as you can see, it can be. I'm gonna close that. You can actually see, we get the option to see optimized content. And it's given us, a sort of customized Chrome extension specific URL. I think that's really cool. So, if I click there, I'm taken to a minified version of the content. So I don't even have to make that optimization myself. I'll close that. And we'll take a look at the jQuery debugger. So I'll go install that. And it's worth checking these extensions, and really making sure that you're comfortable with the permissions that they need. Even if the extension is open source, it can sometimes be tricky to find out how it uses your data. So you do want to be careful, and only install extensions from authors that you trust. So I'll add this one. Okay, let's check out this jQuery Debugger. I'm gonna go to the Twitter home page and open up the developer tools. And as you can see, I get this new panel called jQuery Selector Inspector. But I'm not too interested in this. I'm gonna head on over to the Elements panel. What I'll do is, I'll select one of these links at the bottom. And as you can see, this extension has used the capability of providing a custom pane. So here we have jQuery data, i'll select that. But there's nothing there. So let's set one. So we know that dollar zero is the currently selected element, if I wrap that in the jQuery object. I now have that domino-ed as a jQuery object. And we also know that dollar_ returns the last evaluated expression. So I can use that and even get auto complete here. And I'll just set a property of hello with a value of weld. Okay, I'll close that. Probably, have to refresh that pane. And there you go. You can see these properties are now visible. So don't get me wrong. This isn't any shiny new functionality. You're able to get access to these without the extension. However, this extension has been made to cater for common use cases for people using jQuery. There's also this jQuery events pane which lists the events that is registered on the domino-ed. You have the ability to trigger. You can even see a snippet of the code. And you get the selector which was used during event registration. What else have we got? This is SnappySnippet one which I really like. What it basically does is given a selected download, it will try and extract the styles that have been used for that download and allow you to use elsewhere. Let me show you what I mean. So I've got the notification that its been installed. I'll head on over to the Amazon page. Let's say I'm interested in this search box here. What happens if I want the CSS for it? I can go inspect element. I could find the parent element that I'm interested in. So I'll edit that as html, copy all of this, copy the corresponding CSS and so on. But, this is a very long and manual process. If I head on over to Snappy Snippet, I can actually select create a snippet from the inspected element. And it creates the html and the CSS ready for me to copy and paste into my editor. In fact, even better than that, it gives me the ability to send that straight to JS Bing or JS [UNKNOWN]. So I'll do that. And as you can see, we've got the search box right here. And I don't know about you, but I think, that's pretty accurate. And, of course, you'll find a bunch of functionalities missing. And it's not always completely accurate, but it's a pretty good attempt. There's also DevTools redirect which I don't have much luck with and I'm not sure if it's being actively maintained. The general idea is you can say, hey DevTools intercept all the network resource requests. And when you see a request for this particular file, serve this specific response. And that specific response can be something totally different. That's on your file system, for example. There's also Gulp DevTools, which is a really fun one. And if you use grunt, there's also that available as well. Just have a look for Grunt Dev Tools. So I'll go to a simple page. So here I am on this page which I have hosted locally. But the page itself isn't significant. What is, is this new panel that I have called Gulp. I click there and what's really nice is, I have access to all the tasks that the Gulp file registered. There's the CSS task and I can click on it and actually trigger it and see the output right here. So that's really nice. I should note that I've also had to go to my terminal and run the Gulp DevTools Tool which I installed over MPM. But you could imagine, how cool it would be, for example, to have a JS hint task. And you could, again, just to give you an example, change your JavaScript within the sources panel. Go back to Gulp. And actually, see the output, for example it did JS report that everything is okay. So that's all for this Developer Source Course. I really appreciate you watching it. It means a lot. I hope you learn a few bits and pieces, and also how you can properly incorporate the DevTools into your web development workflow. Bye everyone!