I'm Jason number five of seven here.
Which I think is cool.
So, time travel debugging.
Time travel debugging is a really old concept.
But it's also been a multi year project at Mozilla.
And most recently, a six-month sprint to this stage.
So, if you see something you like, please clap.
Let me know.
I want to hear it.
If you really like it, shout!
If you're moved by it just come on and clap I do real time claps.
I can keep going.
So, here is the debugger.
My name is Jason Laster.
And I have the privilege to work full time on this guy.
It's great.
Most recently we made this decision to rewrite it in actually React and Redux to rethink
things we are doing and do some really cool things that are great too.
Is there an echo?
Or is it just me?
Cool.
Okay.
One thing we did was we moved to GitHub and started doing local development as a website,
so we can start it up with Webpack and Yarn.
And then click that button, or other buttons or Chrome and Node, find a Firefox, and debug
it as a website.
Not as a browser.
And that's been amazing for working on it.
You're just like, refresh and you got everything new and you're debugging it.
And if you want to debug that, you've got a browser debugger.
No problem.
And what we're working on, maybe with Chrome, maybe on the side.
It's a website.
You can do whatever you want to do.
We focus on two things recently.
And we're going to carry this out for the next year or two.
One of them is frameworks.
Because we realize that so many people are building modern apps with frameworks and there's
so much we can do to make debugging better if we use them.
And Babel.
So, I've got stickers with me for the TC39 because we work closely with the JavaScript
team.
And stickers for Babel.
Because we work just as closely with them because we know that people who are writing
apps today are often using things like JSX and Flow and TypeScript and new language features
that can't be parsed by the Firefox parser.
They don't want to.
And we have worked with the team and added features that would not have been possible
otherwise like break points that stay in your function when you change your codes.
You don't have to move them.
Or when you step in the code you wrote, the original code, it just works.
Even though you're stepping over ten lines of generated code.
It's really, really amazing.
And I think in part because we are in React and web developers can work on it, and we're
in GitHub and we are on Twitter, we found this amazing community of people who want
to work on the tools that they use every day.
And if you are interested in hacking on developer tools, I want to say that I have never found
a team more open to open source than the Firefox Dev tools team.
Come join us and work on the debugger or the inspector or console.
We really want that.
In fact, we kind of need it.
10, 12 people, it's really, really small.
And almost everything you see is a product of the great work in the community.
And they have done search.
Amazing tests and flow types because those things help the community.
Our tooling comes from the community.
We wouldn't have it otherwise.
And I am so grateful for the team that has come and joined us and helped mentor.
Their charter is to help newcomers get started.
Answer their questions.
Like, why does that work that way?
How do I get Yarn working?
Or Node?
They're here to help people come in and they love it as much as we do.
Huge thanks to them.
Many of them are here now.
And you guys rock.
You all rock.
Yes.
So, debugging.
We're done, right?
Like, we've done it.
It's a solved problem.
Sure.
I kind of have this belief that in some ways it's gotten worse because our apps have gotten
so much better and maybe our tools haven't caught up.
And we're still kind of playing computer, and at the end of the day, maybe a good night's
sleep is all you need?
So, there's more to do.
Even a simple feature like a heart let's say you want to like, click the heart.
And you want to see it hearted.
Can we heart the heart?
Even that can be difficult today.
You click it, and nothing happens.
Why?
Well, a lot of things have to happen for the heart to be hearted.
Generally speaking, there's a whole path for updating the data.
You got get the UI data, talk to the API, get the data from the API.
Update the store.
Once the store is up to date, we can update the API, but it can break at any point along
the way.
You can add all the logs you want or understand any step.
And you have to understand the system and maybe it's going to take a while.
The thing I'm most excited, the one takeaway for this whole talk is with time travel, we
have a full recording of time, which means we can show you this thing.
This thing right here.
And if you want to, you can step to any point.
You can jump to any point in the path and see it immediately.
You don't have refresh or re click or pause or look at logs.
We can give it you.
It opens up all these opportunities that are now possible.
But time travel is not a new thing.
Others have done it.
I remember when Dan Abramov showcased Redux not too long ago I think at JSConfEU.
And something he said stuck with me.
He wanted time travel.
He wanted to reduce his action over time.
But he wanted time travel.
And a demo is just crazy.
You can get this slider that shows you all the actions over time and as you're moving,
you can see the UI update.
It's perfect.
It's magical.
It's what you want to develop.
But it only works if you're using Redux, and only shows the Redux actions.
It's not full-time travel.
There's another tool, Cyprus, which is an amazing integration test tool and makes it
easy, in fact, fun, to write integration tests.
And this reporter on the left that shows you things that change over time.
So, you can mouse over the reporter.
And for each action, see the UI update.
Which is brilliant.
You get a before and after.
But, again, it's only the UI.
And, yes, it's amazing.
They do amazing work.
You should try it.
So, how do we do a general-purpose thing?
The good thing is that we already have.
About ten years ago Mozilla invested in R and R, which is fast recording and replay
for C++.
And this thing, which is now used quite a lot gives use that ability to script through
time.
It's a fast.
Because if making the recording is slow, you're not going to use it.
If rewinding is slow, you may reach for it if you need to, but you might not.
And it goes down to the kernel.
It knows about the OS, P trace and S trace.
It has everything.
We're talking about the heap.
So, that makes it universal as well.
Once you have all that data, it can run for Firefox, it can run for Chrome.
It can even run for arbitrary C or C++ programs.
It just works.
And you can reproduce things.
It's really cool.
The problem is, what if your application has non determinism?
What if it's like the browser that every time you use it, it can be different?
Well, about five years ago this project for web replay came out which said, this RR thing
is great for the platform.
But can we give it to web developers?
Yeah.
Just love that animation.
It serves no purpose, but it's fun.
And amazingly, I have been using web replay and it's fast.
The recordings do not slow down the browser that much.
And we're still using the system recording to get all the data so it's as deep as you
want to go.
But because Firefox is complicated, the GC is complicated, networking is complicated
with APIs, layout, it's madness.
It's tied to Firefox.
It's not going to usually be portable to Chrome even though we would like to work with them.
So, with that comes the risky part.
Let me show what we've got.
So, at the moment, I've got a custom builder Firefox over here.
And I'm not going to update it.
Quite yet.
So, that's my tab.
I think that's going to work.
That's the color picker.
Cool.
Go over here.
And web developer, going to record execution.
I don't think it has to stay in the contacts menu, but for now, it is.
And once I do that, I've started a record process.
Everything that happens here every click.
This is a fun color picker I made.
Select colors, it keeps them.
Everything is now recorded.
What does that now mean?
Well, let's see here.
I've got some code for some demos.
I'm going to set a directory route, so it can focus in on the code we're working on.
Find the index.
And now I've got some code.
We have an outline viewer.
I told you Babel is amazing.
These things start happening when you introduce Babel.
Really cool features.
Set a break point, did some JSX.
And we paused.
That's great.
So, in some ways time travel, web replay, is the most simple feature that's going to
be shown because we've just added some buttons.
It's the same debugger that you know, but now we can step back to slightly step forward.
And, yeah.
We can rewind.
So, let's say there's some bug with the way the wheel was working and or we just don't
like blue.
We can just hit that rewind button and now we're going to get a new color.
And for fun we're going do, do, do [singing] I don't like that one.
I want this one.
Yeah.
No.
This one.
That's good.
I hope the color contrast is enough for you to see.
That's green.
That's changing.
And I'm going to set up conditional break point here to get the name of the color.
And I typed this right.
I want to pause at last time we were blue.
And I'll rewind and boom, boom, boom yes.
There we are.
That is now possible.
[ Applause ] The first time we went blue.
Let's go the other way too.
I like that just as much.
Sweet.
You know, small side track, just for a minute, I promise.
We have been working on this other thing for the past three months that I'm really excited
about and I'm just going to show that to you quickly too.
So, this code has this function, get HSL.
Yeah.
It takes a color.
Shows the HSL value.
I wrote this function in a utils file over here.
Let's find that, utils.
Yes.
Get HSL.
And I can go to the console.
I can type it.
And over here in the module I can see it.
Everything just works.
But that's not the native behavior.
It would be if we were using ES modules.
ES modules are amazing.
It just works.
But this was a React app built with Webpack.
And the default behavior for Webpack and frankly with a lot of Babel plugins is you get this.
Different blocks for different scopes.
What's that?
What's that?
What's this JS thing?
Oh, boy.
Where did this function go?
I don't know.
Yeah.
right here.
Okay.
Cool.
So, we don't want that.
We want this.
This is what you want.
Anyways, I just want to give a shoutout because we have worked with Logan Smith on the Babel
team for the past five months?
And he's done amazing work.
We're actually re parsing the files using source maps to map it up and magic.
That probably should never have worked.
But Logan is a genius.
And he knows the internals of the transforms and source maps.
So, kudos to him.
[ Applause ] Demo number two.
Oops.
No good talk can avoid to do and PC.
It's so good.
And frankly, I have to do open every single day because that's what I debug.
It's great.
It works.
So, clear that route.
We'll go in here.
Find some JavaScript.
Set a new route.
Voila, some JS.
And it's Backbone and I love it.
So, we just set up a breakpoint over here.
Boom.
How many people did Backbone development back in the day?
Yeah.
That was the that was great.
That was the shit.
That was I loved it.
That's where I got started.
Backbone was like a bring your own render function library.
Don't worry about it.
And I just took it for granted and it was great.
But think about this demo.
I saw this render function.
I was like, really?
What is it even doing?
I mean, really?
Come on?
And I started looking at it and it was like, huh.
I started looking at it more closely.
Maybe back here and check that out.
What is this like why are we toggle visible?
That's like custom code.
I want to look at that.
And step in.
Is hidden.
Hmm m okay.
We're going to like actually manipulate the check box right now.
Find.
And render.
I don't even care.
What's this doing?
What's this 2 JSON?
Okay.
We just serialized some data and then we went with a template.
The thing I love about this oops.
Did I get that?
Go back.
Oh, because it's on the same line.
Nice.
Maybe this?
No.
No well, I can always like step back and then jump in, right?
Yes!
Templates.
With data.
Amazing.
Debugging with time travel is about exploring the entire space.
But it's also about looking at one complicated function and not being afraid to step forward
because you can always go back.
So, I wanted to show that.
And oops.
Maybe I'll just close this recording and start a new one.
Yeah.
No.
That's lame.
I'm sorry.
Do, do, do oh.
Hey.
Yeah.
No.
I mean, yeah.
But, all right, fine, whatever.
Focus.
I'm going save this.
Berlin.
Close it.
Yeah.
You see what's coming, right?
Don't you want to check out these to dos we created?
Right?
Yeah.
[ Laughter ] We don't have the ability to set a breakpoint
yet in open DevTools, but that's coming.
And, yes, that's exciting.
That's my favorite demo.
[ Applause ]
All right.
So, there are four things I want to show you that are not really live demo able and we
got to move.
So, exceptions.
By the way, was it Sandra's talk this morning on exceptions?
Amazing.
God.
That was so cool.
Yes.
We all know them, we all love them, we all hate when we get them and don't know why,
and we're not sure what to do.
Well, time travel, right?
That thing oh, shoot.
That thing is interesting.
Maybe I'll look at the call stack.
No, that doesn't really help me.
I'm going to click that link at index and rewind to that spot where it happened.
ready?
Yes, yes.
Yes.
Yeah!
That's what you want.
You want to feel why it was called that or if it was called with the wrong names.
And now you can.
What about production, right?
Like, this is this is the money.
If we can help you debug your production app as getting hundreds of exceptions, oh, that
would be good.
And if you forget about the privacy thing, like if you're not working at Bank of America,
we might just be able to turn this on by default.
At which point that error now comes with a recording.
You can download that recording and there you are.
[ Applause ]
What about failing tests?
Who has intermittents?
I want to emphasize.
Raise your hand if you have gotten intermittent.
1% time.
That could never happen.
I wrote this perfectly.
No, there is conditions.
The killer feature in the short term is to be able to debug intermittents.
So, whenever there's something ha happens that surprises you, you have that same recording.
You can pull it down.
And maybe you have a happy case and a sad case, and you can just compare them.
Maybe ask the computer to do it.
All right.
Logs.
The thing that I hear, having worked on a debugger for more than two years, more than
anything, and it drives me nuts is an apology.
Everyone comes up and is like, yeah, debuggers are cool.
I should use it.
Good developers use it.
In fact, I talk to a lot of really senior engineers and they're not apologizing.
They're like, that's what I do.
And there's some truth to the fact that when you pause and when you're stepping it can
be a little slow and sometimes you want that full history and there should be a way to
kind of marry them.
And with time travel, by the way, this is a real bug that I had for three months.
When you hover on a variable you want to show the preview.
But it's hard to know if you're hovering on the variable and then the pop up or off.
So, I added tons of logs.
Three month bug.
Finally, I found it.
I was able to click on the console log message, go into the debugger and see what the fuck
was going on.
And time travel, it's like Alexa at some point.
Alexa, I want to go back in time.
That doesn't have it, I'm using knightly, whatever.
Just being able to reach for it and it makes it easier to be able to do what you want to
do.
That's number one.
Redux.
Rebuilt the debugger to use React and Redux, I wanted time travel.
You can kind of see that's something I'm into.
And on the right, you see that we're using the Redux Dev Tools and it's awesome.
Shows a list of all the actions for the debugger.
We get sources, we get pause action, we show the pause data.
All that stuff.
Here is Redux Dev Tools hooked up with time travel.
So, Dev Tools shows us the state of the app, the UI, at a certain point in time.
When I finally want to jump into the debugger and wait for it maybe find the pause thing.
There we have it.
Boom.
We have the two, one on top of the other.
And you don't just see the redux date, you see the code behind it that fired them.
And you can just jump wherever.
Nice.
This demo was find of fabricated because I didn't want to get the Redux Dev Tools thing
in.
But you get the point.
UI.
So, you don't just have to debug your JavaScript to use the recording, you can you're recording
everything at this point.
So, why not look at the DOM.
And how often have you run into this case where a website you are working on has some
loading interaction and maybe seen and drives you nuts because it flashes and you're not
sure why.
It's probably images coming down, visuals loading.
CSS.
You name it.
We have the net monitor.
We have the inspector.
And now with time travel, we have two ways to pause.
You can say pause at the time of this loading or pause at the time that the layout changed.
And that's amazing, right?
Because you can see the before and after and you can just see the comparison.
All the stuff.
Frameworks.
Yeah.
All right.
Two things here.
One, with React we pause in a render with React 16.
You don't know why you paused.
In fact, you don't know where you're paused.
You know you're in a component, but why?
What's the parent?
What's the whole component tree?
Well, we have been working on this framework feature, so we can show you the tree in your
call stack which is useful.
But unfortunately, because it's async, we can't actually let you go back to that render
and see it because it's already happened.
It's done.
And so, yeah.
Time travel.
Boom!
Boom!
It's now possible again.
It just works like you want it to.
And frameworks are going async and scheduling, it's now recoverable.
You have a set time out, you have some frames below it, can't see them.
Now you can.
Your pause and a render because of a redux action that fired.
We can figure out that the reason we're paused is Redux.
And we can put that in the call stack.
And, again, boom, you're in the action.
Or, sorry, you're in the reducer.
And if you want to, you can rewind to the action.
Voila.
[ Applause ] All right.
I don't have much time.
But I feel like that's just the beginning.
There's so much we can do at this point and we haven't even scratched the surface.
It's almost like we're used to debugging paper maps and we want Google Maps.
We can build in the whole path and visualize so you can jump around.
In fact, we can build a video player and you can scrub.
Yeah, I love that animation.
And before I finish, I just want to say that having joined Mozilla two years ago, I've
realized how special a place it is.
Netscape, open sourcing, Netscape in the browser in many ways created the world we live in
now with open source at scale.
Investing in the web.
Investing in Rust.
Because if you are going to build a fast browser, you need parallellization.
Investing in ten years from now, if you have parallellization, you need to debug it.
Has helped create the world we are now in.
This is an experiment, I can see us pulling it off.
We don't know if it's going to happen, but it could.
So, thank you.
[ Applause ]
For more infomation >> Lisbon Survival Guide - 7 somewhat helpful tips! - Duration: 6:24. 
For more infomation >> Déballage et guide d'installation - Lecteur Blu-ray 4K ultra HD Sony UBP-X700 - Duration: 1:14. 
For more infomation >> Loremaker's Guide to the Galaxy : Le système Tayac - VOSTFR - Duration: 16:33. 
For more infomation >> A Beginner's Guide to Kawagoe (Little Edo) - Duration: 2:34. 
For more infomation >> Antylamon raid (Detailed guide) - Digimon Masters Online - Duration: 5:48. 
For more infomation >> Bay Days in Bay Village: 2018 guide - Duration: 1:56. 
For more infomation >> City Of Pittsburgh Summer Guide For July - Duration: 4:08. 
For more infomation >> Guide d'utilisation - Écouteurs sport Sony SP-700N - Duration: 1:31. 
Không có nhận xét nào:
Đăng nhận xét