 Okay, so first of all, thank you all for coming. This is my first FOSSDEMM. I am very excited to be here. I am a bit overwhelmed with the size of this event and by the fact that all of you people are so engaged with what people have to say and that there are no lunch breaks and you are still here in this room, so thanks. Okay, so without further ado let's talk about debugging. This is what we're going to talk about today and I'm going to talk about something that's really going to change our community. Now, let's start with a few questions. With a raise of hand, how many people here develop frontend applications? Okay, very good. How many people still use alert as the main way to debug their application? Okay, okay. I like you. I like How many people use console log as the main way? Okay, and how many use a some browsers debugger? And the last one how many use Mozilla's debugger? Firefox? Okay, so I feel like is there anyone who has not raised their hand at all? Okay Do you develop apps, sir? Okay, so Yeah debugging So debugging is indeed it's hard there are a few ways to do it and And I think a lot of the developers as seen by the arrays of your hands today Don't resort to the debuggers the first way to debug the application and I put this responsibility more on The debuggers than the developers because we are users. We will use whatever tool makes us most productive So like how many times did this happen to you that you are debugging and your code is Somewhere between the start and the end of the call stack and all the rest is just other people's code it's frameworks or You have your code you're trying to debug your application production you have this a variable called user you're trying to Debug it and deval evaluate what the value is But it's impossible because the code is obfuscated. It's actually e So did this happen to you? No Well sometimes Okay, so how would you like to have the power to change this behavior in the debugger? well in Firefox dev tools team, they would like you to have this power and it's like the ideal scenario today because You've just had one hour. How many people here attended last two sessions about the by Julian and Nicole Okay, so so for you, it's it's great. I already have the context of what's going on in the debugger But today I'm going to give you the context about how Firefox is Giving you the power to shape your own JavaScript debugger. So about me. My name is Amit. I'm a front-end consultant from Israel I'm also a Mozilla tech speaker. You can find me on Github I sometimes write on medium and I tweet with all with the same handle What I do in my day-to-day job is I help organizations scale consistently with their UI and up their UI games by Bringing building out design systems and atomic design So enough about me. Let's talk about your JavaScript in 2017 or sorry in 2018. Oh my god. This slide is totally out of other thing so The first thing is it's probably framework driven You're probably using a lot of third-party code in your application and your code is a portion of this application now if you write some Some ES6 code you're probably transpiling that to ES5 just because you're running it and all the browsers Or you're writing TypeScript. So you troops. Let's say you're just filing your code Also, you're probably bundling your code if you like to be on the edge because you're writing Dozens of source files and you want to save bandwidth and not send out so many requests so you're bundling your code and also, you're a super Super developer who knows that they don't want all their code to be exposed on the client side Even though it's not real security, but you like to minify and obfuscate and ugly fire code And that's the best practices for today. So I'm going to cover these points. But also if you're Doing other things than just mapping arrays, then you probably have some asynchronous code you're fetching data from a server or your handling user interactions and Finally, you might be running your JavaScript in other things than a browser a laptop's browser You might be running it them on a On a controller you might be running them on your refrigerator or a security camera. So To debug JavaScript applications means you have also to address these points Comes in debugger.html project, which is a new and shiny project out of the Mozilla Firefox DevTools team now they set out to address all the points that I depicted earlier and They are now built rebuilding the entire DevTools suite from scratch using Modern web technologies. So the debugger project has been going on for about two years now And it's using React, Redux, Webpack and Babel and more community-powered tools to build to move forward the debugger and This project was named debugger.html because it's just a simple plain HTML JavaScript CSS Implementation of a debugger's frontend. So there's no more Zool for whoever knows and have experienced the pains and It's a simple web application So let's see how the debugger in 2018 solves the problems that we have That I already the behavior of your modern JavaScript. So if you have this spring driven and Remember this scenario. So let's see how we can address this So first of all, I just want to show how you install the debugger The scenario is pretty simple You start by so I'm going to debug it to do up. It's totally cool On the on the edge so At the beginning you start by get cloning the repository then you're on yarn to get all the sources and Yarn starts opens up and fires a webpack div server on port 8,000 So you can go now to your browser and start local host port 8,000 to see the web app of the debugger Now what do you actually see when you open up? another tab local local host 8,000 is Not the debugger it's something that we call the launch pad and the launch pad is what you See when you launch the debugger, but outside of Firefox as a web application. So if it's inside the DevTools Like bundling your browser, you won't see this but in order to be able to debug different Tabs you see this launch pad, which allows you to select the tab that you want to debug So I have this backbone to do app and I'm going to select it and start Debugging it so I choose this tab and then I see the debugger. I have a neat To-do list Make vanilla pudding put in a mayo jar and eat in public and now I'm going to set a break point and I'm going to break on this on this line And I see that in the in the call stack. There is a place where the backbone library is shown with its logo and it's also collapsing and is expanding the The stack frame so it's really nice the the whole stack frame is visualized in a collapsed way So I can identify why where my sources are and what third parties I'm using and there are a lot of a lot of libraries And third-party tools that are addressed and have these logos so I Saw this and I thought that it could use some some love and So When you expand collapse these these frames you don't really know how many frames are are collapsed So I just figured out, you know, it's really nice to have this this number next to the collapsed stack frame so I added this and My PR was accepted and I just want to show you how easy it is because all it means is Yeah, it's a bit hard to see with this lighting But the whole thing is a react to opponent I wrote like a badge component that is a circle with a number and I already have this number It's the length of the of the of the group of stack frames So so it was really easy for me to add this feature and was accepted So the next thing is transpilation and Here I just want to show you so this was appearing in previous talks here But we do as an example syntax highlighting for example JSX and the way it's done is The debugger is using code mirror for its For for its adding so you just say, you know set the mode to JSX if you recognize that this is a JSX file Or it's a react component Alas, it's not perfect. So Julian who's Right here in the crowd and spoke before me open up a ticket some time ago about this not working as planned and one of the contributors and you can see that this didn't work properly and One computer claimed this issue So I want to demonstrate here is how nice it is that you can go to github and Just comment with slash claim and there's a little github Bot that is answering with thank you for claiming this issue and here are some Setup getting set up and contributing developing manuals that you and will will be happy to answer your questions in slack and You can always feel free to unclaim it if you don't get time or get busy. So the debugger team So the next thing is your bundled code also not much to show here But I just wanted to show like there's it's the little things A lot of people bundled their code via webpack So if it's bundled via webpack, you've got the nice little webpack logo right there So just to reduce the cognitive load if you spot that icon, you know, where's the where the webpack folder is Okay, and lastly Alpha skated code that's that's a bit of a problem to debug alpha skated code So like on the left on your left is Is alpha skated code? But when you debug it you would really like to debug the Code that you originally wrote not the generated one So I want to tell you a story about mapped expressions, which is a personal story with that I was involved in So sometime ago Jason Laster who's one of the developers of the debugger Wrote this tweet debugger fiction as we'll love this PR by Yuri Delany How the debugger can now map minified variable names onto original variables this means scopes and preview look great and Next up is what oops Next up is a watch expressions This feature touches AST source maps and JS scopes. What's not to love stop by if you're intrigued and Needless to say I was intrigued So let's just see of a visualization of the problem So you have this to-do app again, and you buy a parrot you choose the parrot to say help I've been turned into a parrot I'm going to debug this and I'm so I'm adding it to do I'm adding a break point where I'm adding it to do and Let's enlarge this for a second and now I'm positive break point and I can see that action is properly evaluated when I hover over it But and in the scopes, it's also properly evaluated. They can see the values of an action dot text action dot type However, when I evaluate the express expression in the watch expressions Action is unavailable, and if I write T there, then it does get evaluated properly So what happens here is the actual front end of the debugger is going over to the back end Which is the Firefox web application and says, you know, hey, can you evaluate action for me and the Firefox? Receive this message and says, you know, hey, sir, there's someone here trying to evaluate the action I can't find anywhere and and then Tell them we don't have it and then the front end says, you know, oh shit. I'm sorry You're right. It's T my bad and then Firefox says, okay T. It's cool and everyone's happy and the code that is responsible for this mishap is in a function called evaluate expression which receives an expression and Just takes the input that the user wrote and sends that out to the Firefox And that is of course not good because we're sending action, which is bad. We want to send T so So yeah, this is a problem and the way to solve it is just to add a snippet between that You know, I get the input and before I send it out I just do a little thing that changes action to T and then I send it over so So cool stuff in the middle and let's just see this in action So that you believe me and we're all on the same page and I have your credibility So another to do you sneeze from Pope get blessed now I want really want to add to do that says stop telling jokes and I'm paused on this breakpoint and now I'm evaluating action Gets evaluated properly. Yay. It worked unexpectedly. I can also though Evaluate our things I can write action dot text. I can write action dot type I can concatenate string so I can say, you know, don't plus action dot text Let's just wait for the guy or the girl to type this and I can also do sort of crazy thing I can evaluate everything and you must remember this is the original source. It's not the generated ones Not the bundled obfuscated ugly fight one So I pasted it this in a very very complicated expression gets in gets evaluated properly So the task at hand is to replace action with T and all these types of expressions Now if it was only I want to evaluate action that would be easy. I replace action with T But as it comes to action dot text, I need to transform it to T dot text a little bit trickier I might think of a solution, maybe a regular expression to exchange But what happens with like This drinking can't a nation or what happens with this very complex expression so here the solution for us is using the mighty babel and The babel gives us the ability to build out an AST so with a raise of hand who here knows what AST stands for Okay, great, so it stands for abstract syntax tree Which means a representation of a data structure of our code So let's just very briefly look at the AST for this type for this expression. This is question is an expression statement It's has 22 characters starts to zero and a 21 The expression property is a binary expression starts at zero ends 21 There's an operator of plus has two children the left one is a literal It's the don't has starts at zero ends at seven the right one is a member expression action dot text Starts at zero ends 21 the member expression is also divided into two Two properties the object which is the identifier action and the property which is the identifier text Okay, so this is the AST for this expression Now once I have the AST for this expression, I can run this code which will help me do the switch so I take this expression and I use babel to parse it. I parse it into the AST that I've just shown you now I Traverse this is AST With all these binary expression member expression object literals and blah blah blah and when I find out Find an identifier that its name is action Then I take that one I go to my bindings and this related to the tweets that I showed you earlier About all the infrastructure work already done Which the infrastructure work means we know how to map action to T So I find this that this identifier action. I replace it with T and what I just need to do now is Generate a new abstract syntax generate a new expression out of my modified Syntax tree, so then we have don't plus T dot text How nice is that? Come on? Thanks, okay So we're all good geeks here. We enjoy our little mind game So let me just very briefly do a small thing if you can run a debugger as a web application Then you can debug your debugger as a web application and you can debug that debugger as a web application as well So what I'm going to do now is I have this to do app. How do you convert this JavaScript bug? I opened a debugger called D1 and then I opened a debugger called D2 Which is showing me the sources for the for D1 now. I have D3. I like to call D3 Which is showing me the sources for D2 and I'm just due to the lack of space I'm just going to open D4 and that's it that's showing you the sources and ability to debug D3 and What we're going to have now is a little is a little pause party the nicest place to pause on a break point when you're debugging a debugger is the when it's pausing because then all the information comes to life you see both the sources and The in the stack frames and everything so let's start. How do you convert a JavaScript bug? You can solve it Now where's we're part on D4 and I can see all the stack frames and these frames relate to the frames that D3 is paused on so I'm going to play that and D3 suddenly comes to life and I placed just the same place Breakaway in the same place and I'm starting to I see D2 come become coming to life and then I Step over and I can see that the expression is not well evaluated But when I that's because I didn't run the code to evaluate the expression But when I I'll do it now, I will see the value the expression get evaluated here on the one And now I'm going to play D1 and the application resumes so It's really needs to be able to to write code in a debugger So main message here is just don't be afraid to dip your toe. I started with Just pull requests that have CSS changes and little by little I start to understand more and more the code Which brings me to you the community so If the community is does the work community gets to decide what features go in and this is 100% true for Firefox and specifically for the debugger and anyone can help whether it be styling or code contribution or performance optimizations and profiling or Writing tests and documentation or doing design work and anything is possible anything is needed And this is a first-class open-source project And they're they're pushing very hard for community engagement And I think it's very it's monumental because it means that individual contributors have Now can like they can contribute by you're reusing the the Knowledge that they get at their workplace or at home And apply it in the debugger so But more importantly it works both ways Because if you're a react developer at work and you contribute to the debugger You also get value from contributing because you're getting knowledge and experience from the from working with the team of experts That's working on the debugger so You get you get your contribution from giving your contribution which is great And I think it's also monumental because this is the first time I that I know about that a Browser a platform is using community power tools to develop its own so this is really Really nice and there are many ways that you can engage in this project. So the first one is by using slack There's a slack channel Second one is on github. It's no more Buxilla no more mere mercurial. It's all developed in the modern workflow that we know today There are weekly updates because the nature of open-source projects is you open up your laptop to work on it And then you finish that your work you forget about it for maybe a week or two or three And you want to come back to the project understand what has happened. So you get these weekly updates You can read out what people have done there's a lot of documentation and There are weekly calls where it's on video and you can see the team and see other contributors and sort of relax because during the intense Work of coding and code reviews online You can like just hop in on a call no judgment No criticism and just hang out and chat a little bit with the team and get get to understand What's going on so make is makes it a lot more personal Now I want to share with you a way that I got people hooked in Israel about About this project amongst others and we call it the goodness squad So this is that this is something that I organize in Israel For a little over a year now and it's a monthly hacking event and the nice thing about it is the format We organize for each event We prepare a few projects so I bring in addition to organizing the event I bring the debugger and Other people bring in their own their projects or you know other big company projects or or individual projects And they are the mentors of this project So if 10 between 10 and 50 people come to the to the event they choose the project that they want to work on and The mentor is in is responsible to get those people into open-source contribution So that means technically understanding how to work with forks and pull requests if people are not Familiar but also just to know the people behind the project and get to understand the conventions and the code and The processes makes it a lot more accessible to contribute to open source a lot of people Find this a barrier that we are trying to To take down and the focus is to bring issues to the event event in a way that it's bite-sized So by the end of every event Everyone should be able to do a pull request and it's very exciting to see people get excited Because by 9 9 p.m. They have been able they have worked for three hours and saw And and contributed to an actual open-source project so What's next? I Want to just say you know what I would like to do like in in 2018 the debugger I want to develop a feature that is sort of I call it the debug trails because how many times did it happen to you that? You want to pause at a very specific place in an execution path But you set a break point somewhere But on the first time you don't want you want like a second iteration of it or you need to like You pause it and then you step in to step out step over step into you go to different sources You put break points you take down break points until you get to the state that you want you look at the state You evaluate and you try to understand what's going on in your program And then you understand then you do the whole thing again So I want to try to understand if it's possible to model out this this trail and say you know whether whether it be manual or automatic that I I learned what the With the developer wanted to where the developer wanted to pause but Be able to define a trail in the execution path and pause on that automatically so The question is what is your thought about? Contributing to the debugger in 2018. What are the things that you find? problematic in in debugging JavaScript or Rust or anything else And if you do find it come and hack with us merci beaucoup and So no time for questions, but feel free to grab me here outside wherever