[MUSIC PLAYING] PAUL IRISH: All right. So we're going to cover
what's new in Chrome. DevTools. I am Paul Irish. JASON MILLER: I'm Jason Miller. PAUL IRISH: And we're going
to be capturing what's been going on from the
Chrome DevTools team in past years-- the
features, and functionality, all the new stuff. Jason? JASON MILLER: It just says joke. Should have removed that slide. PAUL IRISH: OK. We're going to be covering
a few different things. We're going to go through
authoring, accessibility, performance, and
JavaScript-- kind of capturing different
feature areas of the DevTools. And to kick things off, we
want to look at authoring. So in authoring, this
is really the experience of us crafting a nice user
experience for everyone who's enjoying our web content. And this is creating a
nice feel, a nice look. And there's a few different
ways to do this, right? First possible way is kind of
the classic, the reliable way. I work in my editor. I load it up. I tweak things in
DevTools-- you know, copy-paste what I like,
bring it back to my editor, save and refresh. Kind of that old save
and refresh cycle. Good. Reliable, always there. Now, previous I/Os, we've
also talked about workspaces. This is a way where you
take your entire project-- like your git
checkout, essentially-- drag them to DevTools,
and DevTools can now work with that. Save to disk, and
you have access to the entire folder there. And it really makes for
a fast iteration cycle. JASON MILLER: Right. PAUL IRISH: Now, this is
great if it's your project. But there's also this other
case of, I want to make changes, and I don't necessarily have,
like, a git checkout of it. But I still want
to try things out. And that's what local
overrides is about. So, like, Jason, if you
wanted to make changes on paulirish.com-- JASON MILLER: Right, if I
wanted to deface your header, or whatever. PAUL IRISH: Sure, OK. But, I mean, so far you
do not have git access, so that works for me. But local overides would
work for your defacement. JASON MILLER: Right. PAUL IRISH: So there you go. I'm going to show a little bit
of how this works in actuality. So let's switch over to
my screen for a moment. So we have here the
Google I/O Extended site. Nice little page, but I feel
like making some changes. And it's not my site,
but I figure, why not? So first thing is, we'll
head over to Sources Panel. And in this little drop
down, we go to Overrides. The first thing that we have to
do, just once, is set this up, so we just need to select
a folder for overrides. So I'm just going
to go right in here, and you just need to put
this someplace on disk. Really anywhere. And we're going to be
using the disk to kind of back all these changes. So once you select,
you click Allow, so that DevTools has permission
to work with this folder. JASON MILLER: It
only gets permission inside that folder, not root? PAUL IRISH: Yeah. Yeah. So all right. So I think that's all good. And now, let's
make some changes. So this guy right
here, actually-- I figure a background, maybe? JASON MILLER: Yeah,
something nice. PAUL IRISH: Let's go with-- JASON MILLER: Maybe hot pink? PAUL IRISH: Hot pink
is a good choice. I like hot pink. Let's try that out. So hot pink. JASON MILLER: Hot pink. Ooh, there it is. PAUL IRISH: Oh. That is classy. JASON MILLER: That's nice. PAUL IRISH: Maybe
some padding, though. Probably needs padding. JASON MILLER: Yeah. Needs some padding. PAUL IRISH: All right. Let's give that a shot. JASON MILLER: Ooh, pretty. PAUL IRISH: Now, I don't
know if you saw that. Let me just do that again. Refresh. Ooh. Sticking around post refresh. I like that. I like that. Now, the cool thing here
is that I can make changes to kind of anything. Say, for instance,
this text beneath here. Developers hosted 534
extended viewing parties. Cool. I think that number needs
a little bit of an upgrade. JASON MILLER: [INAUDIBLE] PAUL IRISH: I don't know
exactly where this text is. It could be in the JavaScript
file, maybe the HTML. But let's go find it. So I'm just gonna
select and copy that. And we want to find it, so
Command-Shift-P brings up this little command palette. JASON MILLER: Right. PAUL IRISH: Nice. And I'm gonna show search. This is going to search
across all the files that are loaded into the page. And OK. So here we have just the HTML. All right. Easy enough. So we can make a change to that. Over 9,000. Good. We hit Control-S. And you
can see this little purple. JASON MILLER: I think
it was [INAUDIBLE].. PAUL IRISH: This is telling
me that this is linked. This file is linked
to the network file. And so I have the one
on disk and the network. And this also means if I
right-click this and open it, this HTML file that I
just changed is just a regular old file on disk. I can drag this
into my text editor and make any changes there,
and then they'll instantly be reflected if I just refresh. Over 9,000. Nice. JASON MILLER: Pretty nice. PAUL IRISH: So this enables
a lot of really cool things. And you can make nice changes,
prototype things out, go wile. If you get to a point
where you're like, OK. Made some changes. They feel good. But what were they all again? There's another
little pane that you can access to just summarize
everything that's happened. Again, you can use
Command-Shift-P, or you could just open up
the little menu down here at the bottom and go to changes. And the changes view was just
going to tell you what changed. Now, in this case,
it's minified CSS, so it's not entirely
useful to look at the diff. But then again, I could
always open up this file and pretty print it. And at that point-- whoa. That's one way to do it. JASON MILLER: Yeah. PAUL IRISH: All right. Let's go back to the slides. All right. So you saw in my demo
search across all files. And we've been looking
at other places to surface more
content via search. JASON MILLER: Yeah, so one of
the ways that we're doing that is through improvements
to the network search. So in the Network tab, we've
had search for a while. It's just like a bar that
shows up at the bottom. And that bar is
only searching URLs. So it's useful if you're
looking for something that's in the URL, but
not quite so useful if you're looking for something
that isn't in the URL. So now there's a
new icon in here, and also a new
shortcut, Control-F. PAUL IRISH: Yeah,
Control-F, Command-F. JASON MILLER: Command-F, yeah. And that's gonna pull
up a new search sidebar. Search sidebar searches through
headers and their values in addition to all those
other pieces of information. So this is really useful. Let's say I wanted to search
for cache control headers. Cache control headers
are gonna tell me whether the browser is going
to cache stuff locally or not. And it'd be good to get
kind of an overview of what we're sending down. So if I hit Enter on
this, it will show me an aggregated list of all
of the cache control headers that's sent down. And you can see, you can
click them in the left. You can see details
of those on the right. It's very nice. And there's still
the familiar controls and the header for
case-sensitive search, regex-based search. This is really
useful if you want to search for
authorization headers to know which of your requests
are authenticated, cookies. There's lots of great
use cases for this. PAUL IRISH: If you had,
like, specific domains, and you're looking up what CSP
headers reference this domain, stuff like that. JASON MILLER: Right. PAUL IRISH: It's powerful stuff. JASON MILLER: Yeah. So we're trying to show you
kind of an at-a-glance overview in this interface. And there's other
places in DevTools where we have kind
of similar problems here, like huge lists of CSS
variables would be one example. PAUL IRISH: Yeah, variables. Raise your hand if you
guys use CSS variables, custom properties. JASON MILLER: Yeah. PAUL IRISH: Good stuff. I love 'em, too. Yeah. We use them all the time on the
Chrome Dev Tools themselves. And we've been looking at
it and wondering, you know, they could probably use some
upgrades in the experience. So there's a few things. So if you've seen
some variable before, they might look a little
bit something like this. We have a fail color. We have a warning color. Mhm. Good. But then you're like,
what was that again? So today, you'll see something
a little bit different. You'll just see a little
color swatch placed there. JASON MILLER: Nice. PAUL IRISH: We
recognize that this is referencing the color value. It's our little color swatch. Seems good. Easy enough. You can also just hover
on that variable name, and the tool tip will
resolve the actual value. Works with colors. It works with anything, any
custom property, really. But with colors, there was one
more thing that's pretty cool. If you open up the color
picker, down at the bottom is this kind of color palette. And this is the
material design color palette, a lot of nice, tasteful
choice of colors in there. JASON MILLER: Yep. PAUL IRISH: But there are a
few other palettes available. And a brand new one
is CSS variables. So this is kind of cool. You click into this,
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
via the cascade and all that. JASON MILLER: Right. PAUL IRISH: So
that's kind of cool. So right now, we're hovering
over text link color. And if I select
this, the cool thing is we apply a var text link
color instead of the resolved color value. JASON MILLER: Cool. So it actually
doesn't use the hex. It uses the actual variable
when it injects it. PAUL IRISH: Yeah. Kind of like what
you'd expect to happen. JASON MILLER: That's
pretty clever. Yeah. PAUL IRISH: Now, when
you choose colors, it's important you choose
something that looks good, tasteful, but also accessible. You want to make
sure that what you have is an accessible choice. And so we've introduced
some features to make that a
little bit easier. And we're gonna walk
through this little video where we explore that. So I'm looking at
this page, and I want to tweak the foreground
color of this text. So I bring up the color picker. And it says contrast
ratio right there. It says it's not
very good right now. But as I drag the color
around, the contrast ratio is going to update. It's kind of cool. And if you open that
section up, you'll now get this line
in the color picker. And so on one side of the line-- JASON MILLER: A line
of good and evil. PAUL IRISH: --is bad contrast. On the other side is good. And you get ratings beneath
on what the current ratio is and if it meets WCAG
and AA or AAA ratings. Now, it's currently
trying to identify what the background color is. But there is a little color
dropper there, a little eye dropper, if you want to manually
select your background color. So that's always an option. JASON MILLER: Cool. Did I notice that you were
editing your Lighthouse score with DevTools? PAUL IRISH: I was editing
Lighthouse with DevTools. I wasn't editing my
Lighthouse score. But the score, I mean, it
could use some improvement. Yeah. I get what you're saying there. JASON MILLER: Right. So speaking of Lighthouse,
we should probably tell them about the new
features we in Lighthouse. PAUL IRISH: All right. All right. Sure. JASON MILLER: Seems
like a good idea. So last year at Google
I/O, we announced that we were bringing
Lighthouse into DevTools. And this was huge
because it meant that anybody who had Chrome
obviously has DevTools. Everybody who has DevTools,
which is the Chrome users, now had Lighthouse. Nothing to install,
no extensions, none of that business. So that's good. Now that kind of started
us thinking was there anything else we could do
to kind of make Lighthouse more helpful to people? We're always thinking of that. But it moving into Chrome was
sort of a turning point here. We want Lighthouse to act
like a real lighthouse. We want it to kind of keep
you away from the rocks and guide you towards other
meaningful information that exists elsewhere in DevTools. So this year, I'm
excited to announce that we are introducing
some improvements that we hope will bridge the gap
between Lighthouse and DevTools. And I'm just going to show
you my favorite new feature of all time, which
is View Trace. View Trace, to
stretch the analogy to the point of breaking, lets
you dig beneath the lighthouse. PAUL IRISH: Oh. JASON MILLER: Yeah, yeah. We're looking at
the foundation here. So Lighthouse records a trace
of your application as it runs. It loads your
application, reloads it, grabs a trace, which is going
to be details about JavaScript, network stuff, all those
kind of underlying pieces of information. We thought, why not let
people dig into the trace? We have it. It's sitting there. And it turns out this
is a really nice way to kind of see why you've
got Lighthouse score. So let's walk through this. So I'm on paulirish.com,
one of my favorite websites. And I'm gonna run a
performance on it. We won't pummel him
with the PWA on it. Just the performance
on it for now, for time reasons and whatnot. So behind the scenes, this is
going to be reloading the page, gathering a trace,
analyzing it, and coming up with a pretty page
and a lovely score. I think-- there. So you get an 87. PAUL IRISH: Hey, now. JASON MILLER: Congrats. But you see now there
is a View Trace button. And clicking this,
it's actually going to take me right over
into the Performance tab, and I can dig down
into the trace that powered that Lighthouse score. And this awesome
because that trace was run on an emulated
3G network on a slow CPU emulation. PAUL IRISH: That's right. JASON MILLER: And
you can kind of figure out what exactly those
audits were derived from. Let's say you had a critical
request chain for some CSS or something. And you could literally see
that in the Performance tab blocking the rest of your page
rendering with screenshots. So to me, this is huge. PAUL IRISH: That's cool. JASON MILLER: It's huge. PAUL IRISH: Now, I'm looking
at this, and you're kind of-- I mean, in a way,
you're calling me out. You're calling my site out,
at least, for its performance. So I was wondering maybe if
we should spend a few minutes, see if we can
improve the score-- JASON MILLER: I think we
can improve the score. PAUL IRISH: --on that
site a little bit. JASON MILLER: I think
we can improve it. PAUL IRISH: We can
make it faster. And to make it faster, let's
bring back one of the features that we were talking about
earlier, local overrides. So OK, first up,
let's reload the page, just capture a trace
of the page load. All right. Now, what we want to do is
measure from the very beginning of the HTML load
right there to when the web fonts finish loading. So right about there. JASON MILLER:
2,000 milliseconds. PAUL IRISH: At the bottom. Yeah, yeah. We can see it's 2,000
milliseconds total. All right. It takes a while. Now, in the green right
there, WOFF files. These are my web fonts. And there's a pretty big gap
before they start loading in. JASON MILLER: We can fix it. PAUL IRISH: That's no good. So we can fix this. This is a bit of code. I'm gonna use resource
timing API, some fancy stuff, copy it to the clipboard. But really, I just want
to get the WOFF URLs. Now, we're going to come over
here and use local overrides. We paste them in again. Yeah, some multiple cursors. JASON MILLER: Just ignore
the multiple cursors magic. This is Paul Irish video-fu. PAUL IRISH: All right. Link rel preload with our fonts. And I think-- yeah,
that's link rel preload. All right. We've got them loaded in. So again, 2,000
milliseconds before. Let's reload with [INAUDIBLE]
local override's changes. So we now are preloading. Did we preload? JASON MILLER: Well,
it's looking better. PAUL IRISH: Yeah. Yeah, the fonts are
at the top, the green. Yeah, yeah. WOFF two. Yes, good. JASON MILLER: Ooh. PAUL IRISH: And our total
time is, yeah, 1,386. JASON MILLER: That's a
33.33 repeating improvement. PAUL IRISH: Uh-huh. That's not bad. JASON MILLER: Very impressive. PAUL IRISH: That's
pretty fast, too. Be able to make a change. JASON MILLER: Very impressive. PAUL IRISH: Just try it
out and see what happens. So while we're talking
about performance, there's a few other changes. So you might 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 those are gonna
be represented on a separate track. Also, any web workers,
any service workers are positioned on
different tracks. And the nice thing
now is that as you select each track, the submarine
at the bottom of the call tree, all that stuff at
the bottom is gonna be updating to reflect
your track selection. JASON MILLER: Very nice. It's sort of like a
multi-process view. PAUL IRISH: Yeah, yeah. JASON MILLER: I like it. PAUL IRISH: It's kind of cool. And it enables,
also, another feature that I think is really powerful. So say, for instance,
you're looking at a trace of your web app. And you see a flame
chart like this. Now, in the flame chart,
there's a lot of stuff going on. There's function names
like complete work, create element,
mount class instance. And you're like, yeah, mount
class instance is taking time again. JASON MILLER: Good old
mount class instance. PAUL IRISH: Great. What do we do about that? Now, a number of
JavaScript frameworks also use user timing to say
when things started and ended. And usually, this
is very meaningful because it's talking
about your components. When your components
were mounted, when they were rendered. And so you can select
the user timing track and now see that data
summarized with the bottom up in the call tree details. This is really great. Having this structural profiling
data come in via user timing saves time because otherwise,
you'd be writing all this, like, start and
end marks yourself. It's a big time
sink to do all this. Here, DevTools is doing a lot
of the heavy lifting for you. JASON MILLER: All right. Paul, you mentioned
sinks and lifting. PAUL IRISH: Yeah. JASON MILLER: Right. So one of the things
I wanted to cover is actually related to that. And it's async await. PAUL IRISH: A joke slide? JASON MILLER: Yeah. PAUL IRISH: In our presentation? JASON MILLER: I think I was
gonna remove them before. PAUL IRISH: Probably
should have. JASON MILLER: This is
the last one, though. PAUL IRISH: Good. JASON MILLER: Yeah. Oh, no. There was two. There was two. Yeah. PAUL IRISH: A sink. JASON MILLER: Or three. PAUL IRISH: Await. JASON MILLER: There's a couple. PAUL IRISH: Is that
a self-diving car? JASON MILLER: That's
a self-diving car. So anyway, what I was
gonna say is it's 2018, and it's the year
of async await. Cool. So async await is kind of
part of everyday JavaScript development at this point. Last year, we added the ability
to step through async await in DevTools, right? Amazing. This year, we're taking
things a few steps further. If you're not familiar
with async await, it kind of looks like this. You have a wrapper
function-- very important-- with
the async keyword. Inside of the body
of this function, you can use the await
keyword to kind of weight on the return
value of a promise. And it looks like
synchronous code. This is all promised space under
the hood, and that's lovely. But it's going to kind of
run line by line to you. This will run asynchronously
when it actually gets invoked. This is fine, certainly fine
for application development. But one place where this is
actually kind of annoying is down in the console. PAUL IRISH: Yeah. JASON MILLER: So we
are happy to announce that today the
console has gained support for top-level await. PAUL IRISH: No
wrapper around it. JASON MILLER: No
wrapper, no shenanigans. PAUL IRISH: That's nice. JASON MILLER: So I'll
walk through an example to illustrate this. So in this case, I'm going
to await the response from this fetch call, which
is going to apparently connect to a GitHub API that I googled. It was the first
result. So we're going to search for workbox. We're going to
stick that in res. Then we are going to await-- no wrapper, no promises-- the value of res.json, so
the streamed JSON response. And you notice it just dumps
it straight into the console. There's no undefined
or promises here. PAUL IRISH: Promise spending. JASON MILLER: Yeah,
exactly, with the little, oh, you got to wait, and
then expand it and get the value again. Yeah. Clever hacks. We don't need them anymore. And then finally, I'm going
to use a little DevTools trick, which is $_. PAUL IRISH: Ooh, nice one. JASON MILLER: Like bash,
this is the previous result from the console. So I can just $_ items
map, map 'em over the name, and now I have a list of
the 30 most popular Workbox repositories. PAUL IRISH: Nice. JASON MILLER: Yeah. So this is cool. So I've been able to step
through line by line, in sort of like a discoverable
way, an async flow. And I haven't had to use
any wrapper functions, haven't had to use promises,
callbacks, none of that stuff. The console just kind of
supports this out of the box. PAUL IRISH: That's great. JASON MILLER: The
interesting thing is we're actually bringing
this async first mentality to the rest of DevTools
like the debugger. So one of the biggest
changes you'll notice here is when stepping
into async functions. Until now, if you stepped
into an async function, like a set timeout
or whatever, we would pretty much just
step over it, especially if it's a native. So let me tell show
you what I mean. So in DevTools
last year, this is what set timeout looked like. I clicked Step Into on
this set timeout call, step into the next function
call, I end up on line 7. PAUL IRISH: Stepped past it. JASON MILLER: That
doesn't seem super useful. PAUL IRISH: That doesn't
seem like an into. JASON MILLER: Right. That's not much of an into. Now in DevTools, if I click
Step Into on set timeout, I fall into the function. I can step through the
rest of the function. So it's kind of an
async-aware step into. This is just one type
of async, though. So a lot of people right now
are spreading their work out on the main thread. Or the alternative
is you push your work off the main thread
into a background thread using a web worker, let's say. One of the hardest parts
of web worker development is actually debugging them. These are separate threads. Yeah. PAUL IRISH: It's
a little painful. Yeah. JASON MILLER: It's painful. You're switching context in the
debugger, going from one thread to another. The sidebar is changing. You have to wait for
post-message calls to resolve, and you can't really
do anything there. So we thought, what about making
all that a little bit easier? Yeah. So now, let's say we
have some main thread code running on the main
thread, script tag, whatever. With new async-aware
step into, I can step into the
worker creation. PAUL IRISH: Into the
creation of the worker. JASON MILLER: And
it drops me off on the first line of the
worker that I created. PAUL IRISH: Nice. That's great. JASON MILLER: Yeah. So we can step across a thread
boundary in DevTools now. So this is really cool. And then you just
continue on like normal. Another case would be let's
say I've created my worker. I've got this w variable
with the worker in it. And I've got a breakpoint there. I can step into the
post-message call to the worker. And it will step across
the thread boundary and into the worker. It will drop me off on the first
line of my onmessage handler in the worker. Yeah. PAUL IRISH: What about in the
post-message from the worker back to the main
thread, can we-- JASON MILLER: It's funny
you should mention that. I actually have slides set
up to show exactly that. PAUL IRISH: Oh, really? JASON MILLER: So we could step
into the post-message call and get back to the
main thread like there was no thread boundary at all. And it drops us off at
the message handler. So this is super cool. It's almost like you're not
debugging across a worker boundary at all. PAUL IRISH: Wow. JASON MILLER: Yeah. PAUL IRISH: That's rad. All right. So before we finish up, I
do want to bring it back to the console for a moment. JASON MILLER: Gotcha, gotcha. PAUL IRISH: There's some
stuff going on in the console. In fact, in the
console, there are few functions that are available
there and nowhere else. We call 'em in the
command line API. But there's some sneaky things. First up, might have
spotted before copy method in the console. Take anything you want,
throw it to the copy method, it copies it to the clipboard. It's so nice. You pass it, like, an element. It'll give you the outer HTML. Pass it anything else, it'll
just stringify it as JSON and copy that to the clipboard. Nice, handy little thing. JASON MILLER: I did not
know that this existed. PAUL IRISH: It's been there,
like, seven, eight years. Yeah. JASON MILLER: Right. Longer than I've been alive. PAUL IRISH: But anyways, just
to refamiliarize yourself. There are some other
methods in there that have now just
gotten an upgrade, too. The debug method
has been around. What you can do is you
pass a function to it, and it will essentially pause
right inside of the function that you passed. But now you can pass
a native function. So document.querySelector
would be an example. And what happens
is it'll actually pause right as soon as any
JavaScript is about to use that native method. You could also do
it with alert, too, if you want to find
out who is alerting. Pause right there. Similar story with monitor. Different function. It doesn't pause,
but instead, it logs to the console, the stack
trace and also the arguments that are being passed. So this, you could say, tell
me about all of the code that's using set timeout and
what they're using it with. JASON MILLER: So we would have
seen in my previous example the function that I passed
to I and all this stuff. PAUL IRISH: [POP] Exactly. JASON MILLER: Beauty. PAUL IRISH: It's really nice. There's one more that's
actually brand new, which is query objects. This is kind of
cool, kind of tricky. So let's start this out. We have a class. We treat two instances
of the class. The second one, we just add an
extra property so it's unique. Now, later on, we're like,
hey, query objects for foo. We pass back in that class. And we're going to
get in the console an array of all of the
instances of the class. In this case, it's
pretty straightforward. But the really
powerful thing here is that it is looking across
the entire JavaScript heap and reporting back all of the
instances that we know about. It's like taking a big
heap memory snapshot and summarizing it down
to just those things. Now, this is cool
because it's not just what is currently available
to JavaScript scope right now. It's the entire heap. So you can look
at, for instance, custom element
constructors or, like, what are all my canvas 2D
contexts that are somewhere? And just get them
dumped right here. JASON MILLER: Nice. PAUL IRISH: Powerful stuff. OK, I think that's it. So to wrap up, we covered
authoring, accessibility, performance, JavaScript. And I wanted to mention
always grab Chrome Canary. JASON MILLER: Paul,
didn't I see you literally backstage before
we came on adding slides to the end of our deck? PAUL IRISH: Right. JASON MILLER: Is there
something that you wanted to tell the good
people of this room. PAUL IRISH: Yes, there was. A little treat. JASON MILLER: Oh, God, are
we getting a live demo? PAUL IRISH: I think so. JASON MILLER: We're
getting a live demo. PAUL IRISH: You guys
want to see this? All right. JASON MILLER: We're
getting a live demo. PAUL IRISH: I got one more
thing to share with you. JASON MILLER: Probably sit down. PAUL IRISH: OK. Now, Jason, as you know, web
platform evolves quickly. As it evolves, we
as developers need to feel comfortable working
with these new APIs, these new objects, and make
sure that our code runs well against all of them. And the console is our home
base for this exploration. It's where we start from. So we were thinking
that the console could use some more power here. So we're introducing
a brand new feature that we think revolutionizes
how we work with the console. We call it Eager Evaluation. And I should give you
guys a taste of it now. JASON MILLER: Yeah. PAUL IRISH: Really no other
way to do it than with a demo. So let's switch
over to my machine. We'll just undock this
and go fullscreen here. JASON MILLER: Does anybody
else know these commands, or is that just you? PAUL IRISH: Command-Shift-P. JASON MILLER: Probably
adds them as he needs 'em. PAUL IRISH: Dock to right. Undock. Those are my favorite ones. All right. JASON MILLER: Today I learned. PAUL IRISH: All right. Here in the console, I have
a little line of code, right? We have a regular expression. And we're going to
call exec on it. We're going to pass it a string. JASON MILLER: There's
a music joke in there. PAUL IRISH: All right. Let's finish this off. Thanks. All right. Now, as I finish
this expression, check out what happens. We get the result of this
evaluation just positioned right beneath me. And I did not hit
Enter or anything. JASON MILLER: What? PAUL IRISH: The cool
thing here is, too, that this is going
to update as I type. So if I come back and
let's say, does this regex work if I have parens
around the area code? JASON MILLER: Let me guess. No? PAUL IRISH: No. No, it doesn't. OK. Regex a little brittle. Could use some improvement. One thing I do see as far
as improvements this zero to nine character range. JASON MILLER: Oh, yeah. It's like a feature for this. PAUL IRISH: All right. We could use a digit instead. We do have multiple of
these, so we could just multiple selection slash d. And yeah, OK. Good. JASON MILLER: Still working? PAUL IRISH: Matches, too. We're good. Feel nice about this. Now, one last thing,
Jason, I wanted to do is I want to pull out the
area code from this text. JASON MILLER: You're
sure this wasn't just a reason to show off your
whole triple cursor thing? PAUL IRISH: So while we have
these multiple cursors here-- JASON MILLER: Right. PAUL IRISH: Ooh, I like that. What we're going to do is we
just add some capture groups to the regular expression. JASON MILLER: Right. PAUL IRISH: All right. All right. Yes, exactly. And so let's pull
out the-- is it 1? 1. Boom. All right. So in a few short moments,
with not too much work, we managed to exploit
this API, find a bug, make an improvement, and get
the result that we wanted. And this speed of
iteration's really nice, no, like, going back
in your history, changing that one thing. We just do it all
live on the same line. Let's show another demo of this. JASON MILLER: We
should do a DOM demo. PAUL IRISH: DOM thing? JASON MILLER: Yeah. You still have that page running
in the background I think. PAUL IRISH: OK. Yeah, yeah. We're still connected to
this page with the hot pink. JASON MILLER: That guy
never closes anything. PAUL IRISH: All right. All right. How about-- OK. We got links on
this page, right? JASON MILLER: Yeah. PAUL IRISH: Let's grab all of
the link text on that page. JASON MILLER: Like you're
like a screen reader. PAUL IRISH: Yeah, like
I'm a screen read. JASON MILLER: Paul
Irish, screen reader. PAUL IRISH: All right. OK, so what do we need? QuerySelector. JASON MILLER: QuerySelector. QuerySelectorAll. PAUL IRISH:
QuerySelectorAll, right. Yeah, my bad. a tags. JASON MILLER: Eh. PAUL IRISH: All right. We have them. Now, I don't know, we'll
grab the text with, like, innerText or something. So we'll map over that. Map. Map's undefined. Map's undefined. Map's undefined. Node list. Node list. JASON MILLER: It's a node list. PAUL IRISH: Right. JASON MILLER: It's not an array. PAUL IRISH: Right. No map on node list. OK. How do we change a
node list to an array? JASON MILLER: What's the newest,
hottest way of doing this? PAUL IRISH: Audience
participation? Suggestions? AUDIENCE: Array from. PAUL IRISH: I like it. I like it. Yes. Let's do do-- JASON MILLER:
Could we go deeper? PAUL IRISH: Array
literal with spread. JASON MILLER: Ooh. PAUL IRISH: Oh, yeah. All right. JASON MILLER: Oh. JASON MILLER: Did that
even work in Chrome? Who knows? PAUL IRISH: I love that. JASON MILLER: Magic. PAUL IRISH: Oh, that's fun. All right. Now we got an array, right? Map. Map's the thing. Map's the thing. All right, good. JASON MILLER: Hey, there it is. PAUL IRISH: All right. So let's grab the inner text. JASON MILLER: Inner text. PAUL IRISH: Good. JASON MILLER: Looking good. PAUL IRISH: Great. Let's clean this up. Let's sort it, get
it all nice and-- JASON MILLER: That's
a lot of white space. PAUL IRISH: Wow. OK. Let's get rid of that. Filter. JASON MILLER: Let's hope
they have title tags. PAUL IRISH: The classic
one, the filter Boolean. JASON MILLER: Boss filter. PAUL IRISH: Boolean constructor. JASON MILLER: I like in. You still have some
white space over here. PAUL IRISH: Yeah, all right. Trim? JASON MILLER: Trim that, yeah. PAUL IRISH: Yeah, let's trim. Trim. Nope. JASON MILLER: You having
some typing problems? Oh, it shows you
the error below. PAUL IRISH: That is handy. OK. JASON MILLER: That's
pretty clever. PAUL IRISH: Fingers, go. Yes, good. JASON MILLER: Hey, there it is. PAUL IRISH: All right. All right. Nice. JASON MILLER: Very nice. PAUL IRISH: So I was able to
craft that and not mess up too much. And we got back-- JASON MILLER: Configure widget. PAUL IRISH: It'll
work, all right. JASON MILLER: Who knows
what that's supposed to be? PAUL IRISH: Note the
really powerful thing here is that eager evaluation
is done in a way that we can guarantee
there are no side effects. And we did this by
introducing a new mode in V8, where we attempt
to evaluate code. But if we know it's about
to cause a side effect that changes the outside state--
your application, the page, other parts of the DOM-- we just bail and
stop doing that work. JASON MILLER: I tried for
like an hour to break it. You can't. I've got to try more, though. PAUL IRISH: The
other nice thing is that eager evaluation, in
addition to kind of giving you this result right underneath
what you type in the console, enables some new
completions in the console. So a completion is just
I type in document. I hit dot. JASON MILLER: Oh, closure_uid. PAUL IRISH: closure_uid. JASON MILLER: My old friend. PAUL IRISH: Like we all
do every time we see this. Well, this is on
this page anyways. But there's some
tricky things here. Completions normally, as soon
as you introduce some parens, you are calling, like, a
method, completions never continue to work. You just have to figure
it out on yourself. But now we can try your
evaluation on that same string and power more completions. So to give you a show of
how this kind of works, and Jason and I, as
we've been rehearsing-- JASON MILLER: Oh, you're gonna
show off our thumb war stats. PAUL IRISH: Yeah, yeah, yeah. JASON MILLER: Should we try
and settle this right here? PAUL IRISH: OK. We're been playing thumb wars. JASON MILLER: One,
two, three, four. I declare a thumb war. Battle. PAUL IRISH: And I've
been keeping score. Touch. Won't go in. All right. Five. We got five on Paul. JASON MILLER: That's a tie. PAUL IRISH: You're done, man. JASON MILLER: I like it. PAUL IRISH: The nice thing
is I'm keeping this here. But we were thinking it would
probably make more sense if we pulled this data down from-- JASON MILLER: Right. We got to put this up
in a thumb war API. PAUL IRISH:
Thumbwarsstats.com/api. JASON MILLER:
Hosted by Firebase. PAUL IRISH: Yeah, yeah, yeah. Now, if we pulled that
down, it would probably be a string, right? So let's make this a string. JASON MILLER: It's a bit opaque. PAUL IRISH: Yeah. And we need to turn it back
into an object, right, guys? Right. So we'll just JSON parse this. JASON MILLER: My namesake
function, the JSON parse. PAUL IRISH: Now, take a look. I'm just gonna hit dot, and
what's in my completions? JASON MILLER: What? PAUL IRISH: Jason and Paul. JASON MILLER: We have a cameo
in the console dropdown? PAUL IRISH: Yeah, check us out. We look good up there. So the cool thing
here is this is being evaluated under the hood. And it was determined
to have no side effects. So now completions are upgraded. JASON MILLER: That's rad. PAUL IRISH: Really
powerful stuff. This is just a taste of some
of the things you'll be seeing. Try this out yourself. What you can do is grab
today's Chrome Canary, pop into the console
settings right up here, and you'll turn on
eager evaluation. It will enable all the stuff
that I was just covering. All right, Jason. I think that's it. Let's go back to the slides. Do we have anything else? JASON MILLER: No. PAUL IRISH: I don't think we do. JASON MILLER: I
think we're good. PAUL IRISH: All right. JASON MILLER: Think that's it. PAUL IRISH: Thank
you guys very much. Appreciate it. JASON MILLER: Thanks, everybody. [APPLAUSE] [MUSIC PLAYING]
