[THEME MUSIC]
MATT GAUNT: So you're presenting at I/O this year, right?
ADDY OSMANI: Yes.
MATT GAUNT: I have one bit of advice for you
that was given to me by, um, Paul Irish.
So when I first did a rehearsal for my I/O talk,
everything was, like, OK-- got some feedback on how to make it
better, all the rest of it.
And Paul Irish kind of gave me one bit of advice.
And he quoted me.
He was just like, when you introduce yourself,
you should have said, "Hi, I'm Matt Gaunt."
And, no.
It was, "Hi, I'm, um, Matt Gaunt."
He was just like, don't-- it's your name.
You know your name.
You don't need to think about it.
ADDY OSMANI: Do you realize that when
you were talking about Paul Irish,
you called him "um, Paul Irish"?
MATT GAUNT: Yes!
So that's what I'm talking about.
I can't do names.
So the minute I got onstage at I/O--
ADDY OSMANI: In your head, is "um" just the same as, like,
"Mr." or "Mrs." or "Dr."?
MATT GAUNT: Yes.
If that was on the drop-down, I could type that in, actually.
I'd totally do that. "Um Matt Gaunt."
ADDY OSMANI: There we go.
We should have introduced that into the standard.
MATT GAUNT: Anyway, that's my one bit of advice.
Because I got onstage at I/O, and that
was the first thing I had to say, was introduce my name,
and I actually went, "Hi, my name's, um, Matt Gaunt."
And then, instantly, I was just like, dammit!
I'd been onstage literally no longer than 10 seconds,
and I've already messed it up.
So there.
There you go.
ADDY OSMANI: OK.
I'll be sure to follow that advice.
MATT GAUNT: If you say "um" now, you're
also going to get that mental monologue of me
telling that entire story.
ADDY OSMANI: I'm already worrying about this.
MATT GAUNT: Good.
Do you have any tips for promises?
ADDY OSMANI: Um, yes I do.
MATT GAUNT: I see what you did there, and I like it.
Because I'm using them for ServiceWorker and push
notifications, and it's the first time
I've really been using promises extensively.
Especially with push, you get really
quite deep nested promises.
I'm kind of getting a bit lost when
it comes to debugging them.
I was just wondering if you had any tips.
Because, at the moment, DevTools is just not helping that much.
ADDY OSMANI: OK, sure.
So I could show you something if you like.
We've been recently working on trying to improve visualizing
the promise flow in DevTools.
MATT GAUNT: OK.
ADDY OSMANI: And something you're probably used to using
is console logs or the debugger statements to debug promises.
But we've got a new Promises panel.
And the idea here--
MATT GAUNT: Under the little draw thing
that I frickin' hate?
ADDY OSMANI: Yes.
And the idea here is similar to the timeline.
Just start recording, and then any
promises they start getting pulled inside your scripts
will get visualized here.
So here we've got some promises that started off
in a gray Pending state, and then they turned green as soon
as they were resolved.
MATT GAUNT: So that's like the good case?
It's like the dot, then everything's fine?
ADDY OSMANI: Exactly.
You can also see what lines those promises were defined on.
You can just click to jump straight through to the code
where they were define, which is kind of useful.
MATT GAUNT: Nice.
ADDY OSMANI: You can also see where the promises settled
and jump to the line of code for those.
And you get to see the time it took to settle those promises.
MATT GAUNT: OK.
Nice.
I imagine the time to settle is particularly useful with things
like Fetch, where you're doing a number of requests,
and all that kind of stuff.
ADDY OSMANI: Yeah, exactly.
So here's another demo where, basically, I've
got a promise that's going to be rejecting intentionally,
just so I can show you this.
So here, these are actually showing up in red.
So green is Resolved, red is Rejected, and gray is Pending.
MATT GAUNT: Someone missed a trick
with not going for just, like, amber while they're not
settled or rejected.
ADDY OSMANI: That seems like a great patch
you could write and submit.
MATT GAUNT: I won't.
I don't love it that much, but someone missed a trick.
ADDY OSMANI: All right, all right.
So another thing we've got in place
here is, like, let's say you've got
a whole ton of different promises in your page.
You're finding it hard to locate a particular one.
We've got something for filtering down
based on different promise states, so Pending or Fulfilled
or Rejected.
MATT GAUNT: Nice.
So that's the same as console, where you'd normally
just search for text in the filter box-- this is actually
just based on state?
ADDY OSMANI: Exactly.
And then we've got this little magical async checkbox.
MATT GAUNT: Yeah, I was going to say, that doesn't make sense,
because promises are async by nature.
ADDY OSMANI: Well, let me show you
why we've got that check box.
So here I've got an app that basically
is going to go and pull in a new news story
every couple of seconds.
And I'm just going and setting a break point
at that point where I'm attending the content
of the article to the DOM.
So we're just going to go, and we're going to do that.
And if we take a look at the callstacks
here, what you'll notice is that there's not
a lot of information.
It's not helping us visualize the asynchronous control flow,
what's going on in our app.
MATT GAUNT: That's almost useless.
ADDY OSMANI: It's almost useless.
It pretty much is useless.
So what we're going to do here is we're going to go
and we're going to check the async check box.
If you click inside the Promises panel,
it's just going to sync up with the normal async debugging
n in DevTools.
We're going to redo this demo once again.
What you'll now see is we've got this nice rich whole set
of asynchronous call stacks being displayed.
A lot more information this time.
We can see where promises are resolving;
we can see XHR requests; we can see promise resolutions
for other parts of the app.
And we can even go and see what line of code to find them.
So we can just go and click, and, as you'll see,
the line directly in your source get highlighted too.
MATT GAUNT: So this is basically like the promise [INAUDIBLE],
every single method that's kind of gone through and resulted
in other promises getting [INAUDIBLE].
ADDY OSMANI: Exactly.
In fact, we can just go and see an entire flow right there.
MATT GAUNT: You can actually see all of the nested promises
as they get called and see how deep it goes.
Nice.
ADDY OSMANI: And this is a little bit better
than just using console logging.
MATT GAUNT: Yeah.
So why not have the async option always checked?
ADDY OSMANI: I don't have a right answer for this,
but I think it might just be due to the computational cost
of having async turned on all the time.
MATT GAUNT: Just having to track everything all the time,
rather than just track the result states.
Nice.
So this is a video from your jQuery UK talk?
ADDY OSMANI: Yeah.
I recently gave this talk at jQuery UK
called "DevTools State of the Union,"
which kind of walks through a performance case
study and a grab bag of new tips-- things
you can do in the DevTools.
MATT GAUNT: A little birdie told me
that you had to be escorted offstage.
ADDY OSMANI: What?
I never get escorted off the stage for any reason!
MATT GAUNT: How long was the talk that you gave?
ADDY OSMANI: So my talk was supposed
to be 30 minutes long, right?
And I timed it.
I didn't really get that much sleep that night.
Made sure it was 30 minutes.
MATT GAUNT: How long was the talk?
Come on, Addy.
ADDY OSMANI: It was 34?
And 1/2?
MATT GAUNT: How long would it have taken?
ADDY OSMANI: 30-- if my slides hadn't crashed!
MATT GAUNT: Yeah, but how long would it
have taken you to finish before they kicked you offstage?
ADDY OSMANI: A little longer than 30 minutes?
Maybe?
MATT GAUNT: 40?
50?
ADDY OSMANI: Who knows, really?
[LAUGHTER]
ADDY OSMANI: It's one of life's mysteries.
[THEME MUSIC]