Mastering Chrome Developer Tools Experiments & Resources

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Jon Kuperman: [COUGH] One last things I just wanted to talk about are experiments. And it's kind of a weird relationship some of the stuff that's in Canary are experiments in stable. But then Canary, as we saw with the CPU throttler has its own experiments. So it's kind of, the experiments are basically they just give you like a warning this might crash your browser.

[00:00:22] There's no certainty that it's gonna keep working. So the first thing that you'll want to do is you'll want to go to, I think it's chrome://flags. And this gives you this huge list here. There's a lot of stuff in here. I wouldn't recommend just clicking a lot of stuff in here but if you search to a file find for devtools, you will find this Developer Tools experiments.

[00:00:46] This is the I think the only one that I have enabled. So you go to chrome://flags search for Developer Tools or devtools and enable that. After doing so you have to restart your browser. So once you restart your browser from now on, when you go to these three dots here and Settings you'll have a new panel over here which is Experiments.

[00:01:06] There's some cool stuff here basically a lot of it just kind of covers settings for the stuff that we've covered today. So if you wanna have like folder excludes for your work spaces as you're adding them don't have the whole get directory, don't have the whole load modules directory.

[00:01:22] You have a list of all your black box scripts. You can have things black boxed globally if you wanted to never show me jQuery. That's jQuery's fine. By experiments is the one we just added. And they have a bunch of really cool stuff on here. And this also helps you get a really good idea of what's coming next, what's going to make its way into stable.

[00:01:38] So for those that were asking before, this is where you can turn on CPU throttling and it'll show up in your timeline view. Accessibility inspection is really great. I do a lot of work and a lot of teaching around accessibility and it's really nice. They've come up with some program magic ways it goes into the audit.

[00:01:55] It's a new type of audit that you can do and it'll tell you things, your color contrast isn't good enough for. People that are visually impaired, where the buttons aren't big enough or there's not a labels all sorts of really good stuff like that. It's like probably the place that I would recommend starting with for accessibility is turn that on and run an accessibility audit.

[00:02:12] And there's some other stuff that I haven't messed with yet. There's this whole layers thing. For a long time, all those cool material colors were an experiment now they're made their way into stable. I was messing with the new SASS stuff a little bit. Request blocking is just one where you can, I guess this would be kind of useful.

[00:02:31] You can take a domain, YouTube and you can block all requests to it. I guess to kind of, either to see what your page if it's down or to see what your performance is without all of those requests as opposed to like commenting them out in the code.

[00:02:45] So, I could just request block YouTube and reload that slow page and see how fast it was with no YouTube requests going through. So yeah. So those are really cool. They're fun. Again, there's a big warning up at the top here. They require restarts and they might. They might be dangerous, cool.

[00:03:03] And then I guess moving on from here. There's a lot of stuff. I think we took a good pass in the sense that we touched everything we went through the panels but there's a lot a lot more cool stuff. I use Twitter a lot to stand top of the things a ChroneDevTools and Firefox and Edge, all have an account on Twitter and they are really good about announcing all the cool stuff that they're doing.

[00:03:24] And the team seem to work really nicely together with Firefox just launched this, they share that content as far as the Google Chrome people that is money. If you're not following them already they're really good follows they step today and all the cool stuff coming up. If you're interested in more the rendering and page jank stuff, there's this website jankfree.org, it's just a collection of blog posts and videos and talks on web animations in 60 frames per second, all that stuff.

[00:03:53] And then the official devtool's docs. They're good, they're a little bit outdated like the warning I had at the beginning. If you're checking the docs, we had a couple issues earlier where the doc said one thing and they've changed it since then but as far as like the overarching concepts haven't changed at all.

[00:04:09] And then, there's this cool free Audacity course to browse rendering optimization, it cover some really cool stuff again with like page jank and critical rendering path all that kind of stuff, cool. That is it. This is me. Also feel free to either follow me or just bother me, if you have any questions or feedback or anything like that.