 All right. So, welcome to our presentation on Google's Chrome developer tools. So, this is a kind of more generic talk about how to work with the browser and as a web developer. It is not necessarily WordPress specific, but it's also something that if you're a WordPress developer, you should be using these tools on a regular basis as part of your work, just because obviously everything we do is going to involve the browser in some way, shape, or form. So, knowing your way around it and knowing how to investigate and debug and do all these different types of things are going to be pretty important. So, I'm Michael Wood, WP Scholar online. So, if you just Google WP Scholar, you'll find me. And we are going to jump in here. Let's see. There we go. There we go. All right. So, we have kind of a few different ways to open up the Google developer tools. So, one of the easiest ways is to go to the little dot, dot, dot nav menu item and drop down to the more tools section. And then there is a developer tools menu item there. So, that's kind of the manual way of going about getting there. You can also just right click anywhere in the web page and it will give you a little drop down like this and there will be an inspect section. And so, that inspect will also open up the developer tools. And it will highlight whatever element you clicked on to inspect as well. The other thing it will do. Oh, yeah. That's an example there. So, if I right clicked on the Google image there, it would highlight that particular image down here on the bottom. All right. So, whoops. Sorry. My screen keeps losing focus from people coming in the room. So, you can also use shortcuts to open up the Chrome developer tools. This is typically how I do it just because I like to keep my hands on the keyboard as much as possible. But on a Mac, you can hit command, option and then that will open the developer tools there. On Windows, just so you know, all the shortcuts that I'm going to mention from here on out are all going to be Mac shortcuts. But you could basically substitute command with control and for pretty much all the other shortcuts and it should be basically the same. But in this case, if you're on Windows, the shortcuts are different here. So, control shift I is kind of the long form one, but it's way easier just to hit F12 if you're on Windows machine. So, what I'd recommend you do is, you know, especially if you have two screens or if you can do a split screen, you know, while you're watching this presentation, go ahead and open up the developer tools and kind of toy around and play around and see how things work as we go through. So, we're going to start out with some basic stuff that, you know, as a beginner developer, you may not be aware of, but as a more advanced developer, you probably will. And we'll work our way into more advanced things as we go. So, don't think this is going to be too basic or too advanced. We're going to work our way up. But even the advanced parts, I think for newer developers are still just as useful. So, we've kind of sectioned this out into different use cases. So, the first use case is we have HTML, right? All web pages have HTML and we've got to work with it every day, right? So, WordPress outputs your HTML and we're going to figure out how do we manipulate in the browser to test things without necessarily having to go edit a theme file, you know, to see if what we want to do is going to work. So, like I said, you can right click and hit inspect and that will pop up in the DevTools. I like to have it on the right-hand side. There's a little dock icon where you can dock it to the top or bottom or even in a separate window. But this is kind of my typical preferred layout. So, the element selector, you know, when you hover over, so if there's a little icon here, you can click. And then as you hover over things on the page, it will highlight them like it does here and show you a little bit of information. And it will also highlight it in the markup. So, expand the markup to wherever that element is. So, if you're just trying to navigate around and see what's what, that's an easy way just to click that little icon there in the top left of the developer tools and then you can hover over things and see properties and markup and all that kind of good stuff. So, once you kind of find your way around, another way of navigating the DOM, the HTML in the window here is to use the arrow keys. So, if you use the up or down arrow, it will move to the previous or next element. And the left and right will expand and collapse. So, you know, if you have an element that you can expand, you can hit the right arrow and then you can go into the child by moving down. Or if, you know, an element's collapsed and you hit down, it will take you to the sibling. So, that's the difference with the down arrow there. But very nice shortcuts to be able to kind of navigate around a little bit with the keyboard. Like I said, I like to use the keyboard a lot. You can also hit command F and this will pull up the search bar. So, you can type text into the search bar and it will actually search the HTML to find that text. So, you can search for, you know, text inside of an element. You can search for a class name. You can search for an ID. You can search for all kinds of stuff. So, just important to be aware that, you know, while you can do command F, if you have focus on the left-hand side of the screen, that will just search the text that you see on the page. When you do that, command F in the elements panel, that will actually search the HTML. So, once you're looking at an element in the elements panel, you can right-click on it and hit edit attribute. And that will let you edit whatever attribute that you clicked on, right? So, if it was a class name or an href or, in this case, a target, you could edit that. You can also just double-click and that will allow you to edit that particular attribute as well. And then you can always select an element and hit edit as HTML. And what that's going to do is it's going to basically turn that markup into an editable area where you can edit the HTML markup for that. And then, so if you needed to, for example, inject an element onto the page or something like that, you could actually just manually type it in and see kind of what it's going to look like. And then, you know, if you need to go edit a WordPress template or something after that test passes, then you can, you know, just copy it from the elements panel. So, sometimes you might want to move elements around just to see how things might affect layouts or things like that. And again, we're kind of using the Google home pages, our playground here, but so these elements here, this list of elements on the right corresponds to all of the essentially entries over here on the left. So you can see we have one highlighted and that highlights this guy here. You can actually use command F or control F on Windows and hit the up or down arrow keys and it will swap those elements as you go down the page. So you're basically moving that element down or that element up. So, not, I don't use it super often, but it is handy to know about. You can also duplicate an element. So for example, let's say you have a page with, you know, maybe a, it's displaying a list of posts, but you want to see what it looks like if there's, I don't know, three more or something, you can actually duplicate an element by right clicking on a given element and hitting that duplicate button. And likewise, you could do the same if you want to remove one, you can right click and hit delete and that will delete that particular element. And again, all of these changes that you're making are just within the browser. And if you reloaded the page, all those changes you make will go away. So this is more of just how do you test your HTML and just, you know, make sure you get it right in the browser before you go editing template files. So the other kind of use case we have obviously is CSS. So there's a lot of style sheets. You might be working with WordPress. So we're going to kind of see how we can, how we can identify, you know, where styles are coming from and where we need to go to change them. You know, do they belong to a plugin? Do they belong to a theme? So whatever element you click on in the elements panel, that little styles panel that's off to the right there will show you the specific styles associated with that element. And there will be a lot of different types of selectors that may be used to target that element in your CSS. And there may be a lot of different files that have rules associated with that. So there is a way to, yeah, I just saw the question. Once you edit in the browser, can you then save the changes you made? Typically if you edit in the browser, it's just temporary and you really know the page is gone. But we do have some more advanced tips and tricks later where you can actually persist these changes directly to the files that you are working with in WordPress. And then you can literally just do stuff in the browser and it saves it for you in your project. So we'll talk about that here a little bit more. The, let's see, as far as font size, I just saw that other question. You can manipulate the styles here to change the font sizes. So for this particular link element, for example, you could manipulate the rules here or even add a new one that says font size 32 pixels, whereas this here says 14, you can update that. So you give you all the styles over here on the right. And then hovering over any given style is going to reveal a little checkbox and you can use that checkbox to toggle that particular style off and on. This is very helpful when you're debugging and trying to say, okay, well, you know, I got some weird style issue going on and you want to kind of toggle things on and off and see what might be affecting that particular element. So easy to just toggle those things on and off. The other thing you can do is directly manipulate the value of a CSS rule. So in this case, we have margin left eight pixels. And you could just double click on eight pixels and it makes it editable and you can change it. The up and down arrows will increment by one and it'll keep the pixel value. So if I hit the up arrow, it would take me to nine pixels. If it down, it would take me to seven pixels. But there's also a couple of other shortcuts that you can use to increment in different ways. So let's say you wanted to move an element by, I don't know, changing the margin or something. You or the width or the height or whatever. You can actually hit command and then the up or down arrow to increment or decrement by a hundred. So that's helpful if you're trying to move something up the page, down the page, make it significantly bigger or smaller. If you have some smaller value, maybe you're just trying to change a text size for a heading. You can bump up and down by 10 if you use the shift plus the arrow and then if you're maybe dealing with something like rims or ends and you want to have a much smaller value, you don't even incrementing by one might be too much. You can use the option and then up and down arrow keys to increment by a tenth. So very helpful to be aware of that. Here is another super cool tip. So a lot of times you go and you make a bunch of changes and you're like, aha, I figured out if I had this element and that element and that element styles, it fixes my issue. So now I need to take whatever I've done in the browser. I need to apply it into my project. So one easy way of just saying, hey, what are the changes that I've made in the browser? You can go to the little dropdown menu, the dot, dot, dot menu in the top right. But not the one. There's two dot, dot, dot menus. So you'll see there's one here at the level of the address bar and there's another one here at the level of the panel where the DevTools is. So you'll hit the one inside the DevTools. And so you'll hit more tools and you go to changes. And what that's going to do is pop up this little window down here and any changes that you've made here are all highlighted in a single place here and it tells you what file it's associated with. So if you've made changes across, say, styles that were coming in from three different files, those three files would show here in the changes that were applied to each of those. So the other thing you can do is filter by styles. So if you're, again, maybe you're trying to figure out, I don't know, what elements on the page have Z-index or something like that. You can actually type Z-index or whatever CSS rule you want. And that will filter the list of what you see in this styles panel. So as you navigate the DOM or whatever, you can see specifically the thing that you're interested in. There's also a computed section. So that little styles panel, there's a tab over called computed. It actually has this little nice image that gives you an idea of like, okay, so the element that you have highlighted is X-wide by X-tall. It has X amount of padding, X amount of border, X amount of margin. And you can even double-click inside of the values in here and change them directly. But this section here in the middle is the list of actual computed values. So you can actually, you know, there could be 15 rules that are affecting a particular element, right? And they all might be trying to give different font sizes, but only one of those rules is actually going to override and be the one that's in use, right? So you can actually expand a particular property. And it will show you the list of things. And then when you hover over, it gives you this little arrow icon. It's like a circle. If you click on that, that jumps you to the actually I guess the winning rule, I should say, in the styles panel so that you can see exactly what is being applied to that element. And of course, it tells you here in the list to the top of the list. You know, there's one rule that made it bold and there's another rule that made it 500. If we have time at the end, I can do a live demo, but there is a lot of stuff in this. So it's very possible that we might not have time. But oh, yeah, yeah. There's the text size. Command plus will increase the text size. All right. So the other thing you could do is toggle class names. So if you click in an element and you're in the styles panel here, there's a dot CLS. And that basically will show you a list of all the class names. With little toggle check icons next to each class name. So if you uncheck it, it removes that class from the element. So if you're working with, oh, I don't know, something like tailwind or some other, you know, CSS framework. A lot of these classes get used and they have very specific things that they do. And sometimes you want to remove some of those just to see if that fixes an issue. Other times you want to add them. So you can also click in the little add section and then type a new class name and then hit enter. And it will add it to this checkbox list. And it'll also, as you type, if that, even before you hit enter to add it to the checkbox list, it affects the element immediately. So you can see the results as you type. You can also add custom rules. And you can also add custom rules. So if you have an element selected and you hit the, the little plus button next to the CLS that we were just using, it will actually add a new rule for you automatically. In this case, you know, Google's got some interesting class names and stuff here, but you can't, it'll auto populate this and you can, you can manipulate that. You know, it highlights it for you right after you hit the plus button. So if you wanted to tweak it, you could do that. And then you can click in here and add whatever rules that you'd like. And again, yeah, just that tip I mentioned earlier, if you double click on the, what do you call it, this little box model. You can actually edit the values associated with that directly. So, you can also, you know, edit the values directly. So, yeah, sorry. The screenshots I have in here, they may, depending on the resolution of your computer, it may be hard to see, but there's not really an easy way to zoom in. But I will share the, the slide deck on the meetup page. So after fact, you can always go back and look at all this. So hopefully it'll be more visible. So let's see. Yeah. So you can edit those. And then the other cool thing is that you can actually force element states. So for example, if you're working on a WordPress menu and, you know, you need to make sure that you force the hover state on an element. So you can see the styles associated with the dropdown or whatever that may be. You can actually right click on. The element in the elements panel gives you this little dropdown. You hover over force state. And it gives you all the different states that could be associated with that element. So in this case, it's a link. So you'll have the active state, the hover state, focus state, the visited state. All those things that sometimes you forget to style when you're working with CSS. You can force a given state and then investigate the styles and manipulate those and then tweak them in your, in your theme. So the other thing is a lot of times we, I know as a developer, I've worked with designers who have such an eye for their designs and the fonts and things that are used that a lot of times we'll have two fonts that are so similar. I can't tell the difference, but the designers like that's the wrong font. And so I have to verify, you know, what the font is, right? So you can actually click an element, go to the computed panel and then down here at the bottom and it'll tell you what the rendered font is. So in this case it's Helvetica. But obviously if you had some other font that you were trying to use, it would, it would show you what's in use. And you can obviously determine if that's the one you intend or not. So it just gives you an easy way to double check that. The other thing is that you can emulate a print media, right? So if someone were to print out your webpage, for example, you know, not everybody does this, but, you know, if you're creating a theme that's going to be publicly released, you might want to have a print style sheet. So if somebody tries to print pages, they look nice and don't get all weird with the way that they work. So you can go to the more tools, go to rendering, and there's this little section here called emulate CSS media type. And you can go to print and it will, it'll actually change what you see on the left-hand side to be what you would get if you were to print the page. One of the things that a lot of people will add in a print style sheet is links are very difficult when you print them out because you don't get the URL, right? So you only get the text. So you can actually add a CSS rule that will show the HTML or the link after the text. So a lot of people will do that in their print media. So working with JavaScript. So JavaScript is another common thing that everyone who's a developer works with. So we're going to kind of take a quick look at what does it take to do debugging in the browser. So unlike back in debugging like you would do if you had PHP files, where you'd have to set up all kinds of stuff to get the debugging working, Chrome developer tools has it ready to go. And all you got to do is open up the developer tools, set your breakpoint in whatever file that you want. And then so, well, so you open up the DevTools, you go to the sources tab. So there's the sources tab up here. And that shows you all the files that are loaded. So in this case, we're clicking on this, get started JS file. And then we're finding inside the file, know the line of code that we want to stop at. And then we'll do whatever we need to on the left-hand side of here to trigger the code to run to that point. And that may not be clicking on something. It could just be reloading the page. And then the browser would stop there. So this little panel off to the right of this is the debug panel. So there's some buttons up here. One is going to resume the code. There's one that will actually step you into the next line of code or step over the next line of code. Or, you know, there's some ways to kind of navigate in and out of functions. So if you haven't used that before, I recommend you just playing around with it. At the end of the presentation, the slide deck does have a link to a guide from Google on how to use this better. So if you're interested in this, there is a whole kind of tutorial you can follow for this. But it is cool because you can see variables that are scoped to the window versus the function versus, you know, whatever your code is doing. Another thing, you know, when you're working with JavaScript, a lot of times files get minified. So when the files are minified, they're really, really hard to read, right? Like there's just this, everything's mashed together. And, you know, a lot of times names of things are replaced with letters, which is not very helpful. But at a minimum, you can click this little double brace button down here in the bottom left when you're looking at a file. And that will format it for you. So even though some of it still might not make the most sense, if you're trying to set a breakpoint or something like that, it can be very helpful to kind of see what else going on there and where you might need to do that. If you click an element in the elements panel, and you have the console. So the console down here at the bottom, you can hit escape. And that will toggle on and off the little console window at the bottom. So if you're on the elements panel and you hit escape, it'll pull up this console. If you click an element and then you type dollar sign zero in the console, it's basically referencing the element that you last clicked. So if you click another element, you do dollar sign zero. It's going to be whatever that is that you clicked on. So this is very helpful if you're trying to test out some JavaScript. And you want to make sure that you want to spend more time focused on the code that you're trying to work with and not trying to select the right DOM element. So it gives you just a quick shortcut to say, hey, here's this thing. I want to manipulate it and see if this code is going to work. And technically there's a dollar sign one and a dollar sign two. So if you want to reference things in whatever order you clicked on them, zero is the first. One is the second and so on. So there's also this really cool feature here, you know, because a lot of times if you're working in the JavaScript console, you can type a line of code, but you can't type a whole function. So it's kind of hard to work with something where you're trying to test a decent sized chunk of code. But you can go to the sources panel and then over here on the left, normally it lists all the files and stuff. You can click on snippets and you may have, there's like a little double arrow thing that may list out some other things. So it may be hidden, but when you click on snippets, you can actually add a new snippet and it basically creates the JavaScript file that you can just type whatever you want into. And then when you, you know, you right click on it, which I think, yeah, here we go. So when you right click on it, you can actually run it and it'll run it in the console. Well, if you have a console log, it'll pull it up and show you that, but it'll also do whatever in the browser window here as well. So we kind of have both going on in this situation, but you can type code, run it. And these snippets actually persist across browser sessions. So you can close your browser down and go to a different page and run the same snippet on another page. So it's actually kind of helpful. There's a lot of cool little snippets that other people have created, which can do all kinds of cool stuff like help you diagnose SEO issues on a page or, you know, there's a lot of creative things out there, but snippets are really helpful. A great way to explore JavaScript in the browser without necessarily having, you know, especially if you're trying to learn new stuff. It's a great way to, to just test things. So dealing with, you know, the responsive nature of, you know, WordPress themes. You always want to make sure obviously that you do a lot of testing to make sure things work on desktop, things work on mobile, things work on tablet. And so you can actually click this little device toolbar button, which is the second icon from the left, top left in the DevTools. And this will pull up what they call responsive mode. And I'm going to use some models here. And so you can actually manually edit the, the numbers here to change the width or height of the viewport. It also gives you these little handlebars on the left and the bottom where you can kind of resize. And then you can also use this little dropdown here to select a specific element or a device. So pixel five, iPhone XR, you know, all kinds of different devices in here. And then it'll auto resize everything to that, to that size. And even if you reload the page, what will happen is it'll, it'll use the proper, what you call it, user agent and it'll emulate tapping instead of clicking and stuff like that as well. It's not a perfect, you know, it's not actually the same as using the device itself, but it is pretty close. And so it's really good for testing. The other thing that we work a lot with in web development is the actual requests that are happening between, you know, the server and the client. So we want to, a lot of times we might want to do some performance optimization or we just want to kind of see what else is going on. There is a network tab and this will list all of the HTTP requests that happen for a given page load. And so by default it just shows you everything here. It's just a list of files and whatever the status code is and some other details as well. But you can also filter by type. So in this case, we're filtering to see all the JavaScript files. And so down here on the bottom, it tells me there that six out of the 41 requests, which are the ones that are highlighted here are JavaScript. So you can also filter by status code. So if you have some specific status code, maybe you're looking for anything that's boring or redirecting or something like that, you could actually filter the list of requests by that. So there's a lot of different things you could search by this list here, you know, searching by name or path, things like that can be very helpful if you have, for example, you're trying to figure out, you know, how many of these CSS files are coming from a theme or a particular plugin, you could actually type the name of that plugin slug or a theme slug and it will narrow that list down to things that are coming from that typically. Unless things happen to have the same name. If you click on a specific item, it'll pull up more details on the right hand side here. So here we click on the Google.com page load. And we can see that, you know, the status code and a lot of that stuff as well as the response headers, the security headers and things that were sent. So you get to see a lot of that kind of detail. One little hint, caching can be a little bit of a problem when you're working as a developer. So in this network panel, there's a checkbox to disable the cache. And if you disable the cache, that will prevent caching. So you will avoid a lot of the need to do cache busting when you're dealing with your WordPress theme development. So the other thing that we have here is a preserve log. So one of the things that you run into is you'll go to a page and then it redirects you somewhere else. And you're trying to figure out, you know, what redirected me, like, why, what did I get, how many times did I get redirected or was it just once that I, is this some sort of loop, all of these kinds of things. So you can, you could check this preserve log and then you can go to a particular page where you're expecting a redirect. If you filter by doc, it will show you the list of files that were loaded. And then, you know, it'll give you a way to trace, you know, this thing redirected from non HTTP to HTTPS. And then it redirected from this path to that path or something like that. A little helpful hint, if WordPress itself is doing a redirect, you can actually click on the file and it will show you in the headers, you know, redirected by WordPress. There's a header for that. So let's see. So this is another cool, helpful hint. Let's say you're trying to test form submissions and making sure that data gets passed along. You can actually see all of the data that was posted in a form. So again, typically I'll do the preserve log, especially if there's some sort of redirect, like in this case, it redirected me from the form I filled out to a thanks for getting in touch and then, you know, here it has another form, which is for subscribing. So, so there's a redirect. But you preserve the log, felt form, you hit submit. And then you can actually click on the post request, and then it will show you, it'll show you the list of form data. So here we can see I am put, you know, name, email, message, all of these things. So that's very helpful. User agent spoofing. So I've had situations in the past where people said that their site loaded fine and everything was great, except they were noticing in Google search results that, you know, you know, things were a little odd. And so what can happen sometimes if your site gets hacked, for example, if there are scripts out there that will check the user agent, and if the user agent's Google bot, meaning that Google is coming to see what's on the page and that's what's going to get indexed, it will actually completely feed feed it a different page than the actual page. So if you go there as an individual user, you don't have that Google bot user agent. So you get a normal page, but Google bot is getting all this trash and it's just messing with your SEO, right. You can actually test this with the user agents spoofing. So you can go to more tools, network conditions, and then there's this user agent and you can select the Google bot. And then when you reload the page, it will load it as Google bot. And so if there is some weird thing going on with user agents, you can see that. Another cool feature is if you're doing some sort of Ajax stuff, for example, in WordPress, you can actually replay a particular Ajax request. So let's say you're doing like an Ajax form submission and you're trying to handle the submission on the back end and you don't want to have to fill out the form every single time just to test stuff on the back end, right. You can fill out the form once, have it trigger the Ajax call and then you can right click on the, you know, if you filter by fetch slash slash XHR, it will show you all the Ajax requests that are being made. And you can right click on one and just hit replay and it will re-perform that action. So that gives you an easy way to say right click replay, then you can test your thing on the back end. Oh, I got a tweak something, replay it, check it again to get it right. Save you a lot of time. So another thing is security, right. So working with certificates. There is a security tab and you can click on that and it will give you details about the security of the page that you're on. So if you have a, I don't know, a client site or something where you're trying to figure out, you know, why a particular page isn't fully secured. This will tell you all the reasons. You can also validate, you know, like what is the certificate, you know, where is it from? Is it a let's encrypt or something like that? You can hit the view certificate and it'll pop up a little window here and you can see all the details of that. Another helpful thing if you are just dealing with HTTPS issues is you can go to winopadlock.com and it will also do a similar thing, but you can actually get a lot of that same feedback right here in the browser from the security tab. All right. So here's one of the fun ones. This is where you start to work with files, local on your machine within the browser and having those things persist. So here's an example. So this is the Bluehost site migrator plugin. So here what we have is we're using SAS. So SAS gets converted into CSS. And CSS is what's actually used in the browser. So what you can do is you can go to the sources panel and click on file system. And then you can add a particular folder to the workspace. So what that means is that all my SAS files are added into this workspace. So I can click on one and I can actually edit a SAS variable and save it. And then what's going to happen behind the scenes is whatever tool I'm using to build my CSS happens. And then I can just refresh the page and all of that will show up here. So I don't have to jump back and forth between my editor and the browser. I can actually have the editor in the browser and manipulate files that way. So that's one great way to, you know, to work. You can also persist changes in another way. So there's something called overrides. So if you go into overrides and then you, you know, select a folder, it doesn't really matter what the folder is. You just need a folder. It'll, for each site that you want to override, it'll create a new folder inside of that for the site. So you'll select that. And then up here at the top, it'll say, are you sure you want to give permission to whatever that path is and you'll just hit the allow button. And then you'll make some sort of change in the browser, which of course might be CSS here. And that CSS would affect what you see here. And then what happens is it basically saves your changes to that file into that overrides folder. So when you reload the page, all the changes that you've made are still there, right? And of course you can, there's a toggle button. You can enable and disable all those overrides quickly. If you want to just go back to the way it was. But this gives you a nice way of working with a file that you can actually manipulate on your computer. That will impact the page load. And of course, if you want to undo an override, you could just right click on it and delete it. And that will, that will remove it as well. So here, this is a feature that a lot of people are not as familiar with. So I wanted to bring it up because I think it's very, very helpful, especially as a developer, especially as developers communicating with developers is great. But I think even if you showed a client how to do this, they could create a recording and send it to you. And this could be a better way for people to share ways of reproducing issues on a site, for example. So if you open up DevTools and you go to the recorder tab, and this is experimental, but you should see it by default. So it's a recorder tab. And then there's a button here called start a new recording. So you can click start a new recording. And then what will happen is it'll say, okay, give it a name. So you give it a name and you'll have this little report button down here and you'll hit start. And once you do that, any actions that you do over in the left are going to get recorded. So here we can see that we went to Google. We clicked on the search box. We changed the text in the search box. We did a key down event, which is probably entered, right? And then it changed, you know, showed us the results and then, you know, we click on that and then it took us to this page. So all of those events got captured as this single recording. And then you can just hit replay and I'll do it over and over. So if you, for example, if you made some changes in the page and want to make sure it's still worked the same, but there were multiple steps involved, like filling out an entire form, you could actually just record that and then just hit replay. And it would be the same as you manually doing all that stuff again. So it's a good way to kind of run a basic test. But you can also export and import replays. So this little import, export buttons up here, you can actually export as a JSON file, which means you can share that with somebody else who can then import it in the same place. And then what will happen is they can click replay and it will perform all those same actions. So it's possible for someone to do something on a site, record it, pass it off to a developer and the developer can say, ah, okay, I see exactly what they did. And they don't have to write some super long description of, you know, I went here and did that. I clicked on this thing, you know, whatever the case may be. The other cool thing, if you happen to use Cypress, is there is a Chrome extension called the Chrome Cypress Recorder. And that will actually allow you to export any actions that you do manually as a Cypress test script. So that will actually allow you to save that test into your project. And then you can automate running that as part of your CICD flow. So a few performance notes. There is a tool called Lighthouse, which has a tab in the developer tools called Lighthouse, where you can do different types of audits. So we have a performance audit. There are also some other like SEO best practices accessibility and other types of audits as well. But in this case, typically I'll run these performance audits on mobile because it gives you worse scores on mobile than you get on desktop usually. So if you fix mobile, you basically fix both. So you'll click the analyze page load button. It'll reload the page and analyze it. So that's enough Google's homepage, got a 68 when I went to go test it. Side note, when you run these Lighthouse tests, try to do it as a guest in Chrome instead of your normal, you know, user profile, because a lot of times your user profile has different Chrome extensions enabled. And as a guest, all of those are turned off and they potentially can impact the scores that you're seeing when you run these tests. So if you run it from the guest window, you'll get more appropriate results. But yeah, so it gives you a score. And these are the core web metrics that Google tracks here. So you see we're green on two of them and then red on four. And then down here at the bottom, it tells you the opportunities associated with it. You could run this from incognito as well, but it is possible. Like I actually have a couple of extensions enabled in incognito mode. So for me, it's actually easier to go to the guest window and run them from there. But if you don't have any extensions enabled in incognito, that's a good way to do it. So you can see the list at the bottom. You have to scroll to see the rest. But it gives you a priority list from top to bottom of the things that are affecting performance the most. So if you start at the top and work your way down, you're going to make the biggest performance jumps initially. And then you kind of fine tune as you go to get, you know, those smaller incremental improvements. Another cool tool is there's a performance insights tab. It's very similar to the performance tab. I think it's just a little less data overload. So this is still an experimental thing, but you know, it should should be there by default. So you'll click the measure page load. And this will actually give you a lot more detail and we'll show you some of the core web metric things here. And you can actually click on those and see specifically, you know, what elements, for example, are affecting the largest contentful paint. So a lot of times just kind of a question mark like, Oh, I see that I don't have a good score on this, but I don't know what's the cause. This is a way that you can easily find one or multiple elements that are affecting, you know, that particular score. So in this case, you know, we're actually doing really good on the largest contentful paint, but the thing that's affecting the most is the image here. So likewise with accessibility, like I said, there are lighthouse audits for multiple things. And so we can hit analyze page load again. Interestingly, Google's homepage also gets an 80 for accessibility. And there's a number of things here that, you know, it says that they should do differently. So obviously, you know, you'd want to go through and address those things. There is also, if you're in the elements panel, there is on the right hand side where you're normally would see your styles you can switch over to the accessibility tab. You can click on an element. And this will actually show you information about that element in relation to the greater document. So it'll tell you if there's any specific area attributes associated with the element, or things that, you know, are related to accessibility in some way. I'll show you the entire what we call the accessibility tree, which is, you know, there's sometimes are certain elements that have particular roles that only work right if they're inside of something else. So being able to see the relationship there and how all that kind of comes together. You can do that pretty easily from here. Another thing you can do, which is actually really fun is to emulate vision deficiencies inside of Chrome. You can actually emulate alert vision, which we're mainly going to focus on color blindness. So seeing your site from somebody's eyes who are colorblind, so you can actually hit command shift P when you're in DevTools, anywhere in DevTools, and it will pull up the command menu and the command menu allow you to type something in. And so there's, what is it, chromatopsia duranopia and protanopia and tritanopia. So I found if you just type atopia into the box, it'll narrow that down just to all the, you know, colorblind visual deficiency. And so you can click on one, and it will emulate so you can see the colors if we go back one. So, you know, we got a nice green and red and yellow, and we switch over, you know, it kind of dims all that down to emulate this visual deficiency so very cool. Once you do that. Next question you're going to run into is how do I undo it. You can do it the same way command shift P, and you'll type vision, and it will give you an option do not emulate any vision deficiency, and that'll return everything back to normal so. And as you can see there's this emulate blurred vision here too. A lot of designers will actually use that to just to, to lose focus on any one thing, and see if the page flow makes sense and things like that. I'm dealing with cookies cookies and data. So, in the application panel in DevTools, there is a section here under storage on the left where it says cookies, and it will show you for the given URLs that you have cookies for. In this case, for Google. It will show you the list of cookies, and you can actually edit or add or remove or delete cookies individually and change values individually here, if you like. So if you're doing something that involves cookies, you can manipulate those as needed. There's also local storage so if you're doing something with local storage, you can see all those values and manipulate those here as well. And then a little more helpful. You know a lot of times we say oh we got to clear the browser cache. Well, you know you go clear your browser cache you're clearing it for everything. You know sometimes you want to clear cookies but you don't want to clear all your cookies right. You really just want to clear stuff for a single site. When you're on a site, like here I'm on Google, go to the application tab under application here on the left panel there's a storage item, you click on that. There's this clear site data button, and it will clear all of the data that's cookies and local storage and all these other things associated with just that site. So that's a better way of clearing cache for a particular thing without having to mass trash all of your, you know, cache data and stuff. A few bonus features. So sometimes you're looking for something and you have no idea where it is is it in the HTML is in the JavaScript is there's something in the CSS that, you know, you don't know where it is you don't know even what kind of file it is in. So if you can go to the elements panel. You can click on, actually, I think you do this for anywhere, you can go to the dot dot dot menu, more tools, and then search. And then this will do essentially search across all of the files and things that get loaded inside of the WordPress site or whatever site you're working on. So you can just type in this case we type Google. And this shows us all the files that Google's website has loaded that's where Google in it. So, obviously, you will probably have something specific you're looking for that would be a little bit more refined but it is possible to search everything. Pretty easily. So, another thing is, let's see, just notice on a note here. When you click your profile pic you'll see other profiles at the bottom where you can add or select guest yeah. So yeah so like up here where you have your little avatar if you click on that. It should give you a drop down at least that gives you like a guest option. But you know people who have, I don't know multiple Google accounts or something like that they can toggle between them. Sometimes you're doing something and you realize that you just triggered some JavaScript code or something that's going to cause an infinite loop and you realize it's going to crash your browser. And you just want to like go ahead and kill it before it gets to out of hand and starts to slow your computer down. You can actually go to the window option here and there is a task manager. So you click on the task manager, it'll pull up the task manager and show you all of the things that are running within essentially the browser. And it will show you the memory usage and the CPU usage for those particular things. So you can find the culprit that's affecting, you know, the performance of your browser. And then you can click it and then down the bottom right there's a button called in process and so if you click on that, it will kill that browser tab. And then you don't have to sit and wait for it to time out and then Google to detect that it's not doing what it's supposed to. And I think this is kind of the last and final big tip here and we're getting close to time but so there's something called a hard file and the hard file stands for HTTP archive. So, there's so much stuff in the dev tools that you can give you a lot of information. And sometimes, you know, you're not the professional when it comes to like diagnosing like specific issues or any of that kind of stuff. And so sometimes what you want to do is just want to say hey, I ran into this weird issue. I want to send my developer or whatever, all the information or another developer that's more experienced all the information associated with what I'm looking at. And you can do that with a hard file. So the hard file actually collects all the data that you see in developer tools packages up into a file, you could ship that file off. So you can export it using the export button, and then somebody else can import it and it will actually load up the page with the exact HTML and CSS and JavaScript doesn't even need internet connection it'll just load it all in. And then you can actually explore all of the HTTP requests and all of the, you know, elements and all of the CSS and all those different things, just as if you were that person who ran into that issue on that page so it's great for diagnosing performance issues or really random things that only happen like once in the blue moon and somebody hit it, you can grab that. And one tip I will say just from a security standpoint. Again, if you're exporting hard files and send them to somebody else, I recommend that you just do that from incognito window, because it captures all the cookies and browser sessions and all that kind of stuff. So you want to kind of limit, limit that by using incognito so you don't send too much information to somebody else. But if you do it that way, it should be pretty safe. Yeah, so that is that is it. Like I said, there's a lot of information here so it's really not so much about, you know, this is more of just to introduce a lot of the different concepts and things that you can do. I'll just send you off and say hey, let's, let's go explore. So I do have a list of things here. I'm going to, like I said get the slides, post them on the meetup page. So kind of check that after the fact, and all of this will be here with all the links to all these little great, great tools. And these are additional things that I know I had no time to get to but some of these are other things that are just more generally helpful or more official documentation that go into greater depth on on these things. So, hopefully, you found it helpful. And if you do have follow up questions or anything like that you can ask on the meetup page or you can go to my website WP scholar calm and send me a message to contact for so. I appreciate everybody coming out and I guess we can go ahead and stop the video.