React July 2022 Meetup
"Browser tools to aid development and debugging" by Nik Krimm
React provides rich browser plugins that aid in the inspection, debugging and development of React components. This talk will provide an overview of the tools, and how to use them to improve your daily workflow.
We are actively looking for speakers! Reach out
at [email protected] you would like to give a talk
I'm Nick. I'll be talking without a microphone. Can everyone hear me? Cam. Cam last. I'll go back to where you're hey, my name is Nick. I work here. I'm a developer on the consumer facing app applications with awesome. I'm going to talk a little bit today. My talk is on browser tooling, and I have a short talk. Then Nicki is going to come up and I'll do another talk. Hey. When I started developing, the only kind of tooling in the browser to talk about your application is alert. And if you were from that area, you did a whole bunch of alerts and looked at an object error, trying to figure out what to do. We're in so many years of evolution. We're kind of in a golden era now where there are so many built in tools in the browser, which is awesome. You're working in your execution environment. I'm going to look today with you guys at some of the tools that the react ecosystem provides as a browser. First payment is really easy to find. There's a plugin for Chrome. There's a plugin for firefox. You can just type in Chrome. That's your browser react tools. Firefox, that's your browser. Really easy to start working around with. Hey, you guys have made this app for you to talk about this. This is DOCA logo. A little message up here at the top. And then it has four features that I'm going to show up to first. This comes in dark mode or non dark mode. We have a too much coffee mode. Little spider graph, really big. If you turn them all on, it just goes crazy. And I'm going to look at this. Okay, I'm going to open up my inspector. I'm just going to walk through a few features. I'm going to grab my notes over here too. Hey. I'm on this react component tab in my dev tools. This is installed after I go through the process. It talks about first real easy. And the first thing I see when I check on this is a copy of my component tree that's easily navigable if I select my app. Let me get a little more going on here. For each component I select, I'm going to see a bunch of metadata over here, what the props are, any hooks and effects, how it was rendered, and literally the source code. So far, so nice to see. And then I can easily pick through the components. And each of these is going to update course. It's a really small detail, but the arrow keys work to navigate the tree. That's really nice. If I select specific components, I get a tree navigator up here. Again, this is a trivial app. It doesn't show you much, but when you have deeply messy on, it's very helpful. I'm going to show you these three buttons and then change the couple of properties. That will be almost done with my button. Hey, here's a nice feature is this button here. I'm skipping this is bend button. If you are, the React experts will know why. I'm not going to do anything with that right now. I can switch to where the Dom element is. So if I'm looking for my NAV bar, I can click right over to indepth tools where the HTML is. That can be useful. What's more fun is I can log out all of the details to the console. This little bug logs the components, data, the console and so all of the stuff that was just in that little box window is over here. That's fantastic. Existing Properties the funnest part is I get all of the information that React has about and I don't I can't directly edit it here, but I have all of my event handlers. Just every attribute is logged back. Really helpful. And the last little bit this guy is I can literally see the source code. The previous view I showed pointed to where it is. But you can actually inspect the source code right there. This can be helpful. I'm going to show a little more interesting detail. This is all read only, but these tools also let you interact directly with your page in browser. Let me see if I can get a little more view here. I'm keeping a lot of my states at the top level of my app, but I have this little bit of props. The audience has this React feed up, but if I want to change this in browser, I can make this racecar drivers and my application is immediately updated. Again, we have a real trivial application, but you can imagine that interacting with your properties here while your application is loaded creates a lot of development, efficiencies and opportunities. What surprised me as I started getting into this is you can actually interact with your hooks as well. So I have two state hooks here. One for the dark mode and one for all the other states. And inside this application, the Dev Tools area, I can switch these properties back and forth. Let me give you another example. If I turn all these on, again, my effect state with label is listed here and I can turn these off and readd them directly in the console. Again, we're working with a real trivial application here, but you can imagine there are many applications you write that it's hard to get your application into the state you're trying to task style or sign at that time. This really moves forward in that area. In the last little bit I wanted to talk about is that normally for any use state hooks, you're just going to see just the word faith here for every single hook. Let me see if I can use the tools themselves to show the source code here. React tools provides. This little resolution is really good for me up, but there's a use debug value feature in React that you can use to label your books. So instead of just using State or use Effects, I have with label this function that applies to you to use Debug Value. So my state set up here says construct mode. Set dark mode. I guess that Label function critical. And that gives me these labels arc Space and Effect State instead of just saying states. That's a long way around. But the first two apps I did, I just had a long list of states. I thought that was a useful tip. That's the end of my talk. Hey, anybody have any questions?