Updated README docs, example screenshots, etc

Author: Brian Vaughn

packages/react-devtools-core/README.md

@@ -12,20 +12,17 @@ This is similar requiring the `react-devtools` package, but provides several con
 
 ```js
 const { connectToDevTools } = require("react-devtools-core");
-connectToDevTools({
-  // Config options
-});
-
+connectToDevTools(config);
 ```
 
 Run `connectToDevTools()` in the same context as React to set up a connection to DevTools.  
 Be sure to run this function *before* importing e.g. `react`, `react-dom`, `react-native`.
 
-The `options` object may contain:
+The `config` object may contain:
 * `host: string` (defaults to "localhost") - Websocket will connect to this host.
 * `port: number` (defaults to `8097`) - Websocket will connect to this port.
 * `websocket: Websocket` - Custom websocked to use. Overrides `host` and `port` settings if provided.
-* `resolveNativeStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
+* `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
 * `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React.
 
 ## `react-devtools-core/standalone`
@@ -42,3 +39,15 @@ require("react-devtools-core/standalone")
 ```
 
 Reference the `react-devtools` package for a complete integration example.
+
+## Development
+
+Watch for changes made to the backend entry point and rebuild:
+```sh
+yarn start:backend
+```
+
+Watch for changes made to the standalone UI entry point and rebuild:
+```sh
+yarn start:standalone
+```

packages/react-devtools-extensions/README.md

@@ -1,17 +1,22 @@
 This is the source code for the React DevTools browser extension.
 
-# Installation
+## Installation
 
 The easiest way to install this extension is as a browser add-on:
 * [Chrome web store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
 * [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
 
-# Build
+## Development
 
 You can also build and install from source:
 ```sh
 yarn install
 
-yarn build:chrome # builds at "packages/react-devtools-extensions/chrome/build"
-yarn build:firefox # builds at "packages/react-devtools-extensions/firefox/build"
+cd packages/react-devtools-extensions/
+
+yarn build:chrome # => packages/react-devtools-extensions/chrome/build
+yarn run test:chrome # Test Chrome extension
+
+yarn build:firefox # => packages/react-devtools-extensions/firefox/build
+yarn run test:firefox # Test Firefox extension
 ```

packages/react-devtools-inline/README.md

@@ -21,24 +21,32 @@ The frontend and backend can be initialized in any order, but **the backend must
 ### `react-devtools-inline/backend`
 
 * **`initialize(contentWindow)`** -
-Installs the global hook on the window. This hook is how React and DevTools communicate. **This method must be called before React is loaded.** (This means before any `import` or `require` statements!)
+Installs the global hook on the window. This hook is how React and DevTools communicate. **This method must be called before React is loaded.**<sup>2</sup>
 * **`activate(contentWindow)`** -
 Lets the backend know when the frontend is ready. It should not be called until after the frontend has been initialized, else the frontend might miss important tree-initialization events.
 
 ```js
 import { activate, initialize } from 'react-devtools-inline/backend';
 
+// This should be the iframe the React application is running in.
+const iframe = document.getElementById(frameID);
+const contentWindow = iframe.contentWindow;
+
 // Call this before importing React (or any other packages that might import React).
-initialize();
+initialize(contentWindow);
+
+// Initialize the frontend...
 
 // Call this only once the frontend has been initialized.
-activate();
+activate(contentWindow);
 ```
 
+<sup>2</sup> The backend must be initialized before React is loaded. (This means before any `import` or `require` statements or `<script>` tags that include React.)
+
 ### `react-devtools-inline/frontend`
 
 * **`initialize(contentWindow)`** -
-Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly<sup>2</sup>.
+Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly<sup>3</sup>.
 
 ```js
 import { initialize } from 'react-devtools-inline/frontend';
@@ -52,7 +60,7 @@ const contentWindow = iframe.contentWindow;
 const DevTools = initialize(contentWindow);
 ```
 
-<sup>2</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.unstable_createRoot` or `ReactDOM.unstable_createSyncRoot`. It should not be rendered with `ReactDOM.render`.
+<sup>3</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.unstable_createRoot` or `ReactDOM.unstable_createSyncRoot`. **It should not be rendered with `ReactDOM.render`.**
 
 ## Examples
 
@@ -143,4 +151,11 @@ iframe.onload = () => {
     "*"
   );
 };
+```
+
+## Development
+
+Watch for changes made to the source code and rebuild:
+```sh
+yarn start
 ```

packages/react-devtools-shell/README.md

@@ -1 +1,17 @@
-Harness for testing local changes to the `react-devtools-inline` and `react-devtools-shared` packages.
+Harness for testing local changes to the `react-devtools-inline` and `react-devtools-shared` packages.
+
+## Development
+
+This target should be run in parallel with the `react-devtools-inline` package. The first step then is to watch for changes to that target:
+```sh
+cd packages/react-devtools-inline 
+
+yarn start
+```
+
+Next, watch for changes to the test harness:
+```sh
+cd packages/react-devtools-shell
+
+yarn start
+```

packages/react-devtools/README.md

@@ -4,7 +4,7 @@ React DevTools is available as a built-in extension for Chrome and Firefox brows
 
 It works both with React DOM and React Native.
 
-<img src="http://i.imgur.com/IXeHiZD.png" width="600" alt="Screenshot of React DevTools running with React Native">
+![React DevTools screenshot](https://user-images.githubusercontent.com/29597/63811956-bdd9b580-c8dd-11e9-8962-c568e475c425.png)
 
 ## Installation
 Install the `react-devtools` package. Because this is a development tool, a global install is often the most convenient:
@@ -47,7 +47,8 @@ You can open the [in-app developer menu](https://facebook.github.io/react-native
 
 However, when `react-devtools` is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
 
-![React DevTools Inspector Integration](http://i.imgur.com/wVgV9RP.gif)
+![React DevTools Inspector Integration](https://user-images.githubusercontent.com/29597/63811958-be724c00-c8dd-11e9-8587-37357334a0e1.gif)
+
 
 You can choose "Hide Inspector" in the same menu to exit this mode.
 
@@ -61,7 +62,7 @@ Make sure that the dropdown in the top left corner of the Chrome console says `d
 
 Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as `$r` in the Chrome console, letting you inspect its props, state, and instance properties.
 
-![React DevTools Chrome Console Integration](http://i.imgur.com/Cpvhs8i.gif)
+![React DevTools Chrome Console Integration](https://user-images.githubusercontent.com/29597/63811957-be724c00-c8dd-11e9-9d1d-8eba440ef948.gif)
 
 
 ## Usage with React DOM
@@ -90,7 +91,7 @@ This will ensure the developer tools are connected. **Don’t forget to remove i
 
 By default DevTools listen to port `8097` on `localhost`. If you need to customize host, port, or other settings, see the `react-devtools-core` package instead.
 
-## Developing
+## Development
 
 * Run `yarn start:backend` and `yarn start:standalone` in `../react-devtools-core`
 * Run `yarn start` in this folder