 Hey everybody, DrupalCon is pretty amazing. There's a couple of seats in the middle right there. If you guys all want to scoot in and make some room, stop being fire hyzers, Lee and Seth back there. All right, so this is rocking out and debugging Chrome developer tools. My name is Mike Herschel. I'm a friend and developer at Lullabot. If you haven't heard of Lullabot, we're a full service digital agency, all that good stuff. We have design, development, content strategy, Jeff Eaton, it's pretty awesome. We're all distributed. So, all right, I have to talk into the mic. I'm losing my train of thought right here already. This is gonna be bad. So this talk, I'm gonna give you a history behind this talk because this talk is the talk that I wanted two years ago. So, if anybody has some type of internet time machine to zip this back to me, it would be completely awesome. I'm getting some feedback. Thank you, Chris. So the backstory behind it is when I got brought into Lullabot, I got brought in for the sci-fi.com project and I'm gonna show it in a little bit and you're gonna see the comps and there's a lot of stuff moving around. When I first started comps for this, I was like, holy crap, this is gonna be slow. I need to understand how this works, how to fix it, how to troubleshoot it and where to go. And so, I did what I think is a pretty good job with that and I learned a lot of things along the way. And so, going forward right here, does everybody remember Firebug? Like, it was so awesome. Firebug came out in, I don't know, 2005, 2006-ish. And you started using it and it's just like your mind gets blown, you know? So it's kind of an inspector, you know? It was the original web inspector for Firefox. And so you'd click, you know, inspect element and you'd highlight the item and you could see the CSS properties in there. It was so, so awesome. Prior to that, we would do stuff like, you know, type in border red around your div, you know? And it would look like this. And yeah, it was pretty messy. So, like, this whole session right here is, I have maybe like five slides. And it's all gonna be happening live. I have a couple websites loaded up. I'm gonna basically go through like the different tabs and dev tools. I'm gonna talk about some beginner stuff, some intermediate stuff, some advanced stuff and a lot of tricks. And it's pretty cool. And so in the spirit of doing it live, I'm gonna like mix things up right now. I am, I'm launching my Twitter app, right? So you can tweet me at my cursor. And the notifications should slide in and that's gonna like really screw me up a whole bunch. You can ask questions or you can heckle me and it's gonna be pretty awesome. Twitter handle's right there. And I don't know. It's gonna be pretty funny. So we'll see what happens. So whoever tweets me first, I guess, he gets slide in right there and gets a sticker. I have stickers. So like demo, right? This is, I don't know if you have seen, Lullabot has VR headsets for our giveaways, like their Google Cardboard-type headsets. So this could be you. And we still have, I think, a number of them to give away at our booth so you can come hang out with us and stuff. So let's see if I have this work in here. Hey, hey, look at that. Twitter's coming in. So I have a, I'm gonna make fun of some Florida Drupal Camp stuff too. It's gonna be kinda cool. So like, let's, so, I don't know if these go away. Oh, here it comes, all right. So, all right, so let me just kinda walk through sci-fi right here, right? So as you scroll down sci-fi, a lot of things start moving and we're gonna talk, it's fairly smooth, like against all odds and we're gonna talk about that. Let's go into the developer tools. Who here's a front-end developer? Who here does, as a back-end developer? And who here's just like, hanging out? Got a couple of hangouts, yeah. That's pretty awesome. So to get into developer tools, you right click and you can just go to inspect. And so I'm gonna zoom in right here, I'm gonna hit Command plus, I'm gonna zoom in so you guys can actually kinda see what's going on right here and I can see too. So you have a number of tabs across the top and hopefully you guys work with this and you know this, right? You have the elements tab, some network tab, some console tabs, all this type of stuff. So we're gonna kinda work our way through, right? So if you're looking at an element right here, we're gonna start with some basic stuff. You see where my mouse is over here? You click this and you can select the element. And you select the element right here and you can modify the element by typing in here or whatever. And you can also modify the content. And if you modify, modifying the content is pretty important because we work with this content management system, right? And who here has editors that put in content that you just did not expect, you know? So a cool example of this that we accommodated for right here, you see where it says live now, battle dogs, whatever the hell battle dogs is? But so sometimes sci-fi has movies like Alien versus Chupacabra or something like that up there, right? And so well, how do you accommodate that while it's narrow, right? So well, to test it out, this is just one thing right here. You start typing, you know? And you can see kinda what happens. So what I have right here is a CSS ellipsis right here which can kinda gets bigger and smaller, it has some CSS calc. But that's kind of an example of where Chrome tools can kinda help you out by testing out content and stuff like that. Something else that you can do right here, that's pretty cool, is you can start dragging stuff around. You can click and drag it if it works here. And so you can kinda start moving stuff around as that goes around. And that will help you see how your content adapts and stuff like that. You can also, I'm gonna hit Command C, take a copy of it, go up one level and I'm gonna Command V and I'm gonna paste in a whole bunch of stuff right here. And you can easily see, you know, you can create your content within the CMS and then duplicate it within DevTools and make sure your CSS does not eff anything up. And that's pretty powerful. Something, when you're going into this type of stuff, you can click in here and you can start adding classes, you know, like background, red and all that type of stuff. And so that's pretty easy. This is where the majority of my work is, screwing with stuff, making sure it works. There's a couple of little tricks in here. So there's some new stuff that gets added. Let me kinda do a backstory right here. I was given a similar presentation to this at Drupal Camp Atlanta. And while I'm up on stage, my browser locks up, right? But I kinda roll with it and I'm like, you know, screw it, we're gonna happen. So I quit it and launched it and I had a new version of Chrome, like no joke right then. And like, so that is how quick this updates. I literally went through this a couple hours ago, like has anything changed? You know, luckily nothing has, so a couple hours hopefully we can do that, right? So a couple of new things that are in there. You can easily toggle classes now right here. So you can see all these CSS classes that were added by Modernizer onto the HTML limit. You can start toggling them on and toggling them off. That's kinda cool. You can do this before by double clicking within within the actual classes and start messing with them that way, but this is a lot easier. You can set hover states on stuff or so if I can right click on this and I can set it to hover and I can see what's gonna happen right here, right? And honestly, like right now nothing because that's it. But what's kinda cool is you can also right click and you can select focused, you know? And that's gonna make like, my coworker, Helen, are happy to test, you know, your accessibility and stuff like that. Does it give an indicator if it's in focus? You see this like little scroll into view thing right there? Have you ever had a div that you see within the left-hand pane? And you're like, where the hell is that div? You know? And it's like you can't find it and you're kinda setting the background of it to red and stuff. You can right click on it and you can scroll that into view. So I can like, I don't know, select this guy right here, go to scroll into view. And if it works, it would actually scroll down. Let me find someone to put it. Scroll into view. Yeah, so you can kinda see. You can see I've been messing with some CSS stuff there. But so that's kind of a nice, useful little tool right here. A couple other things that you can do. See, I'm gonna go into Florida Drupal Camp. So I worked on this, is animations, right? So I can click on this little icon right there and I click on the image. Is it the image or? So these bubbles right here are CSS animation. I'm gonna get into there. It might be on the, so we have our A or C. You can speed it up and slow it down and stuff like that. It gives you a little preview of it if I can get into it here. It might be on the wrong image here. Yeah, anyway. So it'll give you like a little filmstrip view as it's working down there. And it's kinda cool because you can go forward and you can actually see where it's being called. Or see what it's being done to. You can also do, you can also see your event listeners. So kind of a cool, a neat little keystroke type thing is if you hit Command Shift D, you can go back and forth. Does anybody ever like go through the whole thing like this and you gotta move your mouse and go back and forth? It's a pain in the ass. Command Shift D goes back and forth. And what's funny about this is I went on Google's documentation website to figure out how to do this, right? It's not listed anywhere. And so I Googled it and of course it's on Stack Overflow. So that's kinda how I found out about that. So that's kinda neat. You can look at event listeners here. So you can see like right here, there's an event listener on this. You can also see an event listener on this right here which is kinda cool. So you can see I have a function right here called explode shit. And what this does, this is pretty cool. Bam. Nice little Easter egg there. But it's kinda cool to be able to see to check your event listeners. And you can also go through, let me move this back down. I'm moving my mouse right here. And when I scroll right here, I'm adding and removing a CSS class to the header up here. Let's see if we can see this happening right here. You can see I'm adding the scroll down right there. If I'm going into someone else's code and I'm trying to figure out where that's coming from, what I can do is I should be able to break on attributes modification and scroll down. And it'll actually, you can kinda step through your jQuery stuff and figure out where it's coming which is kinda neat. Eventually this will come through. But something else that's kinda cool is if you're in a minified CSS or JavaScript, you can see these little brackets in the bottom left. You can click on this and it'll on minify it. It'll kinda do its best. Obviously it's not gonna change around to function names and stuff like that. But it will make it kinda nice. It works pretty well with CSS too. And at that point you can get in here and you can start just screwing with stuff. You know which is kinda cool. I have my little cheat sheet, no pad up here, everything I wanna cover, let me check. Another cool little trick that I have right here is if I'm looking for something, I'm trying to figure out what's changing. You can hold down the alt button and then click over here and it'll open up all the child items. You can see it's working pretty pretty here. Pretty hard here but it'll open up everything within there and that's kinda useful if you're lookin' to see what's turning purple as it's changing and stuff like that. Kinda cool stuff, right? Does anybody learn anything yet? Oh yeah. We're just like gettin' started. It's gonna get cool. I'm gonna get a drink of water. All right, so I actually have a favorite tab in Chrome Developer Tools. My favorite tab is the timeline tab. But I'm gonna make you wait for it. We're doin' the network tab right now. Yeah, I know. So the network tab's kinda cool. Let me kinda make this big for everybody. Someone, I don't think I've gotten heckled yet. Someone's like, someone just needs to be like, you don't know what the hell you're talkin' about. I'm gonna hit Command Dari right here and so you're gonna see a couple things. I have disable cache checked up here. So it's going to disable any type of browser caching goin' on. Within Developer Tools you can select throttling right here, so this is pretty cool. So it's really important to test your website on like 3G because I go out and, you know, I'm somewhere where I have 3G service and something kind of, you know, sucks. All right, all right, screw you, Steven. He's right here. And yeah, close that out now. And so, see, you got me sidetracked here, buddy. Yeah, so thank you. So I'm talkin' about 3G, right? So you're out there. Has anybody like been in a situation and like you need to get something done and you're kind of in a hurry, you're rushin' or somethin' like that, but of course you have 3G signal, right? So you need to make sure you accommodate those types of situations for people. You know, I think there was a keynote about designing for emergencies or somethin' like that which I, unfortunately, I missed that, but I heard it was awesome. I'm gonna watch that on YouTube. But so this is a way to kind of do that, right? So you can look through the loading time right here, the film ship, and you can kind of see when stuff is loading and how it's going. You select your throttling and then you hit reload and it'll kind of do what you expect. As you scroll through here, you can see like the time to, you know, first paint. The time to first paint is like really how your website is judged for speed because it's more about your perceived speed, you know? And that's what makes things like BigPipe and like the new refresh list module pretty powerful because it really speeds up the perceived speed. You know, I don't care how it functions on the backend as long as I think it's fast, that's what I care about. You know, so let's just kind of look through here. So when you have a website, of course the website's put together if you're like a whole bunch of different files, right? A whole bunch of different assets. You have style sheets, JavaScripts, a bunch of images, maybe some fonts and some other stuff like that, right? So every single one of these is an HTTP request and you can kind of see it as it's coming in right here. I'm gonna make it smaller right here. So you can kind of see what we have right here. We have 166 requests. That's honestly a lot, you know? A lot of that is ad stuff coming down. You can filter that to domain www.scifi.com and you can see 51 of those are actually coming from the sci-fi domain. It has a lot of ad networks on there that's pulling down and a lot of tracking code. But you can kind of see that. You can see when the DOM content is loaded and you can see the page size right here. The page size is obviously super important. When we were working on this website, we were noticing that the content editors, this is before it launched, they were uploading PNGs for that large hero image. Those PNGs were like three megabytes each. So like, all right, well, how do you solve that? Honestly, the easiest way, what we did is we just limited the content type to accept JPEGs. You know? I mean, yeah. And so at that point, you know, instead of like a nine megabyte page download, you have in this case like a two megabyte page download, which honestly for a heavy website like this with a lot of images and stuff like that, isn't too crazy, you know? So you can keep an eye on that and you can keep an eye on your web page speed. You see where my mouse is up here where it says use large request rows. What's kinda cool is it'll show you the size difference between the normal page size and then the gzip page size. So when your website is being sent down over the wire, your server will typically gzip it up, which is basically like zip filing your web page as it's going down. And you wanna make sure that's happening, you know? So look at, if you don't see a discrepancy between these numbers right here for the text files, that's something for you to be aware of to look into. Something that Drupal does not do out of the box is gzip SVG files. So SVG is scalable vector graphics. And so if you have a big SVG file within your website, out of the box, Drupal's hdaccess file does not gzip that. You need to be able to identify that within your dev tools and fix that by adding the appropriate rules in there. So there's a bunch of cool stuff like that. You can filter, of course, by like CSS images. You can look at fonts right here. And if you also click on stuff, you can pull up the HTTP headers right here. And you can look at this type of stuff and you can see like if it's going through some type of content delivery system. And you can also see if it's being cashed by Varnish, which it really should be. So you can see the X of Varnish's cash right here. So that means this is being pulled out of Varnish right here. Which is awesome, that's what we want. But that's a cool way to kind of troubleshoot that. You can preview your different things as you're looking at them. You can look at cookies and timing and everything that you kind of expect right there. And yeah, so that's kind of the network tab. Any questions or anything that I'm missing here? Yeah, it's actually pretty straightforward. Up here you have a filter box. You type in domain. You see it kind of auto completes. And then you have all these domains that load up and just start typing. Yeah, so this has like obviously a whole bunch of like ad tracking and like user tracking and performance tracking and NSA tracking and you know. So yeah, it's pretty cool, huh? Like Chrome DevTools just sneaks stuff in there all the time, you know, this like cool little stuff that you don't even know. And you're like, huh, when did that get in there? You know, so that's kind of neat. Let me look through my cheat sheet right here. Make sure I'm not missing anything. Oh yeah. So there's a little checkbox up here that says preserve log that's pretty cool. So if you're doing some type of redirect, right? You're doing like, I don't know, a 301 to a 302 to a 301 to a 302 just for the hell of it. You can actually preserve, you can preserve those HTTP requests in there by hitting the preserve log checkbox there. And that also functions for the console too. So like if you're doing a, I don't know, a web page that logs something and then redirects to something out, you check that box and then you have access to that type of stuff, it's pretty cool. Yeah, awesome. All right, so let's move over to what I, all right, so this is the eye candy one right here, right? So I'm gonna look at the layers. Let me move this over right here. Keep this above 650 because there's a break point right around there. And so I'm gonna go to the layers tab. And the layers tab is kinda cool because it actually gives you a visual representation of the layers of the web page. And I guess I should probably talk what a layer of a web page is right here. This goes down in. This takes a lot of CPU power as it's going, but ideally on the stuff on the right starts moving too. So the way that browsers work is that it downloads, of course, all your, it downloads all your HTML, all your assets and it builds the render tree. And the render tree is basically like the CSS and HTML put together. It creates what's called layers, right? And so the layers, the layering is called reflow or layout, right? And so after that the browser goes through the painting operation. The painting operation is when it's actually putting the pixels on the screen. And after that it goes through the compositing. It goes to compositing. And compositing is combining the layers and actually, you know, putting it up on the screen. What's kinda interesting about that is layout and painting are very expensive operations. Compositing is a cheaper operation because it's done on the GPU as opposed to the CPU. So when you're moving a whole bunch of crap around like I am here, what you wanna do is you want to minimize your layout and paint operations and you want to move those over to compositing where and when you can. So the way that you, the way that you do that is by creating individual layers out of the stuff that's moving around. To do that you can use the CSS will change property which is pretty new. Something that is a little bit more well supported and more of a hack is if you can promote it to its own layer by using like a CSS 3D transform. The one that I use on this website is back face visibility hidden. And so if you set back face visibility hidden on a div or something like that it's gonna create a layer out of this. And the layer you can move around, you can transform around, change its opacity in this very, very cheap on the CPU or on your computer which basically improves your frame rate, makes it so like my mom's computer running when there's millennium does not fall over and die. So, how do you troubleshoot that type of crap, right? Let's kinda look at this. So what I'm gonna do right here is I tell you I had a whole bunch of devs and stuff in here set to back face visibility hidden. I'm gonna kinda reset this. I'm gonna set them all to back face visibility visible which is a default. You got an important thing. If I go to the layers tab right now you're gonna see there's one layer. Because everything's not split up. And what I'm also gonna do, something I'm gonna, you can go down into settings right here. I don't know, I'm sorry, I'm in the wrong place. You can go into show console. And if you go into show console which you have your console on the bottom right here there's a couple extra cool, I don't know, options listed down here. The one that is one of my favorite is rendering. So rendering is what I'm talking about right here. What I'm going to do is I'm gonna enable paint flashing and every time there's a repaint you're gonna see it's gonna flash green. So as I start moving down here the whole damn thing is green because it's repainting. And remember repainting is a very expensive operation. So if I go back, I'm gonna leave that, actually I'll leave that checked. And I'm gonna go back and I'm gonna uncheck the deoptimization that I did and now recheck this. And now when I scroll you can see it only does the repaints every once in a while when it shows and hides something. So that's the type of optimizations that you wanna look for. There's another cool thing right here. Show layer borders right here. So the orange ones are the ones you wanna look at and it's kinda cool just to look at and see how your browser is working right here. So you can see that this little div right here is inside its own layer. And the reason I have that inside its own layer is it does its own independent opacity change and all that type of stuff. So that's kind of a cool thing. You can have the show FPS meter up here. So as I'm scrolling up and down you can see what the frames per second is. You want your frames per second will max out at 60 and that's what you wanna shoot for. You wanna keep it above 30 and if anything's below 30 at that point start looking into it. For normal web pages that aren't moving stuff around this isn't that big of a deal but you start moving stuff around it obviously becomes a big deal. Has anybody ever gotten to one of those cliche parallax websites and you're scrolling and you see the background image and the background image is just like do, do, do, do, do like that, and it's just struggling? What that is, that's doing the repaint and the frames per second on that is so janky. So this is kind of a jank removing your jank right here. You know, right? So there's this check box right down here show scrolling performance issues. I don't know what the hell this does. And honestly, if anybody ever finds out, tell me, because I'm really interested in it, it's never... Cool, so it'll tell you that. I've never found that out. Thank you, Adam. Awesome, thank you. That's pretty cool. And then you can also emulate print media. You can emulate screen media and stuff like that, which is kind of neat. Absolutely not. So Adam Jimerson just told me what the stro scrolling Perf issues checkbox does. And so it'll put an orange highlight around layers that are overlap, or if it thinks there's gonna be some type of scrolling performance issue. So that's kind of neat. Let me look at my cheat sheet here to see what I'm missing. Oh, I know what I can get into. Mobile emulation. Does everybody see this little button up here? So if you hit this button, you can change common phones. And you can even edit this list of phones if you have something specific that you wanna test on in here. And what's really important to realize is this does not change rendering, your browser's rendering, or it does not emulate that. But what it will emulate is it'll emulate the screen size, it'll emulate the touch. And it will also send a different user agent, if you're doing user agent sniffing. And that's pretty interesting. Yeah, so that's pretty cool. If you go down here, there's a couple other options. You have obviously the throttling option. And there's also like a MIDI queries that it'll show you. And rulers, which I've never really had a decent use for, but it's still kinda cool that it's there, right? So there's a couple cool options in here that you can get down and dirty and do stuff, right? Pretty neat. I'm gonna make sure I'm not missing anything here. Any questions while I'm going through? Yeah, so the question is, did I give an example of how I did layers in the sci-fi? So I'll show that in a second right now. All right. So I'm hitting Escape. I'm hitting Escape on the keyboard to get rid of the console drawer there. So you're gonna see like right here, if you look at this, there's a whole bunch of different layers. So each of these layers are the stuff that's moving around. So let me make this big and minimize it right here so I can show you what's moving around. So as I start scrolling right here, what's happening is everything's position fixed, which means that it's fixed to like the top left corner of your viewport. So as I scroll down, you can see even though it's position fixed, it then starts using CSS2D transforms. And the CSS2D transforms start moving up and then other stuff at the same time is also changing opacity. So in order to make that very performant, I promote it to its own layer. And when I promote it to its own layer, I do that using back face visibility hidden on that parent div or container. Does that make sense? He says sure. Yeah, it's cool. All right, let's kind of get back down to it, right? So let's look at the timeline tab. So the timeline tab is kind of cool. I am going to start scrolling around. Well, I'm gonna hit the record button right here and I'm gonna start scrolling around and then I'm gonna hit finish and this will take a second here. This is a bunch of information right here up on the screen. It's kind of cool. Let's take a look at it. So the first thing that you can see up to the top left is your frames per second right here. So the little red dots are potential scrolling performance problems right there. Oh, I clicked on you. All right, let me get back to where I need to be. Which is kind of interesting. You can see your CPU level, your CPU performance profiling going on right there. And you can actually, you should be able to, you can highlight into this and you can see what's taken up a lot of time. So I can see there's some angular stuff coming in here and you can actually track it down to see where it's going, which is kind of neat. If I did not have my painting optimizations in here, you would see a lot of green. The green within this is painting. And if you were to see that, we might be able to see a little bit in here. I think I see some right here. This painting, this is compositing. So compositing is what we want, right? Because compositing, if you remember, is what's on the GPU. So if I didn't have my optimizations in here, you would see a bunch of paint, you would see a bunch of painting in here and you would be able to track that down to see what layer is painting. It's kind of a backwards way of doing it. The easiest thing is by going through the paint flashing, that show paint flashing that I showed earlier, which is pretty neat. So when you're looking at these flame charts and stuff like that, what you really want to kind of look out for is the stuff that's taken a long way horizontal because that means it's taken up a longer time, right? And so you can click on these as it's going down and you should be able to kind of see what's happened. So this is just pulling in jQuery right here. There's ways to also black box jQuery, which I'm not gonna set up right now. If you go into your settings, black box, you can add a pattern in here and you can just type in jQuery and it'll kind of pass through there when you're trying to debug your JavaScript, which is kind of neat. Let's see. So you can go into Chrome flags and enable DevTools experiments. So let's kind of do this so you guys can kind of see this in action right here. So you go down here and you do a search for experiments. Man, I can really see, let me command plus this. There's enable developer experiments right here. So you can enable this and then what'll happen is within your DevTools under your settings, you'll have this tab right here for experiments. And this is where you enable the layers panel. There's a bunch of other cool stuff in here that I have not begun to go through. But what's cool is like this isn't at all. There's a secret in here. So if you press the shift button six times, one, two, three, four, five, six, it shows more stuff. You can't even like make that type of stuff up, right? So you get in there and start screwing around with stuff. Geez. Don't ask me, it probably involves some beer. But yeah. What's that? No, I haven't done it. So this is the same way you do developer tools in Android. Yeah, so if you tap times, you get developer options in Android. It's probably the same developer. That's why they chose six. Probably the same Google developer. I don't know, but yeah. So that's kind of neat, right? So let's kind of go through here and see what else that we have here. So you can do the screenshot similar to the loading screenshots on the timeline tab, which is kind of interesting. There's a new, this tab right here is security, right? So if you go to a site that has SSL, let's go to lobo.com because that's where I work. If the internet's working right here. It'll actually tell you about the certificate. I honestly don't really know. I'm guessing that'll help you kind of troubleshoot to make sure it's safe and stuff like that. And on top of that, I'm trying to think if I miss anything. So the console is obviously super important. Something that's kind of really interesting within the console is you see like this little equals equals dollar zero. You can type in, you can use dollar zero to refer to this element within your console. And if I click over here now, this one's dollar zero, but this one right here, you don't know it. It's also a dollar one. And you can kind of work your way through when you're doing debugging. It's kind of neat. And yeah, I believe so, yeah. Stay on that scene. No, it's the ones that you have selected. So like the last one that you have selected is like one. The one that you had selected before that is two. And stuff like that, if that makes sense. I don't know if I have too much else. Do I have any questions or any how-tos or anything? Go ahead. Yeah? No, no, no. All right, I'm gonna just repeat it since you're in the middle. So the question is how to enable the layers panel. So basically what you're gonna wanna do is you're gonna wanna go to Chrome Flags. And when you go down to Chrome Flags, you're gonna wanna look for developer tools experiment. And you're gonna hit the enable button right under here. After you do that, you're gonna need to relaunch developer tools. Thanks, Matt Cleave. And after that, you're gonna go into your developer tools. You're gonna go into settings up here. From there, you're gonna go to the experiments tab and you're gonna check this box that says layers panel. And that's how to do it. Any other questions? Yeah, I should be able to do that. So if I select something in here, I should be able to do like dollar one with or something like that, but I forgot dollars zero. Honestly, probably not, I don't wanna. What's that? I think, I thought I was doing that. That's what I did. Let me do it on the, I had this website loaded too. Yeah, all right. I don't know why that didn't work on the other one. So there you go. Does that make sense? Yeah, it does. It's kind of neat. Go ahead. Oh really? So you said you can inject JavaScript real time? Yeah, something else that's kind of cool. You kind of just made me remember this right here. It's maybe not completely related. When you're getting into this, you have like a lot of like kind of sublime key combinations where you can hit like the command button have multiple cursors in here, which I don't know why this isn't working. You can do multiple cursors within your sources tab. So it should be able to do that and you know, type multiple places and stuff like that. Yeah, so what I'm doing is I'm holding down the command button and putting cursors wherever. And I also should be able to, I think hit like command D and do multiple selects and stuff like that. So if I want to select like everything that says form, which is probably going to be a bunch, let me unminify this right here. All right, I'm going to select URL. I'm going to hit command D and it's going to keep on going down all the URLs which I can then change. I'm typing here, but it's not doing it. But it would, you know, change that. Hopefully, maybe. Yeah, I haven't done that before. Like you can add stuff to your workspace, like add folder to workspace and stuff like that. And I've never gone through the whole, I've never gone through this workflow, but you can edit the files directly in here and use it as an IDE and basically use that as opposed to whatever your text editor is or your IDE is, which is kind of neat. Thanks. Questions? Go ahead. Oh gosh, I'm not the best at this honestly. Yeah. So what I generally do, let me try to find something that's changed in here. So what I generally try to do, if you right click on something, you can break it on attributes modification. Let me see if I can reload. If it comes up, what it'll do is it'll show you within jQuery where it stops. But you can also remember where I showed the black boxing earlier, you can black box jQuery and my understanding is it'll skip over that. And at that point, it'll go directly into the code that you authored. You can also skip over through the debugger and kind of work your way through that way too. Yeah, so I already have that right here. So I should be able to kind of keep on working right all the way through. It's not the best, what do you call it? The best showing of that, but it works when it works. When I get it to work, it works sometimes. More questions? Go ahead. So there's a cool way to do that. So you select something and you see over here, you can filter on stuff right here. So if I wanna see where this background color's coming from, it'll, first of all, you can type in color right here and it'll show your different options right here. You can expand this, click on this, pretty it right there and it'll actually tell you where it's coming from. Did he catch all that? What's that? Yeah, let me show you again. So basically I'm going to the computer tab over here, filtering based on, I don't know, something. I can see where it's coming through. I can click on this, which is gonna take me to the CSS file. And at that point, that's where it's at. What I clicked on is, I clicked on this little blue hyperlink right here. Oh, to purify it, I clicked on this little guy right here and it's already purified. But you see these little brackets on the bottom? That's what that button does. Anything else? Go ahead. Computer layout. Oh yeah, yeah, yeah, sorry. I mean, hold on. You're talking about this little, I think that takes you to the style within your styles tab. Or, here's to do it. Okay, neat. Honestly, I've never noticed that before, so thanks for teaching me something. Go ahead. That's kind of neat, yeah. So you can do like, it's like temporary CSS that you can put into here. Something else that's kind of cool within the elements tab is if you want to see what's behind an element, you can select it. And then you hit the H button on your keyboard and it'll actually hide it, temporary hide it. And it does that through the, it uses visibility hidden, so it'll still like exist in the flow of the page, but it'll just visually hide it. But that kind of reminded me of that. Select your element and hit the H button. And you can see it's adding like style. It's adding the web inspector hide shortcut right here. And that's basically pressed into H button. Go ahead. Yeah, I did a little bit earlier and it didn't work properly. Let me see if I can do it again. Maybe it'll work properly the second time. How much time do I have? Does anybody know? 11 minutes. Nice, I got plenty of time. I'm just gonna go to sci-fi. I think it'll still, it'll still, the break points will still exist if you refresh. Here we go. Live, live demos. Everybody needs to get off their phones. Stop tweeting. No, I don't think I am. I'm hoping I'm not throttling. Wouldn't that be funny? Yeah, no throttling. So within the animations, if you will, you can, basically you hit this little diamond thing up here and it's a fairly intuitive interface. You can slow stuff down, you can speed it up. And I think there's a little slider where you can kind of get into it and speed it up and stuff like that, which is kind of fun. Go ahead. I believe so, but I'm not exactly sure. Let's see if we can figure it out. So the question is, can we figure out the local changes? And I believe that is, man, I need to get on a webpage, right? So if I were on a webpage on the sources tab, I believe there's like a local modifications option somewhere in here and you can, that will go a long way to what you're looking for. I don't know exactly where that is. You have to set up a workspace, Adam says we have to set up a workspace first. Go ahead, back. Yeah, yeah. Yeah, so that's a good question. So let me repeat the question here. So Chris doesn't get angry at me, he's coming up. Oh, can you, are you guys having trouble hearing? Oh yeah, so I'm gonna repeat the question. So basically, if you have a nested div that has a whole bunch of padding or margin, you don't know where that's coming from. How do you track that down? So what I typically do is, if you're in your elements, you should be able to hit your arrow buttons to kind of go down like that. And remember, you can hit the alt button to expand everything in a div. So you can go like that. I'm just using my arrow buttons. You go to the computer tab up here and you can kind of look through like that pretty quickly. Does that make sense? So you can see, we see some margin there. Yep. Yeah, and you can also edit these directly, but in a number here. So that's kind of neat. Question, over here. You should be able to, if you select the root element like the body tag, you should be able to hit control F and search for whatever you're kind of looking for. You can, if you're in your sources tab, there's a key combination. I think it's like, it might be alt shift F or command alt F, you can play around with it. And it will do a search of all your sources. So it'll search through your CSS files, your JavaScript files and stuff like that. That's pretty powerful. Go ahead. Yeah, I don't, I've never really got into that. Oh, nice. So basically, what this gentleman's saying is, you can audit your page in its current state, make changes and then run the audit again and it'll show the diff. That's pretty awesome. Thank you. I'll have to play around with that. In the back. I'm, I'm sorry, what was that? Oh, search all files. Yeah, so there, your key combination is, thank you right there. Command option F. Thank you. I never even, once again, there's a lot of hidden stuff in there. I knew the key combination, but I didn't know that option was listed right there. It's kind of cool. Go ahead, Derek. No. Ha ha ha. Holy cow, you know. This is gonna be recorded. That's your blog post. Ha ha ha. Ha ha ha. That's all right. Man, so, all right, so how do you find out more information? This is a good question. Thanks for asking, Derek. So, let's see if Twitter's working, right? There's this guy. Yeah, that's my daughter. She's much older now, but she's still super cute. All right, so my internet's not working. So, Paul Irish and Addy Azmani both work for Google, and they are developers on the Chrome Developer Team, and they are super awesome people. They're both my idols, and they tweet out stuff all the time, like little tips and tricks like this, right? So, and a personal note, I got really excited one time that kind of made my weekend. So, after we launched Sci-Fi, it was a Sunday morning, and I saw Paul Irish, who works for Google, was, he was critiquing some websites and doing audits of them. So, I tweeted them, and I said, hey, check out Sci-Fi.com, it just launched, and he tweeted back, he's like, well, mobile or desktop, and I said, desktops are all the cool stuff happens. So, in the meantime, I'm just sitting there, like, you know, I'm really nervous, and we have a local Gainesville Slack, and so I slack my friend, he's like, Mike, you're about to be destroyed, you know, you're just gonna get ruined, and I got a tweet back, and he's like, nothing obvious so far, and I'm like, yes. And then maybe about, maybe like five minutes later, he said, good jobs, good jobs avoiding the paint storm, good job, you know, and I'm like, yeah. And then of course I like screenshot it and rubbed it in his face. So, that was pretty awesome. Yeah, so, there's a lot of documentation on developers.google.com. A lot of the screenshots are really old because this stuff changes so often, but it'll give you an idea of what's possible and what's there and stuff like that. More questions, anything else? All right.