 Hey everybody, what's up? It's Rob Dodson. Welcome back to the Alicast show. Today I'm really excited to talk to you because I want to show you what just landed in Chrome DevTools version 60. That is the new Audits panel. So follow me over here to the laptop. I'm going to bust open my DevTools with this little site that I've been working on. And if you haven't opened the DevTools in a little while, when you open it, you might actually see something like this. I'm going to run a little magic command here to make this show up. So if it's your first time opening the DevTools since Chrome 60 landed, you just updated your version, you'll get this little what's new panel that shows up. And here we see a number of new items that shipped in Chrome 60. The one that we are interested in is the new Audits panel, which is this sort of like preview report card that we're seeing over here on the right. So if you click on that link, it'll take you to the help page, which talks a little bit more in depth about what the Audits panel is and how it works. But sort of the general gist of things is that under the hood, it's using a program called Lighthouse, which checks your site for a number of different things. So performance, progressive web appiness, accessibility, and other best practices. So you run that, it's going to give you this report card and you can dive into each of those subtopics and see if you have little areas that you need to improve upon. So in my site, what I'm going to do is I'm going to close this. I'm going to click on this new Audits button right here. And I'm going to, you see, we got this sweet Lighthouse logo. I'm going to click perform an audit. And there's a number of optional things that you can turn either on or off. I'll just have everything turned on for this first pass. Run the audit. And you'll see that a lot of stuff starts happening the second you click that button. So what Lighthouse is doing under the hood is it's checking the responsiveness of your site. So you'll actually see it does like mobile device simulation does network throttling. So it'll it'll see how your device does on like 3G or how your site does on offline, right? So a lot of interesting stuff there turning off CSS. What does it look like then? And also testing a number of accessibility topics. Now under the hood, the way we are testing accessibility is we are using the axe core library. And if you remember from previous episodes, axe is a super useful tool made by the folks at DQ, which will test a bunch of different accessibility issues on any site. If you haven't seen those episodes, by the way, I will leave links to them down in the show notes. You can catch up there. But yeah, basically the Lighthouse program works off of axe core and now it is just natively part of Chrome DevTools. So now that the report card has come back, I can see my score here. Now I have not tried to make this site a progressive web app. So I'm getting a very lowly 45 on that issue. But the thing that I'm interested in today is accessibility. So right now I'm scoring a 91, which is not bad, but we could improve things a little bit. So clicking on that, I can see where I've got a few topics that I could tune up. So the one that I'm interested in is here where it says image elements have alt attributes or that they're missing basically. So I can click on this little drop down and I'll explain a little bit more about the error and how I can go about fixing it. But if that information is still not clear, we've also got a little bit of learn more text. So you can click that, it'll open up a doc and it'll tell you in sort of even more detail, like, you know, why is this audit important and how do you fix it? What I think is probably the most interesting and exciting part of this whole experience is if you click on view failing elements, here is sort of the magic moment. I can see this element right here. But what if I click on it, it'll actually open it over in my DevTools elements panel. So that's really one of the cool things that we get from integrating Lighthouse directly into DevTools itself, this ability to sort of hop back and forth between panels. So I can see now I've got this image here, I can right click on it and say, hey, let's scroll this into view. All right, cool. So now it is easier to inspect and know exactly what I need to work on. So yeah, I've got this this teapot here. And I know it's missing some alt text. So easy to fix. I'll swap over to my code editor. I'll say like alt, a vintage teapot with teacups, something like that. Go back to the page refresh. And let's try and run our audit again to see if we have cleared up that error. So perform an audit. This time I won't do all the other audits. So I won't do like, you know, progressive web app or best practices or whatever. I'm just going to do my accessibility check. So it'll run a bit faster. So that's going to happen. Okay, so the results are back. And I've now got a 94 in accessibility. I scroll down a little bit and I can see that yeah, I still have a few issues, but I have resolved that missing alt text error. So yeah, that about covers it for today. If you want to learn more about the audit's panel or lighthouse, I will include some links down in the show notes. Also feel free to leave me some comments down below as well. Or you can hit me up on a social network of your choosing. As always, thank you so much for watching. And I'll see you next time.