Jason is a web devrel on the Chrome team, focusing on speed & loading. Prior to joining Google, Jason created Preact and maintains a number of popular microlibraries. Now he's exploring new performance approaches for the web using Workers, framework integrations and new platform primitives.View the profile
About the talk
Get up to speed with the latest features shipping in Chrome DevTools. Discover new features aimed at simplifying asynchronous debugging and working across threads that will be particularly handy as the web goes multithreaded in 2018. Learn how to use console aggregation to streamline development, and take advantage of Network Interception to inspect or modify connections made by your app.
the experience of us crafting a nice user experience for everyone who's enjoying our web content, And this is pretty nice feel and ice. Look it is a few different ways to do this right away is the classic the reliable way. I work my other I load it up. I tweaked things in decibels, you know poppy face when I like bring it back to my editor Dave and refresh refresh cycle always there now previous iOS we've also talked about work spaces. This is a way where you take your entire project like your your get check
out. It's actually dragons devils and Devils canal. They use the disc and you have access to the entire folder there and really makes for a fast animation cycle. This is great. If it's your project other case of climate changes and I don't necessarily have like I get check out of it, but I still want to try things out and that's what local overrides about so like if you wanted to make changes on polaris.com whenever for your defacement Do we have here the Google IO extended cite a page, but I feel like making some changes, but I figure why not.
The first thing is we head over to sources panel and in the tunnel drop down we go to override the first thing that we have to do just one step this stuff. So he just needs to select a folder for overrides. So I'm just going to go right in here and just need to put this someplace on desk in the anywhere. And where can we use in the discs got a back all these changes the thoughts you select you would click allow that does Will's has permission to work with this this folder. It only gets permission inside that folder on my route. So
so you're actually figure a backgrounds. Let's go with a pink hot pink is a good choice. I like hot pink. Let's try that out. So I didn't know if probably needs about him. All right. Sticking around post refresh. I like that. I like that at a cool thing here is that I can make changes to kind of anything different since this year has hosted 534 7 viewing parties cool thing that number needs a little bit of I don't know. Let's go find it. So he's going to select
and copy of that and want to find it. So command shift p brings up this a little command palette right? Nice going to show search all the files that are loaded into the page. And so here we have just the smell is enough so we can just make a change that over 9,000 good remote control and that is linked to the network. And if I am right click doesn't open it. This is just that I just changed is just a regular loaf Island if I can drag this into my text it or make any changes there and then will instantly be reflected if I does refresh. Over
9000 you can make changes prototype things out go out if you get your point where you like? Okay, make the changes they feel good. But what what were they all again? What's another little pain that you can access to just summarize everything that's happened. Again, you can use commands have to pee or you could just open up the little menu down here at the bottom and go to changes and the changes you was just going to tell you what changed out in this case. So it's not entirely
useful to look at the death. But then again I could always open up his file and pretty princess at that point of go back to the floods. All right. We've searched across all files and we've been looking at other places to surface more content via search. Yeah, so one of the ways that we're doing that is through improvements to the network search. So in the networks have we've had searched for a while just like a bar that shows up at the bottom and that bar is only
searching URLs. So it's useful, you know, but not quite so it isn't in the URL. So now there's a new icon in here and also a shortcut Ctrl F search slidebar searches through headers and their values in addition to all those other piece of information. So this is really useful if they wanted to search for to tell me whether the browser is going to be no cash stuff locally or not. It'd be good to get kind of an overview of what we're sending down. So if I hit enter on this little show me an aggregated list of All
of the cast of trollhunters that sent down and you can see you can click them in the left. You can see the details of those on the right is very nice. They're still too familiar controls in the header for case sensitive search regex case search search for authorization headers to know which cookies that was lots of great use cases for the domains. You're looking up what's pfp headers references. We have kind of similar problems here like a huge list of CSS variables. I
love you, too, but I'm on the come up with some self upgrades in the experience. I might look a little bit something like this. We have a fail color. We have a warning color good. So today you'll see something a little bit different color swatch recognize hover variable name the tool Temple resolve the actual value work with tellers works with anything and he really was one more thing. That's pretty pretty cool. If you open up the Color Picker down at the bottom. Is this kind of color
palette. This is the material design on a nice day for choices of colors in there, but there are few other can tell it's available and a brand new one is different variables and this is listing the CSS variables that apply to this element right here. So it's basically the while there may be many many variables in the page. These are only the variables that apply to this specific element for the Cascade. That's going to come on the right. Now. We're hungry. We're hovering over a text one color. And if I select this whole thing is we apply of our
Technicolor instead of you know, the result color value. It doesn't use the fax that uses the actual variable when it detects. It is. You want to make sure that what you have is an acceptable choice. And so we've introduced some features you make a little easier when I walk through this little video where we Florida so I'm looking at this page and I want to tweak the foreground color this text. So I'll bring it to call it Factor right there. That was not very good right now as a drag the color around the contrast ratio is going to update got a cool. If you open that section up till now get this
line in the color factor, and so I might as well rain today. Bad, the other side is good and you get rating for Nissan what the current ratio is and if it meets what can I get a double-a or Triple-A rating now, it's currently trying to identify what the background color is, but there is a little color dropper there. If I drop her if you want to manually select your back on color. So that's always an option. Did I noticed you were editing your Lighthouse score with dental?
Yeah. I get what you're saying. They're great so we should probably CSO last year Google IO. We announced that we were bringing Lighthouse Inn two dentals. I just was huge in that meant that everybody who had 4. Ohm I was he has to have tools everybody who has devtools now Head Lighthouse nothing to install business. That's good. Was there anything else we could do to kind of make Lighthouse more helpful, the people that are always thinking of that but it moving into chromatin
Why not let people dig into the trace we have it. It's sitting there and turns out this is a really nice way to kind of see why you got a light house. I'm on Polaris., one of my favorite websites and performance on it. We won't we want to come with the pwa on it just a performance that it for now. You don't have time reason behind the scenes. Is it going to be reloaded the page Gathering a trace analyzing it and coming up with a pretty page and I've been a lovely for I think there are no
clicking this it's actually going to take me right over into the performance Tab and I can dig down into the trace the power that Lighthouse store and this is also because that's race was run on a emulated 3-g Network on a slow CPU emulation. Saudis were derived from let's say you had a critical request chain. You know, what for some CSF is it was and you can literally see that in the performance tab blocking the rest of your page red ring with three huge huge. I'm looking at this and your kind of I mean in the way you're
calling me out. So I was wondering maybe you should spend a few minutes and prove the score did we can improve the first stuff left reload the page to capture a trace of the page load? But now all we want to do is measure from the very beginning of the East and I'll load right there who won the web fonts finish loading right about there two thousand milliseconds in the green right there and there's a pretty big gap before they start loading in so we can fix it the better, I'm going to use resources time in API to Chances stuff copied to the clipboard, but really just want to get the
urls Now we're going to come over here and use local overrides. We paste them in. Again, yes, mistletoe know where the multiple cursors magic the hall Irish video to all right. All right, we got demoted in. So again 2000 seconds before let's reload with that logo red changes. So we now are pre-loading. Reload, what is looking better Yeah Yeah Yeah Yeahs Larry .33 repair improved performance is a few other changes. So you may see something like this. If you're looking at a trace you have the main thread you may have iframes that are using
site isolation and nothing you represented on a separate also any web workers and service workers are position on different tracks the nice thing now is that as you select each track these summary the bottom up the call tree all that stuff in the bottom is going to be updating reflect your tracks election. You're looking at a trace of your what app? Can you see if William chart like this now on the way, I'm sure there's a lot of stuff going on is a function names like
complete work. Element is taking time again. Good ol Mount classes say when things started and ended and usually this is very meaningful because it's talking about your component when your components were mounted when they're render that so you can select user timing track and now see that that data summarized with the bottom up in the call tree details profiling data come in because otherwise you'd be getting all these like starting to end like marks yourself is a big a big X think they do all this here death was doing a lot of the heavy lifting for you.
step further. If you're not familiar with async await. It kind of looks like this you have a rapper function very important with the inside of the body of this function. You can use the equate keyword to kind of weight on the return value of a promise and it looks like synchronous code. This is all promise based under the hood and that's lovely but it's going to kind of run line by line running synchronously when it actually gets invoked. This is fine.
So we are happy to announce that today. The console has gained support for top level of wait, no wrapper around o rapper. Pamela Ellis right there. So in this case, I'm going to await the response from this patch call which is going to apparently connect to a GitHub API that I Googled. It was a personal workbox. We're going to stick that inbreds that we are going to await no rapper. No promises the value of Rez. There's no undefined or promises here. I'm at the pending
trick, which is dollar sign underscore. This is the previous result from the console over the name. And now I have a list of the most popular workbox repositories flow. And I haven't had to use any rapper functions haven't had to use promises callbacks. None of that stuff the console just going to support this out of the box will notice here is when stepping into a thing functions until now if you stepped into an async function like we would pretty much just
step over it specially if it's the native don't let me see if I click into on this set timer called if I end up on line 7 the pastor that doesn't seem super useful. That's not much of an inch. I fall into the function I could step through the rest of the function. So it's it's kind of a stink aware step into this is just one type of a sink though. So a lot of people right now are spreading their work out by a thread or the alternative is you push your work off the main thread into a background thread a web
development is actually be bugging them. These are separate threads your wait for post message calls to resolve. You can't really do anything there. So we thought what about making all that a little bit easier? Yeah. So now let's see we have some worker some Maine from Rangeley Maine transcript. I can step into the worker creation into the creation of the worker and it dropped me off on the first line of the worker that I created Redbone dream Dental now,
this is really cool. And then you don't you just continue on like normal another case would be and I can step into the post message call to the worker and it will step across the boundary and into the worker. It will drop me off on the first line of my on messenger. What about if in the post message from the worker back to the main thread to me? It's just when I get back to the main thread like there was no boundary at all and it dropped us off in the message Handler. So this is super cool. It's almost like you're not
debugging across the boundary at all. Yeah, alright. So before we finish up I do want to bring it back to the console for a moment. There's some stuff that are available there and nowhere else in the command for copy message center console. Pick anything you want go to the copymethat a copy to the clipboard is so nice. You passed it like an element. It'll give you the outer HTML pasta and everything else that has Jason and any little thing. I did not know that this existed. It's been there seven eight
Lodge right there with monitor instead. Lost the console to stack trace and also the argument that are being passed in so this you could say tell me about all of the code that using the time out and what they're using it with my previous example of the function at a stew and all the stuff. That's really nice. There's one more that's actually brand new which is query object. Do you tell if we have a class we take two instances of the class the second one. We just
somewhere and get them dumps right here. I see you like literally backstage forward came on adding slice the end of our deck. Is there something you wanted to tell if the people in this room there was a little a little truth I just let you know what platform eyeballs quickly after the balls. We as developers need to feel comfortable working with these new apis is new objects and make sure that our code runs well against all them and a console is our home base for this exploration. It's
where we start from the we were thinking that also could use some more power here. So we're introducing a brand new feature that will revolutionize. It's how we work with a console. We call it your evaluation. My skinny guys, at least for now, really no other way to do it than with a demos. Let's switch over to my machine. What does undiagnosed in your false being here. Just hear my favorite ones today? I learned a string music joke in there. All right. Let's see
what happens we get the results of this evaluation just position right beneath me and I did not hit enter anyting cool thing here is to that update as I type if I come back and let's say does this regex work if I have parens around the area code and I guess no no, no doesn't ok, regex. Little brittle could use some improvement. One thing I do see further improvements is 029 orange like a multiple selection flash G and the area code from this text you sure this wasn't just a reason to show off your whole trip with Chris earthing still while we have these multiple cursors there right
now to capture groups to the regular expression sew in a few short moments with not too much work. We managed to expose JP. I find a bug make an improvement and get the result that we wanted and the speed of iterations really nice know like going Back in your history change that one thing. We just do it all live on the same line. Let's so another all of the link text like you're like a screen reader. We have them know I don't know what got the taxes like in or text or something that will map over that. No. Maps on the
fines Mountain Define. I'm not going to find what's the newest hottest way of doing that in his vision. I like it. I like it. Yeah. Let's do it. Let's do you want to go deeper array literal with spread? Oh, yeah. Now we got to rate right now. That's the thing. That's the thing. All right. All right. So let's cleaning stop at the store didn't get it all nice and a lot of white space alien. on way home brim, nope I was able to not mess up too much radiation is done in a way that we can guarantee. There are
no side effects that we did it by introducing a new mode in VA. Where are we attempt to evaluate code? But if we know it's about to change the outside State your application the page other parts of the Dom we just bail and stop doing that work. I tried for like an hour. Is that your valuation in addition to going to giving you this results right underneath where you're taking the console enables some new completion in the console Dr. Bossier, uid. But this is tricky things here
completions normally as soon as you introduce like some friends you are calling it like a method never seen your work. You just have to figure it out on your own yourself, but now we can try your evaluation on that theme string and power more completion. So to give you a show of how this kind of work. So I'm Jason and I buy declare a thumb war. We got five on Paul you're done. Then. I like it is I'm keeping this here, but it would make more sense. If we pulled this data down from
stop. Com string, right? We need to turn it back into an object. Alright Json parse. Jason Whittle cameo in the console drop down and check us out when I get up there. So the cool thing here is that this is being evaluated under the hood and it was determined to have no side effects. So all the completions are upgraded into the console settings right hop here and you'll turn on Igor evaluation. It will enable all the stuff that was coming. All right. Just I think that's
Buy this talk
Access to all the recordings of the event
Buy this video
With ConferenceCast.tv, you get access to our library of the world's best conference talks.