je peux y aller, mais je veux vraiment aller en arrière.
Si la voiture a crashé et tu es pausé avec la voiture à la pétale,
ce n'est pas vraiment le problème.
Le problème est que pourquoi nous avons vu la roue, ce n'est pas le passé.
Et le debugger n'a pas vu ça.
Bonjour, bienvenue à la podcast de DevTools FM.
C'est un podcast de développeurs et les gens qui font les choses.
Je suis Andrew et c'est ma co-host Jess.
Salut tout le monde, notre guest aujourd'hui est Jason Laster.
Jason est le co-founder et CEO de Replay,
qui est un tool de debug magique.
Jason, Would you like to give our listeners
a little background on yourself
before you dive into talking about Replay?
Bien sûr.
Je suis pensé sur DevTools pour les années 10.
Je faisais RecurSenter en 2012.
Je suis en train de faire des recours.
Je suis en train de faire des recours.









Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.


Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.

Je suis en train de faire des recours.
Je suis en train de faire des recours.


Je suis en train de faire des recours.

Je suis en train de faire des recours.
Je suis en train de faire des recours.




Je suis en train de faire des recours.
Je suis en train de faire des recours.

Je suis en train de faire des recours.





Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.






Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.
Je suis en train de faire des recours.

Je suis en train de faire les recours.


dalla Xian,
suis en train de faire des recours.
Je suis en train de faire des recours.
la base de l'idée est que, si on pouvait récourir le computer,
récourir votre exécution de software,
et puis on peut jouer le bâtiment, se relâcher,
on peut comprendre ce qui s'est passé.
La seule promesse, c'est que c'est vraiment, vraiment,
vraiment difficile de récourir le software.
Et plus de laissons et d'abstractions,
on ajoute le plus difficile que c'est à faire.
Et plus de compagnons, le plus difficile que c'est à faire.
Donc, le temps de la débugger,
au moins pour moi, le recours du centre,
était le land de l'académie,
des projets de démarche et des langues fonctionnelles,
c'est comme, ok, il y a quelque chose ici,
mais je ne sais pas si on pourrait faire ça dans le browser.
Maintenant, Mozilla,
parmi les net scapeurs, a une mentalité de hacker
où il y a un développeur contre le monde
qui est en train de comprendre le spiderman
dans le métier de la débuggerie ou le engine graphique.
Et c'est presque un grand task possible.
Donc, ils ont construit un temps de débugger.
Donc, il y a RR, en arrivant à Mozilla,
en 2010 et 2012.
Et c'est en production,
utilisé par l'industrie maintenant.
Et c'est suffisant pour regarder un programme single C++.
Mais, comment vous en prendrez RR
et ensuite aller au browser pour Mozilla ?
Mozilla pourrait essayer, arrêter, arrêter, arrêter.
Et, en fait, on va dire, ok, c'est trop difficile.
Il a vraiment pris quelqu'un comme mon co-founder Brian Hackett,
qui est juste un des gens de la monde
qui peut prendre le browser,
mettre le cerveau et comprendre.
Il y a assez de focus pour travailler pendant 5 ans
et éventuellement, cacher cette code.
Je ne veux pas déterminer le problème,
mais il y a quelques concepts qui ont vraiment
décliné l'obligation pour le répliquer ?
Oui, on est totalement en train de le faire.
Donc, il y a un peu de différents niveaux
pour penser.
À la hausse, tout le monde commence par dire
ok, je veux prendre le JavaScript.
Le JavaScript est vraiment flexible.
Je dois avoir des procs,
je peux monquipatcher une classe,
je vais prendre des clics,
je vais regarder les API calls,
ces trucs.
Ce n'est pas le moment de travailler.
On se tourne dans tous ces issues de timings
et le système est trop complexe.
Donc, après, on se démarre à un niveau,
et on dit, ok,
qu'est-ce que je suis le browser ?
Bien, le browser ouvre tous ces API
et je peux prendre les inputs et les outils,
tout de suite.
C'est comme le DOM,
document.whatever.
Cool.
Donc, on commence par faire ça et on se rend compte
que, oh mon Dieu,
le système est trop compliqué,
que l'une des choses soit changée,
et
ce n'est pas going to work.
Ensuite, on arrive à un niveau plus haut,
et on dit, ok,
qu'est-ce que je suis juste le JavaScript en train
et je peux regarder tout le execution
dans le train de l'en train ?
Le step de compilation,
on a le code de la biais,
chaque opération qui se passe.
Oui,
vous pouvez faire des trucs là-bas,
mais vous êtes juste une pièce.
Vous êtes comme le coeur
dans un système plus grand,
et il y a un bunch d'autres ordres
qui sont là-bas,
et vous devez savoir aussi
que les graphiques et les réseaux.
Donc, on va
au very bottom of the system.
On dit,
qu'est-ce que l'input et l'outil
pour le browser ?
Parce que le browser est une collection
de programmes C++,
qui fait des calls de système.
Ça fait que le maître,
le read, le write, le pipe,
ça se met en place.
Il y a un liste très défiant
et on capture les inputs pour ces.
Et ensuite, on regarde l'outil,
on s'en fout.
On capture des choses
comme les atomiques C++,
les mallocs,
et un couple d'autres directions,
comme les stuff IPC,
interprocesse communication.
Et ce set,
le système de calls,
atomiques, interprocesse communication,
est le set de non-déternisme,
qui est comme le set de randomité
qu'on a besoin,
pour ensuite placer en arrière
et réexprimer le même résultat.
Donc, vous devez aller très loin
pour trouver le lait
où il a fait le sens de réplique.
C'est vrai.
Vous commencez comme
« ce sera bien »
« Oh, Dieu, non. »
Qu'est-ce qu'il y a ici ?
« Oh, Dieu, non. »
Et ensuite, vous êtes au 7e lait
et vous êtes comme « OK. »
Un petit peu d'assemblage en ligne
peut vous faire une bonne manière.
Oui, moi-même,
je ne pense pas que je saurais où se placer.
Donc, oui,
ça fait un point très spécial
pour savoir où se placer.
Oui, et je ne suis pas ce type.
Je suis le type qui me dit
« Oh, je vais réécrire le debugger et réact. »
C'est le lien qui est installé dans les UF.
Brian, mon co-founder,
est en ligne de assemblage.
Et ensuite,
il y a un petit peu d'étonnement
sur les graphiques en parlant de la nettoyage.
C'est cool.
Je peux regarder et voir ce qui se passe.
Et ensuite,
faire un petit tour.
C'est génial.
Un autre moyen de penser
à un autre point de vue
est que beaucoup de codes ne doivent pas être récordés.
Vous avez une très simple fonction.
Vous vous donnez des ingrédients,
vous vous arrêtez de faire le même output
chaque fois.
Et c'est vraiment important
parce que un réplique typique
sera vraiment petit
parce qu'il n'y a pas
que beaucoup de randomité dans notre code.
Réacte ou ré-rendue
de la même manière chaque fois.
Nous devons seulement capturer
les places où il y a un timer
ou une autre cuma.
Une heure.
C'est vraiment cool.
Summons des
certificats готов fighters
pour peler d'orientation.
Quand nous savons à peu près
que le temps est dé szyfiant,
nous pouvons isoler ça.
Oui. C'est comme une những accumulation mathématique.
property. We don't have to understand the networking layer as long as we can ensure that the networking
layer is deterministic. And if there's any non-determinism we're not capturing, just insert
that one API call, we're like cool, wrap this atomic. Or oh shit, it's dropping down and making a
lebsi call we don't know about. Cool, we need to intercept that one too because we need like pipe
or mixtur. The crazy thing is we started with Firefox, but then we're like can we do Chrome
and Chrome uses the same system calls of Firefox does.
So that layer porting the recorder to Chrome wasn't so bad.
Oh, so replay can do Chrome now too?
Yeah.
Oh, nice.
Yeah.
It opens up a lot of possibilities around like programmatic recordings too, so you're recording
CI, writing arbitrary scripts and recording those as well. We can record node,
node in some ways like a subset of Chrome as well, just V8 with a little bit of a wrapper
around it.
Oh wow, so replay is becoming less a time travel debugger for the browser and more just a time
travel debugger at this point.
We think recording is just a primitive for any kind of runtime.
I would love to capture Ruby, I would love to capture Python.
If you go to Python, you're beginning to top of the scientific community and that's fascinating.
Yeah, honestly mind blowing, I think me and Justin are reeling.
Trying to think of the implications here.
What, okay, so from a product perspective, you're building a developer tool here and it makes
sense to focus on browsers first and hit this like big target audience, but the experience of
debugging something like node or potentially Ruby in the future and potentially Python in the
future are slightly different, less maybe visual.
Does that change how you think about approaching the product or is it just,
is it mostly just the same?
That's a great question.
So I think the visual piece is really interesting and maybe we should back up and talk about what
it's like to use replay to debug a React app and then we can transfer that to debugging like a
Python script or a Node script or something else.
So I worked on the debugger long enough on Firefox to know that people don't use it.
You would go to people and you're asked them like, hey, do you use breakpoints
or do you use print statements?
Do you use the debugger or do you use the console?
And everyone, regardless of experience, would be like, I kind of use print statements,
I feel bad about it.
Like the most experienced engineers would be like, I just, that's what I do
and I'm too old to change.
And then juniors are like, I know I should because the really good developers I respect
must use a debugger.
I just haven't taken the time to understand it.
So we started off with replay thinking, if we just came to people and we're like,
hey, you're doing it wrong and B, we've got something better and more powerful,
like it wouldn't work for all the human psychology reasons.
And then also, there are some fundamental limitations with breakpoints.
So what are they?
The first one is you pause and you're looking at one point in time.
Okay.
Well, I kind of need a chronology.
And then the second is cool, I can go forward, but I really want to go backwards.
If the car crashed and you're paused like with like the car at the tree,
that's not really the problem.
The problem is like, why did we veer off the road, which is in the past?
And the debugger doesn't have to do that.
So what we wanted to do with replay was build a debugger
that's really providing better print statements.
And the problem with print statements is, well, first, you have to have the code.
Then you have to edit the code.
So you have to know where to go.
And then you have to rebuild the code, refresh, like, re-run, reproduce the problem.
And then you have to look at the logs.
And we've all had this experience of like, you have two few logs,
you're like, I'm missing it.
And then you add more and you're like, God, what am I doing?
I'm scrolling through this thing.
Need all the haste, that kind of problem.
And every time you run it, you could get different results.
So you're thinking, am I really doing science?
Or is it definitely bad science?
Because the thing is changing out from under me.
Maybe it's not the same every time.
So with replay, we think of it a little bit like record the thing once.
And maybe you don't even record it.
Maybe somebody else on your team saw something,
they send it to you and they're like, hey, can you take a look at this?
Or somebody writes up a bug report and you're like,
can you send me a replay so I can see what you saw?
So you get this replay.
And then you go to the line of code that you think is interesting.
And then you add a print statement and you immediately see the logs.
You don't have to refresh and re-run.
You just see them.
And then you have the logs on the console and you're wondering, hey,
which one is interesting?
And instead of having to guess and play computer,
you can just click on the log.
And because we have the video,
you get to see what the app looked like exactly that point in time.
So that video is really good for confirming or checking the processes.
Yeah, it's so magic.
Yeah.
I guess given how you explained how it works now,
I think before you said that, I would have thought,
oh, it's somehow editing code to putting console log statements.
But I have a feeling now that it's actually just doing some assembly something.
Like since you don't actually know what the code is doing,
you're doing something that's way removed from the code.
Yeah.
Yeah, let's talk about that.
So we've got this React app.
We've recorded it.
We can watch the video.
Maybe the video is like 30 seconds.
I can click anywhere in the timeline and be at that point in time.
But don't think of it as like, I'm at like second 10.
We measure time with 32 zeros of precision
because computers operate like billions of operations a second.
And this thing is, this thing's flying.
So if you add a print statement on line 52,
you can see all the times it was hit,
like all the logs and console, you click one,
you're paused at that point in time.
Now you said, I want to go back from line 52 to 51.
When you don't have complicated operations
to like un wine JavaScript,
we just play the program back to that point in time.
It's literally like, there's a browser in the cloud
and we say, hey, run and play to this point and then stop.
That's what we know how to do.
We know how to do that really, really well.
And what's good about that is it's just like,
you did the same thing, like you edit your code,
you open the debugger, you add a break point,
you ran and you paused and you're paused there.
And because we actually have a browser that's paused there,
you can evaluate, you can look at the call staff,
you can see what the variables are, everything is available.
So break points, it's literally the debugger
going in and like, how many times was that hit?
Cool.
Print statements, it's literally us bringing a browser
each one of those hits
and evaluating that log at that point in time.
Like there's no shortcuts, we just do it.
That's pretty magical.
And it's often the thing that happens in debugging,
right?
It's like you hit a break point and exactly what you said earlier,
it's like, I don't actually want to know what happened right now.
I want to know what happened earlier.
So it's often what you do is like, okay,
now I'm going to set this other break point
and I'm going to rerun and I'll check at this point
and then I'll check at this point
and then I'll just like kind of keep rerunning my browser.
I'll run over it.
Kind of isolate it down a little bit.
So it's pretty magic that you can have like this.
Even you saying that's stressing me out, like, oh god,
I remember, I know what it's like to be in a debugger.
And you're like, okay, this is the fourth run in the loop, I think.
So I'm like pause, confirm, like that's not it.
Resume, pause, is that right?
No, next.
Next.
Oh shit, I missed it.
Okay, you gotta try again.
If you already support Chrome,
I'd assume it wouldn't be too much of a stretch
to support Electron.
Yeah.
A lot of people are building apps
in Electron these days
and it seems like that would be an interesting
base to benefit from this.
Electron would be fascinating.
So Electron is a front end and a back end at the same time.
You've got a browser and node together.
And what I think is really interesting
about Electron is it's a way to prototype,
recording two processes,
like the front end and the back end at the same time.
And if you imagine like visualizing it to you,
if the browser makes a request to the back end,
you want to log that, jump to the back end,
see how the back end handles that request,
look at that, and then come back.
And so if you think about replay in the future,
it's really about recording all the services.
You got your front end and then all the microservices
on the back end and then stitching that together
and understanding it.
That'd be super powerful.
Yeah.
So yeah, that's like the ultimate end state of replay
is being able to debug a whole stack for you.
No, that's not the end state.
So the nice thing about the microservice architecture
is that a lot of these services are using different frameworks.
So if you have a search engine,
like Alglouia, that's a service,
translation over there, commerce over there with Stripe,
if we can begin to understand these services,
sort of the semantics on top of it.
For instance, on the front end,
we can already do React DevTools.
We understand React semantics.
But over time,
we could do the same thing for all libraries, all services.
Then we have a much richer data set.
So it's not just I want to add a print statement.
It's I want to look at the Alglouia searches
and then what it's doing with the database,
how it's indexing.
And then it's a question of,
so what is our corpus of replays like for Alglouia?
Across your use case, but then all the others.
If we can compile a dataset of a million replays of Alglouia
or a million replays of Stripe,
or a million of Stripe and Alglouia working together
in that communication,
then we have something really fascinating.
Yeah, it's really interesting.
Leveraging the ecosystem networking effects there
reminds me a lot.
And I think we talked about this the last time we talked
about dependency management tools like Renovate.
Also have this thing where they can check
how many, when a version of a library is released,
how many consumers that use Renovate to update their things,
how many of their CIs fell.
And then they can give a confident score
over the whole ecosystem.
Oh, well, maybe this is a bad release
because 70% of all the CIs and the ecosystem fails.
It sounds like that sort of similar thing
a debugging level could be something that replay taps into.
I think you're absolutely right.
I think you fast forward and the no code movement
is bringing us this place
where we're really thinking about these services working together
as the communication between them.
Like you already have this with libraries
where you're writing less and less of the total stack.
And it's all about how well you're using them.
And then what it's like to be a maintainer
thinking about that change.
And am I confident this is going to work?
If I had access to the million replays,
I can check to see if does this function
ever receive parameters that I don't expect.
And if it does,
okay, then I want to try those too
before I'm sure this is going to work.
Yeah, hadn't thought about it from that perspective
but as a library author, that could be really powerful.
Especially for say someone doing something as complex
as the React team,
that code base is certainly non trivial.
Figuring out when they can safely make changes
on particular parts would be challenging.
I know they do a lot of internal testing at Facebook
but a tool like replay,
especially with a large sort of corpus of data
could be interesting.
So we do print statements right now
but that's the simplest thing for users.
Because we're replaying the runtime,
we have all the memory.
We could look at the heap.
We can look at the performance profile
of how React is working.
And let's say you want to understand
where React is slow and you're the React team.
You can now do analysis on this corpus
and see, wow, when we're slow,
this is the memory for print.
And then you go one step lower
and let's say you're the VA team.
And you want to see how to make VA faster
for when React is slow.
Now you can see, wow,
the way we're doing garbage collection
in this case with these proxies
because of these React apps
and the code that they're writing.
We've got to improve that too.
And you could do that all in an automated fashion.
In the same way that you query a database,
you could just query our recordings
just as a set of data.
Do dynamic analysis, do static analysis against it.
Imagine, the tricky part there would be...
Well, generally, depending on what data you expose
is just like privacy concerns,
just making sure that you're not exposing
the value of an API parameter
or something, an API key that's going to go.
We have the potential
because we capture everything in the environment,
all the session data.
It's really, really important
to be paranoid about privacy.
But I think we could flip it.
So let's say we know that this field is private.
Okay, there's an access token here
or your password field here.
That's really important to be private.
But how is it being used?
So there's this dynamic analysis technique
called data taining
where you say,
this value is bad.
Now, who used that value?
Did that get concatenated into a larger string?
Okay, now that string is bad.
Where did that string get used?
Oh, got used in this function.
Did that variable ever leave the system
like they're an API call?
That'd be really bad.
So right now, a lot of the privacy approaches
or security approaches are static analysis.
But our languages are really flexible
and static analysis only gets you so far.
We can flip it and say,
hey, we can give you the tools
to understand if you're really respecting user privacy
or if you're really thinking through security.
And by the way, that same tool is useful
if you're trying to figure out
why did I have a null value here?
Well, that null value came from this operation
which came from that operation
and it's the same fact tracing through the system.
Does that make sense?
Oh, yeah, it definitely does.
With CI's, most CI's,
you can't print secret values,
but you can print them if you base 64 and code them
and then you're still printing it
because you only had to hop through one hoop.
Yeah, so that should be tainted as well.
And that would never leave the system, for sure.
Going back to this idea of a corpus of recordings,
just to get to that end state goal.
So in the future, we've got recordings
for all the services.
Great, I can debug the system as a whole.
I don't have to pause here, pause there,
log here, log there.
We've got a corpus of recordings
which is really good for that kind of service.
So I can understand that service in aggregate.
But the really, really interesting end state
is to hand that data to computers.
So the way self-driving got good,
the way the GPT and OpenAI got good,
was you build a GAN
where the computer can play the game
again and again and again
and try different strategies.
So the origin story for OpenAI
is they got their hands on
a million recordings of Dota 2.
And the reason Dota 2 put a recorder in the game
is if you lost the game,
you would go back and play again against AI.
You were like, oh, what if I try this different strategy?
Cool, that would be better, that would be worse.
When OpenAI got that data,
they were always just like, I'm going to train on that.
And I'm going to play that game long enough
until I realize this would be the best strategy.
We have the ability to hand replays to computers
and have them do the debugging for us in the future.
Because we can replay,
you can play it at a point in time and then try shit.
That's where things get really, really powerful.
That's when it transcends from the true magic.
Yeah, that's literally true magic.
You don't have to debug your programs anymore,
it just tells you, oh, you should probably
look at that line, that'd be crazy.
Step one, the computer says, hey, I noticed some anomalies.
So you run your test, the test passes.
But your test only has certain asserts.
Like maybe you're not checking to see
if that button is a different color
or if that API calls me.
Even if that API call would be terrible.
But you don't assert that because you didn't think of it.
The computer can say, hey, I noticed that there was this anomaly here
and all of a sudden, this seems weird,
you might want to look at this.
So it tells you something's different.
Step two, it says, hey,
I think this anomaly is happening
because of this new line of code.
You change the sign of code over here
and this react component,
all of a sudden this API call is made
to like delete user, not good.
Step three, if you adjust that code,
like you add an if statement
or you adjust the condition of the if statement,
that no longer happens.
If we can get to that point,
then software as I quote unquote self fueling,
where we are building the system,
maybe with the assistance of computers.
But the maintenance of the system
is also coming from computers as well.
Yeah, that's a super interesting idea.
It's really coming at the problem
from a completely different direction
than I've seen before.
Like the big news this week,
Justin's going to cover it later in the show,
is GitHub co-pilot, which is the saying,
but for writing code instead of debugging code,
if you're using both of those tools
at the same time,
you're just playing with the computer
to output a program.
That's crazy.
Yeah, I see co-pilot and I think
that's what we can do now
because we've spent so much time
thinking about the static mouse piece.
When we can do the same thing
on the debugging side with Vify,
we're just a couple years from now.
Yeah.
Yeah, so that definitely answers
one of my questions I was going to ask
of where does monetization come from
in replay?
Because what you guys currently have out
is like, probably you could monetize it,
but I think where their conversation just led
is definitely more the monetization route
you'll go.
All right, I'll spell it out.
So, step one,
you build something for teams.
Because as a developer,
I might not be looking for
a better debugger right now
because I use print statements,
but what I would love
is to get a replay,
so I don't have to reproduce some things.
So, we solved the whole
like reproduce problem,
the whole works for me thing.
And that by itself
as a collaboration tool,
it was like Figma.
Figma's brilliance was like,
you don't have to be a designer
to be part of the designing process.
And we're saying like,
you don't have to be a developer
to help out with the debugging process.
Everyone has context,
everyone wants to be a part of it.
In fact, you can even fix more
like low grade issues,
like loading and scrolling
because it's easy to capture,
easy to discuss,
and you're like, oh,
there's a style sheet issue,
cool, we could fix that.
So, that by itself,
Figma's a $10 billion business,
great.
We could do collaboration
on the debugging side,
that is valuable.
At the same time,
we can also
use replay in the open source context.
So, every bug report
to an open source project
gets a replay.
You do that,
and the life of being an open source maintainer
is just so much easier.
Everyone on the team
has been an open source maintainer.
We know what's likely to get a bug report
from someone you don't know
with a project that you don't have access to,
and you're expected to help them.
If we could use replay to help there,
and also help in Discord,
Twitter, Slack, Stack Overflow, Dev.2,
so anytime anybody has a question,
they could ask it with replay
and anybody in the community could help them.
That would go a really long way too.
Imagine being a student
writing your first React app
or Hello World, something.
You're not sure,
but you could share with another person
in the class
and they could look at the replay
and help you.
That would be huge.
That's not a classical monetization strategy,
but it's just our way of saying
let's get replay into the world
and reach as many people as possible.
So, collaboration is like stage one.
Stage two,
we're doing things in CI.
We can record our tests,
end-to-end tests like playwright tests
and Cypress tests could be recorded.
You could begin doing things there
that are really interesting,
same with Node on the back end.
So, more recordings coming in,
more analysis coming in.
That gets you into prod a bit,
so you're a little bit like
Datadog and Honeycomb as well.
Nobody wants issues in prod to take a while
and replay can help their team.
If Datadog points out that,
oh shit, like search is breaking
or how to come a point that search is breaking,
you could find a replay for that search service.
Click in and be in the replay and debug it.
Don't use Datadog and logs
to figure out what's going on.
Just use them to detect the problem
and then jump into the replay and debug it from there.
That's fun because the APM space
is bigger and prod is bigger,
but then that last step is
do what Tesla and Google have done
and now get out with Co-Pilot
and take that data
and do real analysis and real search
and real AI
to automate a way debugging entirely.
You can't start there,
you need the dataset
and you really need the people
telling you, okay,
so this is what the bugs we care about are
and this is the fix,
but eventually you're getting to that end state
and if you do that,
that's huge.
I mean, even, I don't know,
when I first saw the demo
and if anybody hasn't seen a demo,
you should go to replay.io
and check out the demo,
but I can't tell you how many times
in the past where it's like,
oh, we come across a bug.
It's like, oh, wait,
I think this is similar to a bug
that we've already fixed
in this other ticket
and you go back and another ticket
and it's not really well documented.
He's like, okay,
what even pull request is this associated with?
What was happening?
But the value of being on a heavily replayed,
so I have a link,
I can see the conversation that happened,
I can see what was actually going on,
I can see the recording,
all of that together.
Is incredibly valuable.
Just that,
if you never get past that phase
and you're just doing the collaboration on debugging,
that is an incredibly,
incredibly valuable tool
because it's like,
I've said this before,
but I don't think people appreciate
how much of a developer's time
is spent debugging.
Like, a lot,
a lot of time.
Yeah, you add up debugging
and communicating
and you add a really big slice.
So if I go to you, I'm like,
hey, how does the app bootstrap?
You'd be like,
what part are you thinking about?
And if I handed you that replay,
I'm like, hey,
is this function being used
while bootstrapping
or how is it being used?
You can go and you can answer that.
And then fast forward three months
where that code is completely different,
you're like,
is that the same problem?
Just go back and look at that replay
from three months ago.
You're like, oh yeah,
that is doing the same thing
or it's doing something different.
Yeah, that's fascinating.
This is magical, it's magical.
Yeah.
So out of curiosity,
how's your reception been so far?
What have people been saying
about replay?
Was there anything surprising
that has come out of it?
Pash.
I think what's so fun for me
is we have been working on replay
at Mozilla for three, five years
in private.
We didn't know if we'd ever be successful
and talking about it
made everyone else nervous.
Are you promising things that we can't do?
And over the past year,
working on replay in public
and having conversations like this
is just magical.
Because everyone comes in,
they're like,
how does this work?
Like, really, how does this work?
What can I do with this?
Can I inspect an element
at a certain point in time?
I really want to see
at like minute 30,
how does this look?
But yeah,
but how does that note picker work?
Having those conversations
has been the most special thing
for me to share it.
And I think the funniest thing
is you talk to somebody
who's not in tech
and they're like, oh,
you're recording.
That's like a video, fine.
But then you talk to somebody
who works on V8
or is like a tech lead
for Chromium
or is building replete
or Code Sandbox
or Cypress
who's like really in the internals
and seeing them freak out.
We're like, what have you done?
And can we use replay
inside of replete
and inside of Century
or inside of Cypress
or inside of any number of tools?
That to me
is
is the most surprising
and exciting.
You can throw where you are,
where you're at in print state
and missing or viewing the code
and forget about that.
That's all open source.
And think about
how would VS Code
use replay?
We have those APIs
Howard Century
or Cypress use replay.
We were talking to
two folks on the Lighthouse team
yesterday
about how you could use Lighthouse
to see an audit.
And the biggest problem
with auditing your app
is the audit
that's ran yesterday
is going to be different
than the audit that's ran today.
Even if you run
then at like one
right after the other,
it's going to be different
because your system is
a little bit different.
Why?
So hooking in replay
and thinking about how
replay can help
in that context.
That is so surprising
and that's so interesting.
I mean
on a personal level
we didn't know
if developers would like it.
We also didn't know
if product managers
would want to use it too
because if you're a PM
you can take a screenshot
and be like,
yo, this is bad.
And we're asking
we're going to do something
a little bit different.
And if you're a developer
we're asking you
to use a completely new tool
and a new workflow.
So seeing that reception
and seeing teams adopt replay
and like when one team
at a company adopter replay
other teams are like
what's this replay
you just shared with me?
That's really interesting
can reuse that.
So that's been really exciting.
It's like the next level
of sharing.
Like you start out
with a screenshot
and you're like,
I need more than that.
They're like, oh, well,
here's a video of it
and it's like, well, I need more than that.
And here's everything
you could possibly want.
That's exactly right.
It's an incredibly exciting tool.
I mean,
there are a few broad category tools
that I think are incredibly important
for an organization to have.
A good issue tracker is important.
It's important to know
what you need to work on
and to track the things that you need.
And it's a communication tool.
Super important.
And this is a whole sort of new category
because there's a lot of things
that people use.
Like, oh, they'll send you a loom
of this bug
or you get a screenshot
or they try to describe it in a select.
But it misses all the context.
And then,
so that's the sort of as we're working on it.
And then you have all the like,
that all those artifacts get lost
over time as you're moving on
because they're different
than like where you're tracking
your issues and everything.
But if I can think of a world
where I can use linear
and I can have replay hooked
in the linear,
I'm like, I'm set.
This is the only two things I want in my life.
I wonder if you could make a loom
to Descript analogy
with like print statements
and replay
because you send somebody a loom
and it's going to have
just the video and just the audio.
But if you record with Descript,
you could drop all the ums.
You have all the context.
You could literally see the transcript.
You're like, oh, that's bad.
That's bad.
Edit that. Tweak that.
Because it's got more in there.
And I think that's what we're doing here.
We're like, you want the video?
You want the DOM?
You want the JavaScript?
You want to see the network and data?
Because those requests
are going to tell you a lot too.
And then how do we present that to the user
so they can make the most sense
of what's going on?
Tell that story.
Okay, this is what the app was really doing.

So you've mentioned Mozilla a bunch.
How did replay spin out of that?
The code started there.
He said it was developed there for years.
Was it open source code
that you then just repurposed into
replay the company?
Or how did that work?
Yeah.
So Mozilla is a special place.
And what I'll say about Mozilla
is before COVID,
it was the largest remote culture,
so very async.
It was, probably still is,
one of the largest open source organizations.
Almost everyone at Mozilla
is working in the open.
And there's this hacker mentality
where you're encouraged to do big things
and take risks.
And you can look at Rust, WebAssembly.
There are so many projects.
They were killed many times
before they became real
and went into the world.
And replay was like that.
So you look at the DevTools team,
we had been trying to do replay,
web replay, for a long, long time.
In fact, our VP of product
had my job five years before I was doing it
and he had tried to do
web replay as well.
So there was this culture
of let's take big bets,
let's try things,
even if they're crazy
and see what we can do.
The problem with replay
is in the early days,
it was really, really invasive.
It was in every part of the system.
So like networking,
JavaScript, graphics,
every component owner
was like, what the hell is this thing?
Because we landed it.
It was in the code for two years.
So you use Firefox,
Fox, Nite, Lee,
click, record, and do stuff.
And every time we got closer,
it was like a kid playing the guitar.
Great, you want your kid
to play the guitar.
And then talking about joining a band.
No, stay in school.
That was the kind of relationship.
It's like, okay,
we have something,
we're ready to go public.
Oh, god, don't leave school.
Don't join a band.
This is scary.
This is scary for everyone involved.
So that was the relationship.
We were really appreciative
that we could work on these things.
We were looking up the ladder
and we were like, wow,
David totally gets what we're doing.
Of course, he gets it.
He had my job.
But how do we bring that to the world?
And what's so funny
about starting a company in 2020?
And this is true now.
You look around,
and there's so many debt rules companies.
You can start and raise money
on breakpoints.
I don't think that's ever been true before,
and I have been told my entire career,
you cannot build a business on breakpoints.
And now you can.
And that's huge.
That's funny.
Yeah, it's been a huge year
for funding of developer tools.
On our last episode,
we had the founders of FIGON.
And I bet 10 years ago,
if you said a company would get funding
for creating terminal autocomplete,
like nobody would have believed you.
Like autocomplete as a service.
Probably it could be spun out
or you could build some really interesting things there.
And you see what Vercel has done,
and that's huge.
And I look at FIGON,
but I'm like, yes, the design tool
was also just a rendering engine,
a really really good one.
That's huge.
And Cypress has raised $50 million,
and they're going to do fascinating things with that.
And you just go through that list.
Which is actually
probably a really good segue for replay.
We started last summer.
We built a team of eight.
So we brought six people on.
Really like the six best people
we could possibly have found.
So the tech lead for the JIT on SpiderMonkey.
An expert at understanding
a critical piece of the runtime
and working with Brian, my co-founder,
who does the craziest things in the runtime.
We brought on one of the former tech leads of Babbel.
I mean, you could replay
the browser,
but if you can't debug,
minify a code,
and then compile a code
that comes with it,
like, you don't have something.
You need source maps,
and Logan's incredible.
I can go down the list.
Just this incredible team.
And we needed,
we have the most incredible designer
with 20 years of experience,
and 10 years ago,
he was like, oh shit, Brett Victor.
This inventing on principle thing
is fundamental.
We need to do something here.
So create a programmer designer,
just really really talented.
And we needed everyone
to get to the point
where replay would just work.
And it was designed in a way
that would resonate
with product managers
and engineers alike.
We saw we had a technology
that was promising.
Like, the thing wouldn't crash
and people liked it.
And it didn't matter
if you were at Facebook,
where nobody understands
what Facebook.com is doing.
There were literally 300,000 functions
in the page.
And over 200,000 of them
are anonymous.
So that's not good.
Or if you're just getting started
programming, you're like,
what is this thing?
So we were talking to everyone.
It was clicking both extremes.
And at that point,
we decided, hey,
can we build a company around this?
So we have this core team.
Now, what would it take
to build a company around this
and really bring it to the world?
And we're at the point now
where for me,
the most important thing
and the thing I'm most excited about
is recruiting.
We got to bring on
our first product manager,
the first engineering manager,
the first DevRel.
Because think about replay
in the context of debugging today.
There's such a great story to tell
about how the workflow is going to change
and how we bring people
into that new world.
It's just everything.
So DevRel is going to be huge.
And it doesn't matter
if you are really interested
in the systems programming
or runtime,
platform engineering,
and you're just getting started.
We want to talk to you too
because this is the ideal environment
to work on a runtime
where you don't have the pressure
of shipping an upgrade to Node,
which any regression
would be bad.
We're building a debugging tool
and we're having fun
and you can hack on the entire runtime
and understand it
and make debugging easier
all the way down
for DevTools,
product, collaboration,
accounts, library,
you name it.
So we're building out
this really, really supportive team
to get us to that next stage.
Vous avez entendu, les gens,
vous êtes en train de voir
quelque chose d'intéressant.
C'est génial.
Je dois dire,
je suis super excité
à ce produit général
de replay.
C'est assez magique.
C'est assez magique.
Je pense que j'ai fait un bon spot.
Donc je suis en train de vous déranger.
Je veux utiliser ça.
Prends mon argent.
Oui, ça va râper
pour tous nos points de parler.
Maintenant on va aux conseils de la tool.
Donc,
mon premier conseil de la semaine
est quelque chose
pour managé
tous les autres outils
que j'ai downloadés
pendant nos sessions de tooltips.
Un problème que vous avez
quand vous ajoutez un bunch de apps
à votre computer
est que votre bar de menu
s'est plagé
et vous ne pouvez même pas
dire ce que vous avez à cliquer
encore.
Cette app
fixe ce problème.
Ça met tous vos apps de toolbar
dans une menu de overflow
et vous pouvez contrôler
les autres
au-delà de cette menu de overflow.
Donc ça a aidé
à remettre mon bar de toolbar
immédiatement
et j'ai juste
ce que ça donne à la top.
Donc c'est super beau.
Cette app,
c'est bar de bar.
Oh oui,
ce que nous parlons de l'app
est bar de bar de Mac.
Pouvez contrôler votre bar de menu.
C'est une bonne ligne de tag.
Ils ont fait bien.
Ouais,
le plus de marketing.
J'ai utilisé l'envers de l'open source
ou je l'ai utilisé
avant de me lever mon Mac.
Oh merde.
Je suis inemployé,
je n'ai pas un Mac.
Donc...
Windows Man
là-bas.
Oh non.

Le replay ne va pas vous faire le travail.
Je sais.
Je vais le mettre à Mac,
c'est bien.
Je vais le mettre à Mac.
Hey, on est plus en train de le faire.
Donc,
ma part de la semaine est
si vous êtes
tout connecté
à la tech world.
Vous avez entendu ça déjà.
Nous avons parlé de ça précédemment.
Donc GitHub a juste réglé
ce service
pour l'open AI
appelé Copilot.
Copilot est
un automobiliste intelligent.
Je pense que
toutes les autres entreprises
sont venus avec des choses similaires.
Il y a un moment
avant
peut-être quelques années
qu'on a réellement
créé un hack de news
que je me souviens
que ça a été un peu
de préoccupations privées.
Et je n'ai pas oublié
ce que l'entreprise a appelé.
Mais ce n'est pas un
space unique,
mais
que la GitHub
fait ça,
c'est une grande chose.
Et on l'a entendu
et on a vu
beaucoup d'exemples
où
Copilot est autocomplé
est vraiment bien,
comme scèrement bien.
Et ça fait le sens
si vous avez un whole corpus
d'open source
pour vous faire de l'envers.
Donc...
Ouais,
si vous êtes intéressés
en avoir
autocomplé
par AI,
check out Copilot.
Ouais,
ici,
la date est king
et la GitHub est probablement
le meilleur endroit
sur l'internet
pour accéder à cette date.
Je pense que c'est vraiment
fascinant.
You can do
with having all of this
data
just about code bases
in general.
So we mentioned
Renovate earlier
because it's like
leverage in all these places
being able to
determine when
things are released,
if they're breaking or not.
I also think about
like code search tools
there's a lot of really
interesting insights
that they can pull out
of code bases.
Anyway,
it's a fascinating topic.
And the team did
such a great job
on the interface as well.
Like it fits right into
VS code
and feels so natural.
Yeah, it's great.
I'd like to promote
the Tovala Oven
which
is a small,
smart Oven,
it's electric
and the world's going
electric,
so that's great.
My wife and I
got it
at the beginning of COVID
when they were running
a hundred dollar discount.
I think they're still
doing that.
So you can get this Oven
for like
a hundred and sixty dollars
which like
is a lot of money
but for an Oven
okay,
seems fairly reasonable.
And what they're doing
is they're giving you
four different types of heat.
So you can like
broil, bake,
steam is key
and then something
that's what I call toast.
And because
everything is electric
and it's wifi
and smart,
you can plug in a recipe
and it's
oh,
I'll make your pizza
in 13 minutes
I'm gonna start with some steam,
go to bake
and finish with broil
and it's gonna be perfect
every time.
And
the best thing about it
is they send you
the recipes.
So if you're like me
and you've got five minutes
and you don't want to eat
this like junk food,
use a ticket out of the box,
put it in the oven
and it cooks a really good
meal and you're like
all right, cool.
I've got mac and cheese
and some chicken
and some cornbread
and maybe salmon
and it's gotta be tasty.
That's actually super interesting.
I follow this one youtube channel
that is all about
just like talking about appliances.
They recently taught me
how to use my dishwasher
more effectively.
And it's interesting.
Yeah, there's a pre wash bin
that you have to put detergent in
to make it pre wash.
Who would a guess?
But yeah, this is interesting.
Like the microwave space
hasn't been innovated on
in a very long time.
Like they used to come with
lots of presets
that would do similar things
of making steam happen
in a certain part
to get like the perfect cook.
But yeah,
I don't think that's been
innovated on lately.
Yeah, I think
the tovala got me off of sous vide.
I was trying to come up
with a perfect whatever.
And now with steam
it's like, okay,
this is gonna be precise.
It's gonna be efficient
and efficiency is good
if you care about climate
and reducing your footprint.
And it's easy.
So you don't think about it.
That's awesome.
I might actually look
at picking one of these up.
Sounds awesome.
Okay.
My last tool tip of the week
is something that everybody
has liked already
is called Docker.
I've been doing a lot of home
automation stuff
and all my devices
broke two weeks ago.
Don't ask me how it's a very
trying time for me.
But in spinning everything
back up,
I decided to learn Docker
and actually spin up
everything in Docker containers.
And it has been
like night and day
difference of setup.
All these services
that I previously had to install
10 things
and run 10 different commands
and just pull my hair out
over why they're not working
is just super simple
to spin them up
in a Docker container.
And at first it seems
like all the options
that are there
kind of confusing
but once you get a hang of them
it's super powerful.
Like I understand why
it took the industry by hold now.
What kind of services
what kind of services are you running?
Oh, I actually have
around 10 running right now.
They're all for legal media,
I swear.
I have a downloader,
a thing that helps me
track TV shows,
a thing that helps me track movies.
My whole home automation network
is based off of HomeKit
but not all my devices support HomeKit.
So there's an open source project
called HomeBridge
where it has a bunch of plugins
that make basically
anything work with that.
And then once you get down that path
it's like, well, I want to make
my automation system perfect.
So like I even spun up
Justin will recognize this tool.
N8N,
I spun up a container for that
and I might eventually switch off
of IFTT
which I'm using for notifications
onto my own self-hosted N8N thing.
So lots of little different things.
I got a Plex server running there somewhere.
Love it.
Yeah, I started out on Raspberry Pis.
Like I had literally like
a little like 3D printed
Raspberry Pi rack
with four of them in there.
And they're all doing different things
and now it's just been replaced
by like thousands of dollars
for the technology.
It's crazy how fast it ran.
You can run Docker on Raspberry Pis.
Wow.
If you did not know.
Yeah.
You can memorize your Pis.
I like my Synology.
I tried doing Plex on a Pi
and it turns out you need
a good computer to have Plex
do things well
for more than one person.
So now I run an Intel Nook for that.
That's impressive.
Oh, the Nook is that really small.
Like it's relatively small too
but it's like pretty high power.
Yeah, they have some bigger ones.
I have the Hades Canyon one, I think.
It's like a thousand dollar one.
It literally just runs Plex
and it's never had a hiccup for me.

Yeah, I remember looking at it
as a long time.
This is just a fun library
that I found.
It's called Git Peak.
It's by Jared Schumner.
I just stumbled across it
and I thought it was really interesting.
The idea is you have this command
that like hooks into Git.
So it's just Git Peak
and you can put a URL,
a GitHub URL
and it'll quickly open it up.
So you can see the code
without having to think about
like, oh, let me clone everything down
and pull it in.
I just want to open it really quickly.
It's relatively simple.
One thing that I do like
is if you don't provide an argument
it has this dynamic search functionality
where you can search GitHub
for things that you want
and then quickly get a description
and open it up
and be able to mess around with it.
It seems really nice.
It's really good.
It opens up in your editor and everything.
This same user
has also created a browser extension
a peak browser extension
that integrates with GitHub.
So you just like to peak
and it opens it up
and your editor.
It's pretty cool.
Yeah.
So GitHub 1s
is if you notice
I just added 1s
at the end of this
GitHub.com URL.
And if you open that
that actually opens the monoco browser
with that GitHub repository
right in your browser.
It's basically the same thing.
You don't get your own plugins
but they actually recently implemented search
which I like a lot
because you couldn't search before.
That's hot.
Yeah.
That's pretty awesome.
Yeah.
So this is where I'm going with this too.
I'm thinking of Replit
and you say that I'm like oh
GitHub Codespaces
and Replit
are going to change the games.
What I started doing with Replit recently
is I'm looking at a repo.
I'm like hmm
this seems interesting.
Click.
Now I've got a Replit for it
and I can just unmute
and start playing with it.
And being able to quickly get in there
and then just like fiddle around
like oh yeah I get what this is doing
or like no this is not for me
has been huge.
The other which is just really basic
is like webhooks.
So if you're using Oracle
or any service that has webhooks
and you want to quickly play with things
just like start a Replit
and then point the webhook
at that Replit
and then you can just run,
edit, run, edit, run
and just keep going
and seeing how it works.
Otherwise you'd be like
well how do I publish this thing?
Do I need to deploy
to a Vercel or something?
It's going to take some time.
Replit, you're just natively in the cloud
and so so easy to get started.
Yeah, definitely a big fan of Replit.
My girlfriend's sister
she is going to college
for computer science right now
and all of her classes used Replit.
So what she's been doing
over the past weekend
is learning how to set up
the languages she was using
on her computer
because she's never had to.
Wow.
Yeah.
It gets me excited
for the next generation of programmers
because there's a lot of stories
about wizons, programmers
who started,
it's like oh yeah I was 8
and I like learned basic or whatever.
But I don't really think
like programming generally
is always very approachable.
Even people who can acclimate to it
it has such a sort of high activation energy
that you have to break through
to get everything set up and running.
But tools like Replit
where you can just focus
not on all the environment
and all the other stuff
but just on the code,
just on that one little thing
narrowing your focus down
I think is super powerful.
And the collaboration
that comes with it
is like hey,
yeah, yeah.
Just play me this one thing.
Do you know what I should be doing here?
Okay, yeah, just like drop in.

Take a look.
Having actual comment threads
like discovering that feature
was really interesting.
Before that I was helping out
my girlfriend's sister
with just like writing comments
in the Replit
and then we realized oh shit
you can actually do comments.
Real comments.
We still,
I think we still have
a running Replit
for a lot of our HTTP services
in Replay.
It was the easiest thing
to get started.
Why not?
If you want to edit it
you just go to Replit
and make some changes.
The other day I was working on
changing how we send emails
with a colleague.
We're both in there
like Google Docs
just making changes
like I think that looks good.
Yeah, yeah, yeah.
Ron, I'm like what is this?
This is not GitHub.
I'm not going to make a commit
and publish a review.
Like we're just playing
and it feels natural.
Yeah.
I think we so many people
who start there
and they're like
you want me to use GitHub
and Git?
No.
Why would I do that?
I think that about wraps it up
for the week.
Thanks a lot for coming on Jason.
This was a very interesting talk.
I think we covered
a huge expanse of topics.
I loved it.
Thank you so much for having me.
Yeah, thanks.
Well, that's it for this week's
episode of DevTools FM.
Be sure to follow us on YouTube
and wherever you consume your podcast.
Thanks for listening.