[docs] Update in-app dev menu instructions, consistently name as "Dev Menu" (#3692)

huntie · web-flow · commit 5fb91336d345 · 2023-04-20T13:23:53.000+01:00
diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md
@@ -158,7 +158,7 @@ If everything is set up correctly, you should see your new app running in your A
 Now that you have successfully run the app, let's modify it.
 
 - Open `App.tsx` in your text editor of choice and edit some lines.
-- Press the `R` key twice or select `Reload` from the Developer Menu (`Ctrl + M`) to see your changes!
+- Press the `R` key twice or select `Reload` from the Dev Menu (`Ctrl + M`) to see your changes!
 
 <h3>That's it!</h3>
 
diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md
@@ -170,7 +170,7 @@ If everything is set up correctly, you should see your new app running in your A
 Now that you have successfully run the app, let's modify it.
 
 - Open `App.tsx` in your text editor of choice and edit some lines.
-- Press the `R` key twice or select `Reload` from the Developer Menu (`⌘M`) to see your changes!
+- Press the `R` key twice or select `Reload` from the Dev Menu (`⌘M`) to see your changes!
 
 <h3>That's it!</h3>
 
diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md
@@ -191,7 +191,7 @@ If everything is set up correctly, you should see your new app running in your A
 Now that you have successfully run the app, let's modify it.
 
 - Open `App.tsx` in your text editor of choice and edit some lines.
-- Press the `R` key twice or select `Reload` from the Developer Menu (`Ctrl + M`) to see your changes!
+- Press the `R` key twice or select `Reload` from the Dev Menu (`Ctrl + M`) to see your changes!
 
 <h3>That's it!</h3>
 
diff --git a/docs/animations.md b/docs/animations.md
@@ -672,4 +672,4 @@ As mentioned [in the Direct Manipulation section](direct-manipulation), `setNati
 
 We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
 
-If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Developer Menu "FPS Monitor" tool.
+If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
diff --git a/docs/building-for-tv.md b/docs/building-for-tv.md
@@ -89,7 +89,7 @@ class Game2048 extends React.Component {
 }
 ```
 
-- _Dev Menu support_: On the emulator, cmd-M will bring up the developer menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )
+- _Dev Menu support_: On the emulator, cmd-M will bring up the Dev Menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )
 
 - _Known issues_:
 
@@ -175,7 +175,7 @@ class Game2048 extends React.Component {
 }
 ```
 
-- _Dev Menu support_: On the simulator, cmd-D will bring up the developer menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )
+- _Dev Menu support_: On the simulator, cmd-D will bring up the Dev Menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )
 
 - _TV remote animations_: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.
 
diff --git a/docs/debugging.md b/docs/debugging.md
@@ -5,27 +5,32 @@ title: Debugging
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
-## Accessing the In-App Developer Menu
+## Accessing the Dev Menu
 
-You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the `⌘D` keyboard shortcut when your app is running in the iOS Simulator, or `⌘M` when running in an Android emulator on macOS and `Ctrl+M` on Windows and Linux. Alternatively for Android, you can run the command `adb shell input keyevent 82` to open the dev menu (82 being the Menu key code).
+React Native provides an in-app developer menu which offers several debugging options. You can access the Dev Menu by shaking your device or via keyboard shortcuts:
 
-![](/docs/assets/DeveloperMenu.png)
+- iOS Simulator: <kbd>Cmd ⌘</kbd> + <kbd>D</kbd> (or Device > Shake)
+- Android emulators: <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS) or <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows and Linux)
 
-> The Developer Menu is disabled in release (production) builds.
+Alternatively for Android devices and emulators, you can run `adb shell input keyevent 82` in your terminal.
 
-## Enabling Fast Refresh
+![](/docs/assets/DevMenu.png)
 
-Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. While debugging, it can help to have [Fast Refresh](fast-refresh.md) enabled. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the React Native developer menu. When enabled, most of your edits should be visible within a second or two.
+:::note
+The Dev Menu is disabled in release (production) builds.
+:::
 
-## Enabling Keyboard Shortcuts
+## Enabling Fast Refresh
 
-React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them on macOS, inside the Simulator app, open the I/O menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.
+Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. While debugging, it can help to have [Fast Refresh](fast-refresh.md) enabled. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the Dev Menu. When enabled, most of your edits should be visible within a second or two.
 
 ## LogBox
 
 Errors and warnings in development builds are displayed in LogBox inside your app.
 
-> LogBox is automatically disabled in release (production) builds.
+:::note
+LogBox is disabled in release (production) builds.
+:::
 
 ### Console Errors and Warnings
 
@@ -55,7 +60,7 @@ When syntax error occurs the full screen LogBox error will automatically open wi
 
 ## Chrome Developer Tools
 
-To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui).
+To debug the JavaScript code in Chrome, select "Open Debugger" from the Dev Menu. This will open a new tab at [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui).
 
 Select `Tools → Developer Tools` from the Chrome Menu to open the [Developer Tools](https://developer.chrome.com/devtools). You may also access the DevTools using keyboard shortcuts (`⌘⌥I` on macOS, `Ctrl` `Shift` `I` on Windows). You may also want to enable [Pause On Caught Exceptions](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511) for a better debugging experience.
 
@@ -65,7 +70,7 @@ Select `Tools → Developer Tools` from the Chrome Menu to open the [Developer T
 
 ### Debugging using a custom JavaScript debugger
 
-To use a custom JavaScript debugger in place of Chrome Developer Tools, set the `REACT_DEBUGGER` environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.
+To use a custom JavaScript debugger in place of Chrome Developer Tools, set the `REACT_DEBUGGER` environment variable to a command that will start your custom debugger. You can then select "Open Debugger" from the Dev Menu to start debugging.
 
 The debugger will receive a list of all project roots, separated by a space. For example, if you set `REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative"`, then the command `node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app` will be used to start your debugger.
 
@@ -127,7 +132,7 @@ If you prefer to avoid global installations, you can add `react-devtools` as a p
 
 ### Integration with React Native Inspector
 
-Open the in-app developer menu and choose "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
+Open the Dev Menu and choose "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
 
 ![React Native Inspector](/docs/assets/Inspector.gif)
 
@@ -151,7 +156,7 @@ Then select a React component in React DevTools. There is a search box at the to
 
 ## Performance Monitor
 
-You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.
+You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Dev Menu.
 
 <hr style={{marginTop: 25, marginBottom: 25}} />
 
@@ -187,13 +192,13 @@ You may also access these through `Debug → Open System Log...` in the iOS Simu
 
 > If you're using Create React Native App or Expo CLI, this is configured for you already.
 
-On iOS devices, open the file [`RCTWebSocketExecutor.mm`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/CoreModules/RCTWebSocketExecutor.mm) and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
+On iOS devices, open the file [`RCTWebSocketExecutor.mm`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/CoreModules/RCTWebSocketExecutor.mm) and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Dev Menu.
 
 On Android 5.0+ devices connected via USB, you can use the [`adb` command line tool](http://developer.android.com/tools/help/adb.html) to setup port forwarding from the device to your computer:
 
 `adb reverse tcp:8081 tcp:8081`
 
-Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.
+Alternatively, select "Settings" from the Dev Menu, then update the "Debug server host for device" setting to match the IP address of your computer.
 
 > If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.
 
diff --git a/docs/devsettings.md b/docs/devsettings.md
@@ -17,7 +17,7 @@ The `DevSettings` module exposes methods for customizing settings for developers
 static addMenuItem(title: string, handler: () => any);
 ```
 
-Add a custom menu item to the developer menu.
+Add a custom menu item to the Dev Menu.
 
 **Parameters:**
 
diff --git a/docs/fast-refresh.md b/docs/fast-refresh.md
@@ -3,7 +3,7 @@ id: fast-refresh
 title: Fast Refresh
 ---
 
-Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the [React Native developer menu](/docs/debugging#accessing-the-in-app-developer-menu). With Fast Refresh enabled, most edits should be visible within a second or two.
+Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle "Enable Fast Refresh" in the [React Native Dev Menu](/docs/debugging#accessing-the-in-app-developer-menu). With Fast Refresh enabled, most edits should be visible within a second or two.
 
 ## How It Works
 
diff --git a/docs/hermes.md b/docs/hermes.md
@@ -56,7 +56,7 @@ This will compile JavaScript to bytecode during build time which will improve yo
 Hermes supports the Chrome debugger by implementing the Chrome inspector protocol. This means Chrome's tools can be used to directly debug JavaScript running on Hermes, on an emulator or on a real, physical, device.
 
 :::info
-Note that this is very different with the "Remote JS Debugging" from the In-App Developer Menu documented in the [Debugging](debugging#debugging-using-a-custom-javascript-debugger) section, which actually runs the JS code on Chrome's V8 on your development machine (laptop or desktop).
+Note that this is very different with the "Remote JS Debugging" from the In-App Dev Menu documented in the [Debugging](debugging#debugging-using-a-custom-javascript-debugger) section, which actually runs the JS code on Chrome's V8 on your development machine (laptop or desktop).
 :::
 
 Chrome connects to Hermes running on device via Metro, so you'll need to know where Metro is listening. Typically this will be on `localhost:8081`, but this is [configurable](https://facebook.github.io/metro/docs/configuration). When running `yarn start` the address is written to stdout on startup.
diff --git a/docs/performance.md b/docs/performance.md
@@ -11,7 +11,7 @@ This guide is intended to teach you some basics to help you to [troubleshoot per
 
 Your grandparents' generation called movies ["moving pictures"](https://www.youtube.com/watch?v=F1i40rnpOsA) for a reason: realistic motion in video is an illusion created by quickly changing static images at a consistent speed. We refer to each of these images as frames. The number of frames that is displayed each second has a direct impact on how smooth and ultimately life-like a video (or user interface) seems to be. iOS devices display 60 frames per second, which gives you and the UI system about 16.67ms to do all of the work needed to generate the static image (frame) that the user will see on the screen for that interval. If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.
 
-Now to confuse the matter a little bit, open up the developer menu in your app and toggle `Show Perf Monitor`. You will notice that there are two different frame rates.
+Now to confuse the matter a little bit, open up the [Dev Menu](debugging.md#accessing-the-dev-menu) in your app and toggle `Show Perf Monitor`. You will notice that there are two different frame rates.
 
 ![](/docs/assets/PerfUtil.png)
 
diff --git a/docs/profile-hermes.md b/docs/profile-hermes.md
@@ -19,13 +19,13 @@ Follow the instructions below to get started profiling:
 
 ## Record a Hermes sampling profile
 
-To record a sampling profiler from the Developer Menu:
+To record a sampling profiler from the Dev Menu:
 
 1. Navigate to your running Metro server terminal.
-2. Press `d` to open the **Developer Menu.**
+2. Press `d` to open the **Dev Menu.**
 3. Select **Enable Sampling Profiler.**
 4. Execute your JavaScript by in your app (press buttons, etc.)
-5. Open the **Developer Menu** by pressing `d` again.
+5. Open the **Dev Menu** by pressing `d` again.
 6. Select **Disable Sampling Profiler** to stop recording and save the sampling profiler.
 
 A toast will show the location where the sampling profiler has been saved, usually in `/data/user/0/com.appName/cache/*.cpuprofile`
diff --git a/docs/publishing-to-app-store.md b/docs/publishing-to-app-store.md
@@ -21,7 +21,7 @@ If your application needs to access HTTP resources on production, learn how to c
 
 ### 2. Configure release scheme
 
-Building an app for distribution in the App Store requires using the `Release` scheme in Xcode. Apps built for `Release` will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.
+Building an app for distribution in the App Store requires using the `Release` scheme in Xcode. Apps built for `Release` will automatically disable the in-app Dev Menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.
 
 To configure your app to be built using the `Release` scheme, go to **Product** → **Scheme** → **Edit Scheme**. Select the **Run** tab in the sidebar, then set the Build Configuration dropdown to `Release`.
 
diff --git a/docs/running-on-device.md b/docs/running-on-device.md
diff --git a/website/architecture/architecture-glossary.md b/website/architecture/architecture-glossary.md
diff --git a/website/static/docs/assets/DevMenu.png b/website/static/docs/assets/DevMenu.png

Original file line number	Diff line number	Diff line change
@@ -672,4 +672,4 @@ As mentioned [in the Direct Manipulation section](direct-manipulation), `setNati
`672`	`672`
`673`	`673`	We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
`674`	`674`
`675`		-If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Developer Menu "FPS Monitor" tool.
	`675`	+If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ class Game2048 extends React.Component {`
`89`	`89`	`}`
`90`	`90`	```
`91`	`91`
`92`		`-- _Dev Menu support_: On the emulator, cmd-M will bring up the developer menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )`
	`92`	`+- _Dev Menu support_: On the emulator, cmd-M will bring up the Dev Menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )`
`93`	`93`
`94`	`94`	`- _Known issues_:`
`95`	`95`
`@@ -175,7 +175,7 @@ class Game2048 extends React.Component {`
`175`	`175`	`}`
`176`	`176`	```
`177`	`177`
`178`		`-- _Dev Menu support_: On the simulator, cmd-D will bring up the developer menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )`
	`178`	`+- _Dev Menu support_: On the simulator, cmd-D will bring up the Dev Menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )`
`179`	`179`
`180`	`180`	- _TV remote animations_: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.
`181`	`181`