MATT: So what was your talk on?
ADDY: It was on DevTools.
MATT: That you have around.
Current DevTools.
ADDY: It was on DevTools.
MATT: So what like, specifically,
was it like the new stuff that's landing?
ADDY: It was like-- there was a bunch of different stuff.
It was like a grab bag of new tips and stuff
that we've landed over the last couple of months.
There was a performance case study in there
on the Wikipedia editor, and there
were some more tips and tricks.
MATT: Like what?
Go on and show me.
ADDY: All right, I'll show you some stuff.
So another thing we've recently added
is a feature called the Cubic Bezier Editor.
So people are probably used to using something
like Lea Verou's cubic Bezier sites
for like playing around with different Bezier functions.
It's like helping visualize them.
So you go in and set like a preset you like using,
see what that effect looks like in real time.
MATT: With that particular curve.
Nice.
ADDY: Exactly, now, this is sort of third-party tool.
What will be even more useful is if you just got this natively
available directly inside your DevTools,
and that's something we've recently added.
So here, for example, I'm just going to go,
and I'm going to select one of these boxes.
And what you'll now see is we get
these nice little cubic Bezier curves.
If you click on them, you'll see we've
got a brand new cubic Bezier editor here.
You can preview in real time what each of the Bezier
functions look like.
You can select from a bunch of different settings
that are available.
You can play around with the cubic Bezier curve,
and then you can see what this looks like,
so it's applied right to the page in line.
MATT: As you'd expect from DevTools.
ADDY: As you'd expect from DevTools.
Now another thing that we've added
is a whole set of different presets.
So you can see we've got Ease-in Ease-out, In [? Sine ?],
In Quadratic-- all of these settings,
so you don't have to go and Google them,
find them out yourself.
MATT: It's kind of nice being able to see them already
in DevTools, because, I've got to say,
I think I normally just stick to ease-in, ease-out
because I don't know any of the names.
That's really nice.
ADDY: Maybe with this tool you'll
learn to learn some new stuff.
MATT: Yeah, I need to learn more things.
ADDY: So the next one we're going to take a look at
is the web animation playback feature.
So here we've got an animating 3D Nintendo
controller, NES controller.
MATT: Sweet.
ADDY: And the first thing I'm going
to do is inside of [? stalls, ?] you know,
where you can usually see all of the different like margin
and padding and stuff inside this box--
MATT: That's so nice.
ADDY: Well, you can now see all the different points,
which the 3D objects defined.
MATT: You get guidelines and everything.
ADDY: Exactly.
That's not what I want to show you.
What I want to show you is the new playback control
we've added.
MATT: I don't care what you want to show me.
That's it.
I'm done.
ADDY: So now you can pause your animation.
So here I'm pausing my CSS animation.
I can control the speed of playback.
So let's say you want to get your animation timing just
right.
This is really useful for that.
MATT: Nice.
So it feels like DevTools has basically done a load of work
on animations because the combination of those two things
is pretty badass.
ADDY: So there's a lot more coming down
the line on animations.
I'm not going to show you right now,
but it's some neat stuff that you might find useful.
MATT: Nice.
ADDY: So another new feature we've added
is the ability to export your logged console messages.
So we're inside the Google I/O app right now,
and it's logging some messages to the console,
but let's say that I wanted to share this with somebody else.
I can now right click directly inside the console.
I can hit Save As, and that's just going
to export all that information.
Locally, we can go.
We can check it out directly inside of Chrome,
and there we go.
We can see all the messages are there.
MATT: Nice.
Does that support console tables and groups and all that.
ADDY: I think it's for its tables just yet,
but that could be an interesting feature for the future.
MATT: Rubbish.
ADDY: And another thing I wanted to show you
was if you're in the Google I/O app,
there's a little console Easter egg
in there first for getting an ASCII left shark animating.
MATT: You can't go wrong with a left shark.
ADDY: Oh, no, you can spend hours
just like looking at this.
MATT: Yeah, we were worried about you the first time
you discovered this.
We nearly had the intervention.
ADDY: --several weeks ago.
MATT: Yeah.
You need to do more work is basically the premise of this.
ADDY: You mean some work, any work.
MATT: Yeah, if you could just turn up,
that would be a step in the right direction.