diff --git a/README.md b/README.md index 99631fa..036c007 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,7 @@ - [Getting started](#getting-started) - [Deploy](#deploy) - [[New!] Local Development](#local-development) + - [Using React DevTools](#dev-tools) - [Usage](#usage) - [The included sample app](#the-included-sample-app) - [[New!] Typescript](#new-typescript) @@ -186,6 +187,37 @@ After running the start command, navigate to your spreadsheet and open one of th
+### 🔍 Using React DevTools + +React DevTools is a tool that lets you inspect the React component hierarchies during development. + +
+ Instructions for installing React DevTools + +
+ +You will need to use the "standalone" version of React DevTools since our React App is running in an iframe ([more details here](https://github.com/facebook/react/tree/master/packages/react-devtools#usage-with-react-dom)). + +1. In your repo install the React DevTools package as a dev dependency: + + ```bash + npm install -D react-devtools + ``` + +2. In a new terminal window run `npx react-devtools` to launch the DevTools standalone app. + +3. Add `` to the top of your `` in your React app, e.g. in the [index.html](https://github.com/enuchi/React-Google-Apps-Script/blob/e73e51e56e99903885ef8dd5525986f99038d8bf/src/client/dialog-demo-bootstrap/index.html) file in the sample Bootstrap app. + +4. Deploy your app (`npm run deploy:dev`) and you should see DevTools tool running and displaying your app hierarchy. + + + +5. Don't forget to remove the `