 Are you... Just so we have that on camera, there's like no product placements. Before I film, I always take a refreshing drink of... Who are you and why? Starting with iReview. You'll pick. Okay. Who is Paul? I'm Paul, Irish. Well, I work on performance stuff. Step tools, Lighthouse. And then do it because... I love the web. Like it. Good save. Like it to be fair. Good. Got it. And now you? I'm Jason Miller. And I work on speed and loading stuff. And I do it because I had a slow phone once. And it was a pretty poor experience. Oh, hashtag relatable. Yeah, very relatable. I mean, I still live, you know, in North America. So I have it pretty good. Slow phone will kind of let you know what's going on. So you did your talks today, right? You had the glorious 830 spot in the morning. In the morning, you were speaking to an audience of about one or two. Yes, captive audience. Excellent. Yeah, that was the two of you. But I mean, those people really cared. That's the upside. That's why they put the mirror up at the back. We missed your talk because we were filming. We weren't filming. We were sleeping. Yeah, we were sleeping. But can you... Were you doing film while you slept? So we don't have to watch the video. Can you just give us the second version of it? You can change any website you want to with DevTools and then reload. And those changes are still there. I love that feature. Yeah, yeah. I used it this morning. So what can I change? Change the CSS, change the HTML, change the JavaScript. Anything that comes down over the network? Yeah, anything that comes down over the network. Literally anything that usually changes in DevTools plus more. What if it's changed on disk as well? What if the thing that's served from the network has changed and you've made changes? How does that figure that out? It just always takes yours. Yeah, yeah, it always takes yours. Even if service worker's involved or anything like that. So you break it, you pay. Yes. It's yours now. Right. I mean, it's a DevTools feature. You know what you're doing supposedly. Well, I don't know. It could have done some clever diffing and then like conflict resolving. No, no. You own the entire file. Okay. And then you can un-on it? Yes. Yeah, you just delete that overriding file. Oh. It's actually a file on disk. Which is also cool. It's the changes you made. You can actually... Yeah, you can open up an editor. You can open up an editor and then just play around there and then just refresh and now... So I don't have to edit in DevTools. I can actually go into my actual edit. That's nice. Who featured what we didn't show? If you have an image, you can drag an image on top of the image in the network tab and it'll overwrite it locally. What does this look like? How does this act if my, like, banner image is going to fail or something? Yeah, it's empty image. That's a lot. It's nice because, you know, a lot of things like doing the actual change, like, on the back end for real, takes a bit of work. Yeah, you can mock out, like, an error, mock out anything, any potential case. And the other nice thing is, like, we also showed in performance kind of scenarios, say, for instance, you wanted to see what would happen if I added link rel preload for whatever assets. Yeah. And you could just try that out just in the HTML, right? And not change all the things that you know. Well, that's something that I have waited for a long time in a way because we had a similar feature that covered everything with work pieces, and it was a lot more complicated. But it's so useful, especially here when people walk out and, like, can you help me with this problem? You don't want to, like, fiddle around with their Dev server or whatever. You just go... Cool little thing, too. There's now a changes drawer. You can pull up changes drawer. It shows you, like, a diff of everything you've done locally compared to the server copy. It's unified diff of every change to every file that you've made. The only thing it doesn't have is ML. Machine learning. Yes. Not yet. You can get some points. It just writes the page for you. So is that it? Is that DevTools now? Like, you know, just start one new feature and we're just calling it for another year. DevTools and another year. No feature next year. Yeah, Paul goes into hibernation. Jason showed some async debugging stuff. Yep. You can now step into async functions. So you can step into a set timeout and you'll get dropped off inside of the callback you passed in the set timeout. I tested it in Canary and it works with post message and it makes me so happy. Yes. Step across thread boundaries with post message. You can step into the worker constructor and it'll drop you off in the first line of the worker constructor. What is a worker constructor? Oh, new worker. New worker. Sorry. Where are you from? Where are you from? So I was getting tired. Can we have an app? We'll continue this in an hour. Sunstroke. I was expecting a class, but it's not. Anything that's thenable? Just step into that. It'll step into the then. So even if it's not an official V8 promise, if it's thenable, we can... Yeah. That's amazing. Something I haven't tried, but I was meaning to ask, I can have multiple message listeners on the worker side. Yes, but untested. Just sort of stepping through all the clusters. I mean, people who do that just don't deserve a good debugging experience. What? Adding multiple listeners. Multiple message listeners in a worker. That's the ultimate thing. Why? Okay, you've written a library that does like message handling stuff. You've been adding a listener. But then I might have my own stuff I want to listen to in a lower thing. To listen, you have to distinguish if this message... Nah. Nah. Does your library not support that? I'm just talking about it yourselves. I'm just going to be filing an issue. I'm comlink. Oh. Okay, so what's next? Is there anything else before I start asking what's next? You can go deeper. We showed a feature, a new feature called eager evaluation. I've seen this. I was wondering what it means. Yeah, so you're in the console and you type out something in the console, right? But before you hit enter, you get the result. That sounds obnoxious. I call it belligerent console. Yeah, it's like prefetching in Chrome. You just type, it's already fetching it. You're like, stop it! So it's a bit proactive of the console. We'll be like, hey, I know you're not done, but here you go. Does it do with functions or mostly properties? Great question. Everything that it can. What about side effects? Exactly. V8 has worked to introduce a new mode where we can guarantee there are no side effects for whatever this is. So if we see that a side effect is about to be caused, we just bail evaluation. Isn't that meltdown inspector? What? They assume they're going down a path, then they have to roll back. Oh, meltdown inspector? I thought you said that melts the inspector. Does he know? He's going down the screen. And now we're back to our surreal approach to this episode. We've got this bug again. Yeah. Salvador Dali mode. Oh, the clock's melting again. We shouldn't have had eager evaluation. We've shifted too early. That sounds good. I'm guessing it gets a bit if I do like, if you like eager evaluate fetches. So you can't eager evaluate fetches because that's a side effect. Yeah. Right now, if you think of that stuff, yeah, yeah, had side effects. So you just don't do that. So, no, but you can do something. So in our demo we showed you can JSON parse a string and it will run the JSON parse. There's no side effect there. Okay. And then you can like look at the drop-down menu for suggestions and it will include properties from the JSON you parsed. What if I change the array constructor, right, and then parse some JSON. Then you're a bad person. No, it depends. If you change the array constructor to an implementation it goes all the way down. And I know because I tried to break this for like two hours. So how is a side effect defined here? I guess it's if the method is just affecting anything outside of its closure. Yeah, anything outside of this. So you can have, yeah, you can have functions. There's a lot that can happen inside of this. But for instance, we demoed with regular expressions the exec method. Which is side effect-y. Technically speaking. Technically speaking. Exactly. But then regular expressions match and test, those affect the global regex constructor. Little more fact. I learned this last night. regex constructor dot dollar sign underscore is the previous match from string dot match. There's also dollar sign one through nine and last match. That is disgusting. Never use these. They exist. They are side effects. Match and test can't be used. Stay tuned for an upcoming campaign to discontinue those. Is there like a little checkbox where I can enable and disable a feature? Because I'm just wondering if I have a for loop that does like 10 million iterations and takes like 20 seconds to evaluate, I might want to disable it on every key. Sure. Right now, it is opt-in. So that we handle some of these cases. We do handle the case of you have an infinite loop. We know and so we won't hang your browser, but there may be some other things. So as we refine those, it'll be opt-in. But I expect at some point I hope that we will be able to just turn on for everybody. Honestly, I played with this for hours and I never managed to break it. That's cool. How do I opt-in? So grab Chrome Canary, open up console. There's a little settings cog to add the console settings where you can turn on timestamps. It's right in there. Okay. Good to have time to play with that. Brilliant. All right. So, what's next then? What's DevTools going to do now? Next 12 months? Right as we finished the talk. Road map. We did get a screenshot sent over from some of the engineers on the DevTools team showing us something that they just landed today and neglected to tell us about yesterday. For the first time. Turned out as I.O. So when we were looking at the eager of I was thinking it would avoid a lot of me pulling up MDN if you could show the parameters that DOM methods and stuff like that accepts. They're there in Chrome. We have the WebIDL. Right. And even if we didn't, those typescript has documented this stuff as well. This works. Brilliant. Okay. So just like the names of the parameters. What about things that take different like sort of overloaded? Who knows. It landed today. Let me go ask the guy. Cut these people some slack. I'm only asking questions because I'm excited. Okay. Okay. That's an exercise for the listener. Brilliant. Okay. Some people like look into more visual debugging for layouting and stuff. Is that something we're looking into? I mean, I think there's some good potential there. Like between working with Flexbox, working with Grid. I know that I always have to go and look up documentation or find a tool where I can prototype things out. We can have some CSS variable stuff today for that. Like you can see color previews for your variables, that kind of stuff. Kind of knows, is able to pierce through, find element-specific variable values. So yeah, that stuff's there. I think some of the laity things are a little bit more tricky to find out a design that both handles the case of I'm creating something brand new and I have an existing layout. I want to tweak it. I want to work with it. Sure, yeah, yeah. Because we've got this problem that they Flexbox and Grid as well, that the default layout in a lot of them is stretch, which leads to this kind of multi-pass layout thing, right? You lay out the first box, go to the second box, it's bigger, so it needs to go back to the first box, change the size of that, and so on and so on. And it's, yeah, and there's no way of knowing that's happening, right? So, yeah. We've been talking about adding warnings for some of these things. Your layout may be slow. No information about it, just letting you know. Okay, that's a good first step. It's also a really expensive layout. Leave room for improvement as well. We're gonna have announcements at each event. I was just wondering if you'd been sent a screenshot of anything that solves that this morning. I could talk to a doctor one morning. Do you want to check your email now, just in case? It seems like this stuff's landing really fast. Well, every time we think of a feature, one of the guys on the DevTools team sends us a screenshot saying, I already did this. Well, I have ideas. Maybe I should do this as well. Oh yeah, just send them an email. Just have ideas and then magically they appear. What happened to me? My bugs get rejected for DevTools. For ages, I've wanted disable all non-websafe fonts. Can we make that happen? Because I forget that I have all the fonts installed. Yay. Yeah? Yeah? Yeah, and what was the other one? LIFI, I want LIFI in network mode. That'd be nice. What is missing for LIFI? They didn't like the name. I want my brand in there. You just have your face in there. Make LIFI into a real, real thing. Get it in the dictionary. Well, I was hoping to get it in the dictionary through this. This is a different way. Do you have LIFI as your own preset in DevTools? Yes, I do. Of course you do. Share it as like a little gist. Just a gist. Okay.