From d65681b8142cf615c5a103b48e5f7894e61af98f Mon Sep 17 00:00:00 2001 From: maxlindbergh <117544656+maxlindbergh@users.noreply.github.com> Date: Wed, 25 Sep 2024 16:08:55 -0400 Subject: [PATCH 1/3] README has more detailed description and installation instructions --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index 0dcde1bc173..bc07d9e5771 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,9 @@ Source code for React Native's debugger frontend, based on Chrome DevTools. This project is periodically compiled and checked into the React Native repo as [`@react-native/debugger-frontend`](https://github.com/facebook/react-native/tree/main/packages/debugger-frontend). +This project provides the source code for React Native's debugging frontend, which is based on Chrome DevTools. It +enables developers working on React Native apps to debug their code more efficiently by leveraging Chrome DevTools functionality. + This repository is a fork of [ChromeDevTools/devtools-frontend](https://github.com/ChromeDevTools/devtools-frontend). ## Development @@ -21,18 +24,28 @@ This repository is a fork of [ChromeDevTools/devtools-frontend](https://github.c 1. Build continuously with a file watcher: + This option continuously rebuilds the project whenever a file changes. It's best suited for active development as it allows you to see changes + in real time, but it can consume more system resources, especially in larger projects. Use this during iterative work when you need fast + feedback. + ```sh npm run watch ``` 1. Build with the default config once: + This single, non-watched build compiles the project with the default configuration. It’s quicker and less resource-heavy than the watch build, + making it ideal for testing changes without long-term commitment to resource usage. + ```sh npm run build ``` 1. Build with the release config once: + This one-time build optimizes the code for production use. It’s slower to compile and can take significantly more time but results in a stable, + high-performance version suitable for production environments. Use this when preparing the project for final deployment or release. + ```sh npm run build-release ``` From 05d4ca56e4c6e04330bcfdaf8044266c67c9ff3d Mon Sep 17 00:00:00 2001 From: maxlindbergh <117544656+maxlindbergh@users.noreply.github.com> Date: Wed, 25 Sep 2024 16:24:07 -0400 Subject: [PATCH 2/3] Update README.md to have example usage --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index bc07d9e5771..880f92f5fcb 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,17 @@ enables developers working on React Native apps to debug their code more efficie This repository is a fork of [ChromeDevTools/devtools-frontend](https://github.com/ChromeDevTools/devtools-frontend). +##Example usage +After building the project, you can use the React Native Debugger frontend to inspect and debug your React Native app. First, serve the built files +locally using: + +```sh +python3 -m http.server 8000 --directory out/Default/gen/front_end +``` +Then, open your browser and navigate to http://localhost:8000/inspector.html for general debugging, or http://localhost:8000/rn_inspector.html for +React Native-specific debugging. This allows you to inspect UI components, monitor network requests, and analyze performance metrics directly in +your browser using Chrome DevTools. + ## Development ### Initial setup From 90030d08d19f429567c02d922138397f4093b31c Mon Sep 17 00:00:00 2001 From: maxlindbergh <117544656+maxlindbergh@users.noreply.github.com> Date: Wed, 25 Sep 2024 16:24:41 -0400 Subject: [PATCH 3/3] Fix headings --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 880f92f5fcb..b96b20a9086 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ enables developers working on React Native apps to debug their code more efficie This repository is a fork of [ChromeDevTools/devtools-frontend](https://github.com/ChromeDevTools/devtools-frontend). -##Example usage +## Example usage After building the project, you can use the React Native Debugger frontend to inspect and debug your React Native app. First, serve the built files locally using: