Jamon, Robin, and Mazen unveil the secrets of the dev menu in React Native, sharing tips and tricks that even seasoned developers might not know!
Jamon, Robin, and Mazen unveil the secrets of the dev menu in React Native, sharing tips and tricks that even seasoned developers might not know!
This episode is brought to you by Infinite Red! Infinite Red is a premier React Native design and development agency located in the USA. With five years of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter), Infinite Red is the best choice for your next React Native app.
Episode Links
Connect With Us!
---
Quotes you can share on X!
Todd Werth:
Welcome back to React Native Radio Podcast, brought to you by Devon ai. Unlike human engineers, it can complain about TypeScript 24 hours a day nonstop. Episode 2 91 r and r explains the dev menu.
Jamon Holmgren:
Hey everybody. This is a new series to go along with our other series. We have the Real Life React native series, and we also have the We React to News series. We like to do various different things here to mix it up, react Native Radio, but this is a new one and we are calling it React Native Radio. Explains r and r Explains, and what we're going to do is we're going to explain how a particular React native feature works. Usually something fairly specific. We're not going to go like, Hey, how does the entire rendering engine work? We're going to go something a little more specific than that. We read the docs, so you don't have to, but you should. Anyway. Obviously go read the documentation.
Robin Henize:
Obviously everyone's reading all the
Jamon Holmgren:
Docs. They are, yeah, they probably have already read this. They're going to listen to this whole thing and not learn a thing. Is that right?
Mazen Chami:
That's exactly what's happening here.
Jamon Holmgren:
I kind of doubt it, but we'll see. I'm Jamon. I'm joined as always by Robin and Mazen, or as I call them, Robson.
Robin Henize:
Mabin.
Jamon Holmgren:
That's not bad
Robin Henize:
Zen. I don't know.
Jamon Holmgren:
The hosts of React Native Radio and all of us are from Infinite Red. What is Infinite Red? We are well cue the sponsor. This episode is sponsored as always by Infinite Red. Infinite Red is a Premier React native consultancy located fully remote in the US and Canada. If you're looking for React native expertise for your next project, hit us up at Infinite Red slash React native. And don't forget to mention that you heard about us through the React Native Radio podcast. Today we're going to explain the dev menu, also known as the debug menu. What else do you call it? It's the thing that pops up at the bottom of your screen when you shake it or whatever.
Robin Henize:
I call it the debug menu usually, but I think it's officially called the dev menu.
Jamon Holmgren:
Yeah,
Mazen Chami:
It's labeled as the dev menu.
Jamon Holmgren:
Right, but
Mazen Chami:
It's tagged on the website as the debug menu, so
Jamon Holmgren:
Yeah, I don't think they know, so
Robin Henize:
It's not entirely
Jamon Holmgren:
Clear. That's right, and also there are three of them. We'll get into that. Unfortunately in this case, the docs are lacking a little bit for the dev menu. Why would we talk about the dev menu? Doesn't everybody know what it does already?
Robin Henize:
I don't. I mean, I know the main things, but when we were prepping for this, I found stuff that I'd never seen before.
Mazen Chami:
We learned a lot going through this. I think there's a bunch on here that I never used, but I could see their value.
Robin Henize:
Yeah, maybe you'll learn about something you've never seen before and it'll bring value to your day.
Mazen Chami:
A lot of them are very niche, so as we're reading and explaining these, you might be like, wait, hold on. I'm doing exactly that. This could help me out and save me time, so you're welcome. I
Jamon Holmgren:
Would like to call out that Expo has a really good overview of all the tools as kind of is usual. The expos docs are a little better than React native themselves in explaining the React native concepts. Plus they obviously also talk about the expo specific stuff, so we should talk about that. There is an expo debug menu or dev menu, and then there's just sort of like the Vanilla React native debug menu, which of course is a little different between iOS and Android. We'll talk about that. Expos adds some pretty UI along with some expo specific things like Go home, SDK version, current port, et cetera. So first I want to ask, how do you open this dev menu and what day of
Mazen Chami:
The week is it?
Robin Henize:
I know I
Jamon Holmgren:
Cannot believe how many different ways there are to open this menu.
Mazen Chami:
It depends on the day of the week.
Robin Henize:
It depends on the day, what the
Mazen Chami:
Moon in
Robin Henize:
The sun, what's happens to be in your cache at any given time?
Jamon Holmgren:
Yeah, what? Let's go through it.
Robin Henize:
Where's Mercury? I dunno. All of it. Okay. The most fun way if you're running on a physical device is to just shake it. Shake it. Like a Polaroid? Yeah,
Jamon Holmgren:
Like a Polaroid. Shake
Robin Henize:
It like a Polaroid. No, wait,
Jamon Holmgren:
Are you even old enough to have, are
Robin Henize:
You kidding? This is what my freshman year homecoming dance was all about.
Jamon Holmgren:
Okay, alright. I believe you. I didn't go to my homecoming dance, so I don't know.
Robin Henize:
That's what the kids were listening to when I was in high school.
Jamon Holmgren:
So you can shake it and it pops up. This is, by the way, only in developer mode because you don't want your users,
Robin Henize:
This will not show up in production, and then on Android emulator, you can use Command M, which is the command for shake, so it's emulating a shake gesture. That only works on the Android emulator though. If you do that on iOS, it will minimize your simulator, so don't do that.
Jamon Holmgren:
Also, that only works on Mac Os if you're on Windows. It
Robin Henize:
Has to be control. I don't even know
Jamon Holmgren:
Controlling.
Mazen Chami:
Yeah.
Jamon Holmgren:
Yep. We didn't even add that one. I just thought about that. I
Robin Henize:
Think control, I think the official command is command D, but I find that it sometimes doesn't work on iOS, and so then the iOS simulator command for shake is command control Z. Okay.
Mazen Chami:
That's the, yeah, keyboard shortcut.
Robin Henize:
I think it has to do with whether your simulator's set up to accept the system. Keyboard shortcuts or something. I'm not
Jamon Holmgren:
Sure. I got you.
Mazen Chami:
Those are all default settings. Right? We're going to talk about another fun one further down, but these are all the default setting. You can probably do some key remapping to get this to work, but those are the defaults that comes with your Mac computer, so this one's interesting. For non expo, if you're in your server terminal, so metro D, you
Robin Henize:
Can just press DD,
Mazen Chami:
It'll come up for dev menu, debug menu. That's a
Jamon Holmgren:
Relatively new development. I think that's the idea. I mean, I don't think that was,
Robin Henize:
It didn't always listen for the keystrokes like that.
Mazen Chami:
For expo M,
Jamon Holmgren:
For for menu, because
Robin Henize:
They like to be different
Mazen Chami:
For menu.
Robin Henize:
Why not? Now I'm curious what D would do in the expo one looks like nothing.
Mazen Chami:
Probably nothing. Yeah. It's not like because J is for something random too. Yeah.
Robin Henize:
There's also a terminal command with A D, B, A DB. She input key event 82, which I think is also the shake. The shake command, so the only for Android. All right. On a real device, you can touch what?
Jamon Holmgren:
Three fingers to the device device.
Robin Henize:
I didn't know about that one.
Jamon Holmgren:
Okay,
Mazen Chami:
So they're probably, they're wrapping a developer app expo with a gesture to catch three touches. Yeah,
Robin Henize:
Or you can use React toron and make a custom command.
Jamon Holmgren:
That's right. If you are in the expo dev menu, you can open the React native dev menu from there.
Robin Henize:
Yeah, you scroll to the bottom and it lets you open the React native dev menu, the native one,
Jamon Holmgren:
And I do think in React Deron, we should add another a custom button for opening the dev menu because why
Robin Henize:
Not? Why not add another way
Jamon Holmgren:
It to a different key? We should map it to a completely different key.
Robin Henize:
I agree.
Jamon Holmgren:
That's evil key or something, so let's talk about what's in there. First off, I think what we often are reaching for is reloading. Now there's three different reloading concepts here. We're back
Robin Henize:
To key with keyboard shortcuts.
Jamon Holmgren:
There's manual reloading, which you can also use R or rr.
Mazen Chami:
RR is for Android.
Jamon Holmgren:
Android, which used to be,
Robin Henize:
It used to be command R,
Jamon Holmgren:
Command R for
Robin Henize:
IOS, and then the simulator added that as a start. A screen recording.
Jamon Holmgren:
Yeah, so I have many screen recordings.
Mazen Chami:
How many hours? Oh, many. How many hours still of screen recordings do
Robin Henize:
You have? I still find some.
Mazen Chami:
Just all of it. Just a two hour long one. The other day, God
Jamon Holmgren:
That I deleted. Yeah, command R didn't notice. Why isn't it reloading now? I'm getting a little bit better at catching it, but so there's also hot reloading.
Robin Henize:
If you're running an old version of React native, you might still have this, but probably not.
Jamon Holmgren:
Yeah, way back in 2016, but that's gone in later versions replaced with Fast Refresh, which is actually one of coolest things about React Native because it tries to preserve state.
Robin Henize:
Oh, fast Refresh is a React native superpower that really puts it a league above native development above the rest, just save your file and your app is updated. Yeah.
Jamon Holmgren:
Another button on the dev menu is Show inspector. It might also be named Show Element Inspector,
Robin Henize:
Another Android.
Jamon Holmgren:
I've noticed that they're not always
Robin Henize:
Inex clickable difference between iOS, Android,
Jamon Holmgren:
Yeah, inexplicable differences here. Maybe an opportunity to contribute to React native, to go standardize some of those things, but so there's a number of different tabs here. The most common one that people use is the inspector, which allows you to tap something to inspect it, and then what is this show?
Robin Henize:
Basically, it's very similar to the Chrome inspector. If you right click on an element in a webpage and you say show source or show element or whatever, and it shows you all the padding and margins and stuff. This does that so you can see why does this look wonky? Like, oh, it has an extra 24 pixels of padding and you can kind of see where it's coming from.
Mazen Chami:
I know for people coming from web, this is very familiar and a lot of people that I worked with that are coming from Web two React native reach for this a lot, but usually in web you can change the values here, you can't can do it technically in the React dev tools, which is a whole different topic, but it just basically just spits out your styles
Robin Henize:
For it. It shows you the component hierarchy too, so you can see like, oh, is this my screen component? Is this my view, my card, whatever? It'll show you the styles that are being applied to that, so very useful. Super. This should definitely be in your arsenal. Yeah,
Mazen Chami:
Totally.
Jamon Holmgren:
Now there are three other tabs that were kind of surprising to us in a few different ways. There's a perf tab, which I thought was going to show the same stuff as the perf monitor, the performance monitor, but it does not. It looks like a stack trace. It's not readable, honestly, it doesn't look useful to me at all.
Robin Henize:
It looks like it's broken.
Mazen Chami:
Yeah, it's random. I've had it where it shows a blank, like it's empty sometimes and sometimes it just shows stuff that you almost need to be, know what it's saying. I don't know. Someone at Meta probably knows what it says and it's for that.
Jamon Holmgren:
Yeah, exactly. There's obviously many other ways to debug performance. You have Flipper if you're still using that. You have the React dev tools, flame graph, you have Xcode, Android Studio, react, native Performance, all kinds of different tools. Even React, Deron has kind of a built in performance tool that a lot of people don't know about, so there's a lot of different ways to debug performance. The next one is called Network and it does kind of what you would, it watches for network requests and if you tap on a network request in there like a URL, it will show you a bunch of information, full information about it, but
Robin Henize:
It's not particularly, the format is not particularly useful. You can't copy anything. It's not formatted in a really readable way, but it's there.
Jamon Holmgren:
Yeah, I mean in a pinch you could use it. What would you recommend using instead for network requests?
Robin Henize:
I think everyone can probably guess at this point.
Mazen Chami:
It's a cool tool. I don't know. I don't know if everyone knows about it though. React actron.
Robin Henize:
Have we ever mentioned it on the show? I don't think so.
Mazen Chami:
I haven't think so.
Jamon Holmgren:
Where do you see network requests in React actron?
Mazen Chami:
Here we go. Timeline.
Robin Henize:
Okay. Right now you see them in the timeline with all of your other logs.
Jamon Holmgren:
We're having an internal discussion about potentially adding another tab that's just called network and that would then take all the timeline ones that are just network and put 'em in one spot. I am for it. Other people at re are against it, so I just keep putting in my or
Mazen Chami:
That could be useful. That could be useful.
Robin Henize:
It's a slippery slope. Jamon, where does it end? Next you're going to want a separate tab for your aing storage calls. You're going to want a separate one for your,
Mazen Chami:
It says the person that wants no confi
Robin Henize:
Files. Keep stage reactions. I like
Jamon Holmgren:
It. Alright,
Robin Henize:
So there's one more and it's the TOUCHABLES tab, which is, it's not as useful as the inspect tab, but it is useful for really specific cases. It basically just highlights the areas on your screen that are touchable, so it can be helpful if you're having hit slap issues where people are tapping on things and it's not registering. You can kind of see what area is actually touchable. So that's there. That's basically what it does.
Mazen Chami:
That's actually very helpful. One thing I learned on a recent client is accessibility requires a certain, even for iOS and Android, each platform they have a minimum touchable area requirement. I don't remember what, I think it's like 52 by 52 pixels. Don't quote me on that. We can look it up easily, but this is very helpful because you can see where the touchable area is. Click it and then look at your inspect and it'll give you the actual height and width of it so you can essentially know like, okay, I don't have a min height, min width on my touchables and I need to do that, and you kind of get to set it. So that's a cool use case of how Touchables and inspect can kind of work together to make sure that you are accessible while also figuring something else larger out.
Jamon Holmgren:
So moving to the next thing on the dev menu, there's a configure Bundler on iOS. It's also called Change bundle location on Android because why not? It's really mainly necessary if are trying to run more than one React native app at a time, because you may need to change where it's grabbing the bundle from and on iOS, it pops up a dialogue that gives you three separate inputs, one for the address, one for the port and one for the file entry point and on Android it's just one text field, which is just the address port. We're going to be doing a future episode, probably an RR explains about Metro and when we do that, this is going to make a little more sense if you're not familiar with Metro and how it works.
Robin Henize:
I've used this in the past on Brownfield apps where you have multiple different React native instances running in the same apps. You have to run them at the same time. I have to choose a different port for one of them or work consultancy and you may be working on two different projects at the same time. You have to change the board in order to run to, so that's what that's mostly for. I
Mazen Chami:
Use this often. It's weird. I didn't think I would use this. I use this quite a bit. I'll be working on a client project and then I need Ignite up to compare something. For example. I
Robin Henize:
Wonder if you could also run a React native app against a remote server. I'm pretty sure this is what Expo does with their custom dev client where you scan a QR code and it's customizing the URL that it points to the bundle to some remote ip.
Mazen Chami:
I'm sure there's a way to do React native start with the port specified in that command. Yes, there is. So that's basically essentially what there is. This is same thing, but this is the manual way of doing it.
Jamon Holmgren:
Yep. Now there's another option not to be confused with the perf tab
Robin Henize:
In the inspector.
Jamon Holmgren:
In the inspector, but it's show perf monitor.
Robin Henize:
Now, this is the useful performance tool in the menu,
Jamon Holmgren:
And this is something I would recommend having up most of the time, especially when
Robin Henize:
You're just playing around doing, especially if you're doing really intensive animations or UI work,
Jamon Holmgren:
It'll show your RAM usage. There's a section for JSC, which doesn't apply if you're using Hermes. Hopefully we can get some information from Hermes at some point. There's a views column that also is useful. You want to keep the number of views lower, especially if you are rendering a lot of views that aren't even being shown. This happens actually quite often in tab situations where you're tabbing between different tabs and you kind of do want to keep those views open because you don't want to have to reload that page every time you get back there. Then there's also two graphs. One is a UI thread graph and one is a JavaScript thread graph, if at all. Possibly you want to keep the UI thread graph pinned at 60 FPS, keep that buttery smooth ui. The JavaScript side runs in a different thread and that can dip from time to time, but you don't want it to be consistently low or it will start affecting other parts of your app, but that's a JavaScript frame rate.
Mazen Chami:
Dropping like five on the UI also is not probably a user won't notice it. I know there've been a couple of Twitter debates about dev seeing it versus user interaction and all that kind of stuff, but being honest, dropping a 55 while you're doing a complex animation, as long as the animation is smooth, the user won't notice it. So
Robin Henize:
If you hear people talking about, oh, dropping frames, this is what they're talking about. Yes,
Mazen Chami:
Exactly. You can also click on it on this little tab that shows up to get other stats script download execution, native module in it, main thread stats. TTI believe is also on there. Root view,
Robin Henize:
TTI. Yep. There it is.
Mazen Chami:
Yeah, so a lot of information is on here, so maybe this is another r and r explains episode. Well, one episode just keeps stemming other episodes. It's like, I
Jamon Holmgren:
Know we tried to keep this as narrow as possible, just the dev menu. I thought this was going to be like a 10 minute episode and there's so much to this. So moving to the next thing. This is actually only on Android, but there's a settings button, just settings,
Robin Henize:
And this is honestly, I've been doing this for seven years, never opened this screen, so don't feel bad if you didn't know about this. I think it's a lot of more advanced stuff
Jamon Holmgren:
And you can turn on and off js dev mode, JS minify mode, so that will basically reload from your bundle with minify equals true or minify equals false.
Robin Henize:
That's debugging ification issues. Going back to talk about the dev mode for a second, if you don't realize that's the underscore dev global variable that you see within your code and you use to gate your console logs or whatever stuff you only want in dev, you can toggle that on and off to see what your code does in a non dev environment using this menu and note
Jamon Holmgren:
That there's sort of like two environments happening here. There's the JavaScript dev mode, but then there's also the native dev mode, so just keep in mind that those things won't match up when you toggle this on and off. You have to actually build it for release to get the real full thing. Yes,
Mazen Chami:
That's a good point. I was, yeah, don't make any final calls based off of that toggle because it's not true production
Robin Henize:
App, but if you want to keep a lot of your, I think you would keep a lot of your dev tooling while seeing what your code does when it's run.
Mazen Chami:
Even third party apps will run against that third party apps that have a dev guard around some code that depending on if that's on or off, it'll execute that way. So you do get a, how does my code run if I'm not in dev mode? That's really it. No performance and all that. You'll still
Robin Henize:
Be able to open your dev menu and you'll see red box Eric, I believe. Yeah,
Mazen Chami:
No,
Jamon Holmgren:
There's also an animations FPS summaries, which essentially will pop up if you're debugging Android animations. It will pop up like a toast and log out some debug information about the FPS during the animation transition, which is useful, like I said, for figuring out why your animations maybe or which animations are potentially hanging up. There are a few other settings on here. We're not going to go into it because they're very niche things. You can definitely dig into it if you want and see if it's something for you, but we haven't had to touch this in eight years of react native development, so doubtful you'll need to as well. Famous last words, right?
Robin Henize:
We're going to get so many angry tweets.
Jamon Holmgren:
Then there's a really interesting one here because of the timing of where we are in the React native world and evolution, it says open debugger or it might say open debug or it might just say debug, but the question is what does this button do? What debugger is it opening? Because we're in this big transition period with Debuggers Flipper is going away, remote JS debugging is going away. There's a new experimental debugger, there's an Expo vs code extension and there's a lot more stuff going on. So on a 0.73 app, which is sort of current open debugger tries to open Flipper, but if it's not installed, it will just, it'll just like log a warning to the terminal on iOS. There's also an open React dev tools, which I would think it would try to open the standalone react dev tools client, which we should also talk about in a React native in an r and r. Explains episode 20 spinning off more, but it doesn't also tries to open Flipper. Oh my God. But the React dev tools extension within Flipper,
Mazen Chami:
So we could change this open debugger slash debug to Flipper
Jamon Holmgren:
Kind of. Yeah, but then that's going to change in future ones. I'm sure it'll be the new debugger, which is hopefully coming.
Robin Henize:
It's, it's a bit of a tangled mess, which is a blunt way to put it, but it's true, and they're working on it. They really are. That's one of the things that they're actively doing, but we're not going to go too far into it. Pretty tangled.
Jamon Holmgren:
Oh, by the way, what do you think this does on Android?
Robin Henize:
Well, I'm running a 72 app right now and it's not even there. There is no debugger in the native menu. Oh, fun. Exist in the expo menu. There's an open JS debugger option, which
Jamon Holmgren:
Probably the Chrome one. Yeah,
Robin Henize:
It opens the Chrome, the
Jamon Holmgren:
Old one. Yeah. Anyway, this stuff's all going to get resolved later. Yeah. Okay. A few honorable mentions. There's a toggle slow animations, which is Android only for
Robin Henize:
Reanimated Reanimated, so it only shows up if you have Reanimated
Jamon Holmgren:
Install, right, which Ignite comes with by default. You can also do custom dev menu actions. I think this is kind of fun. You can go in there and add your own menu items.
Robin Henize:
We use this a lot. I use it for storybook or component demo screens,
Jamon Holmgren:
And it runs the code right in your JavaScript process, so this can be very useful. Yeah, I mean, like you said, storybook, there's a few different ways to add 'em built in. There's dev settings, the add menu item. You can also add React native dev menu, not really sure what it does differently. This is about four or five years old, maybe it would predated the dev settings add menu item method, but that's dev menu add item, and then there is an expo dev menu which allows you to register dev menu items and then you pass an array with all the different items and you just give it a name and a callback and you can run any code you want there. So, okay. That was longer than I expected. I thought this was a 10 minute episode. Definitely. We didn't even get into everything in the dev menu. Please let us know on Twitter email. On Twitter, we're at React native Rdio. If you want to email us RN radio at Infinite Red, let us know what you think of this new RR Explains whether it's useful. If you have ideas on specific things. Don't be like, Hey, tell me how React native works. React native works.
That would be a little too big of a topic. We want stuff that's really specific, like what we mentioned during this episode. Alright, well, that's it for this episode. Robin, do you have a mom joke to take us out?
Robin Henize:
I do. This one is courtesy of Frank Calise, who's our favorite. Frank, did you hear about the Italian chef that died? No. You can only live so long.
Jamon Holmgren:
I get it.
Jamon Holmgren:
All right. We'll see you all next time.
Jed Bartausky:
As always, thanks to our production team with editor Todd Werth, our assistant editor, this guy Jed Bartausky, our director of marketing and episode release coordinator, Justin Huskey and our guest coordinator, Derek Greenberg. Our producer and host is Jamon Holmgren and executive producers and hosts are Robin Heinze and Mazen Chami. Thanks to our sponsor, infinite Red. Check us out at Infinite Red slash React native. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio wherever you get your podcast and leave us a review. We'd love to hear what you think.