Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
sebmarkbage committed Jan 2, 2014
0 parents commit 9879bdc
Show file tree
Hide file tree
Showing 33 changed files with 17,838 additions and 0 deletions.
18 changes: 18 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# osx noise
.DS_Store
profile

# xcode noise
build/*
*.mode1
*.mode1v3
*.mode2v3
*.perspective
*.perspectivev3
*.pbxuser
*.xcworkspace
xcuserdata

# svn & cvs
.svn
CVS
3 changes: 3 additions & 0 deletions .gitmodules
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[submodule "blink"]
path = blink
url = git@github.com:sebmarkbage/blink-devtools.git
63 changes: 63 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# Contributing to React

React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on facebook.com. We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and preempts some questions you may have.

## Our Development Process

Some of the core team will be working directly on GitHub. These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in.

### `master` is unsafe

We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and always version appropriately so you can lock into a specific version if need be.

### Pull Requests

The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.

*Before* submitting a pull request, please make sure the following is done…

1. Fork the repo and create your branch from `master`.
2. If you've added code that should be tested, add tests!
3. If you've changed APIs, update the documentation.
4. Ensure the test suite passes (`grunt test`).
5. Make sure your code lints (`grunt lint`) - we've done our best to make sure these rules match our internal linting guidelines.
6. If you haven't already, complete the CLA.

### Contributor License Agreement ("CLA")

In order to accept your pull request, we need you to submit a CLA. You only need to do this once, so if you've done this for another Facebook open source project, you're good to go. If you are submitting a pull request for the first time, just let us know that you have completed the CLA and we can cross-check with your GitHub username.

Complete your CLA here: <https://developers.facebook.com/opensource/cla>

## Bugs

### Where to Find Known Issues

We will be using GitHub Issues for our public bugs. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.

### Reporting New Issues

The best way to get your bug fixed is to provide a reduced test case. jsFiddle, jsBin, and other sites provide a way to give live examples. Those are especially helpful though may not work for `JSX`-based code.

### Security Bugs

Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. With that in mind, please do not file public issues and go through the process outlined on that page.

## How to Get in Touch

* IRC - [#reactjs on freenode](http://webchat.freenode.net/?channels=reactjs)
* Mailing list - [reactjs on Google Groups](http://groups.google.com/group/reactjs)

## Coding Style

* Use semicolons;
* Commas last,
* 2 spaces for indentation (no tabs)
* Prefer `'` over `"`
* `"use strict";`
* 80 character line length
* "Attractive"

## License

By contributing to React, you agree that your contributions will be licensed under the [Apache License Version 2.0 (APLv2)](LICENSE).
30 changes: 30 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
BSD License

For the react-devtools software

Copyright (c) 2013, Facebook, Inc. All rights reserved.

Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.

* Neither the name Facebook nor the names of its contributors may be used to
endorse or promote products derived from this software without specific
prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
23 changes: 23 additions & 0 deletions PATENTS
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
Additional Grant of Patent Rights

“Software” means the react-devtools software distributed by Facebook, Inc.

Facebook hereby grants you a perpetual, worldwide, royalty-free, non-exclusive,
irrevocable (subject to the termination provision below) license under any
rights in any patent claims owned by Facebook, to make, have made, use, sell,
offer to sell, import, and otherwise transfer the Software. For avoidance of
doubt, no license is granted under Facebook’s rights in any patent claims that
are infringed by (i) modifications to the Software made by you or a third party,
or (ii) the Software in combination with any software or other technology
provided by you or a third party.

The license granted hereunder will terminate, automatically and without notice,
for anyone that makes any claim (including by filing any lawsuit, assertion or
other action) alleging (a) direct, indirect, or contributory infringement or
inducement to infringe any patent: (i) by Facebook or any of its subsidiaries or
affiliates, whether or not such claim is related to the Software, (ii) by any
party if such claim arises in whole or in part from any software, product or
service of Facebook or any of its subsidiaries or affiliates, whether or not
such claim is related to the Software, or (iii) by any party relating to the
Software; or (b) that any right in any patent claim of Facebook is invalid or
unenforceable.
101 changes: 101 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
# React Developer Tools

React Developer Tools is a Chrome extension allow you to inspect the React
component hierarchy in the Chrome Developer Tools (formerly WebKit Web
Inspector).

## Installation

### Easy

[Install the extension from Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)

If you inspect an element or launch the developer tools on a React page, you
should see an extra tab called **React** in the inspector.

### Hard

Clone the GitHub repository.

```
git clone git@github.com:facebook/react-devtools.git
```

Open the URL [chrome://extensions/](chrome://extensions/) in your browser.

Check the box for **Developer Mode**

Click the button **Load unpacked extension...**

Select the folder where you downloaded the repository.

The extension is now installed.

### The React Tab Doesn't Show Up?

The current version of React Developer Tools is not compatible with all build
systems. It tries to load the React runtime by either detecting a global called
`React`, or by calling `require('React')` or `require('react')` in the global
scope. Your page needs to support this to be compatible with the Developer
Tools.

You can test this on the [React website](http://facebook.github.io/react/)
or by inspecting [Facebook](https://www.facebook.com/).

## Usage

You should have a new tab called **React** in your Chrome DevTools. This shows
you the root React components that was rendered on the page, as well as the
subcomponents that they ended up rendering.

By selecting one of the components in the tree you can inspect and edit it's
current props and state in the panel on the right. In the breadcrumbs you can
inspect the selected Component, the Component that created it, the Component
that created that one, and so on.

### ProTips

If you inspect a React element on the page using the regular **Elements** tab,
then switch over to the **React** tab, that element will be automatically
selected in the React tree.

Similarly, if you have a breakpoint within the render phase of a Component, that
will be automatically selected in the **React** tab. This allows you to step
through the rendering tree and see how one Component affects another one.

By breaking on errors, you can easily find which component threw an error during
rendering, and what props lead to it.

## Contribute

### Test Environment

Open the Chrome DevTools on any React page by inspecting an element.

In a different tab goto [chrome://inspect/](chrome://inspect/). Open the last
section called **Others**. This contain your DevTools instance. Click the
**inspect** link next to it. That should open up another DevTools instance,
which is inspecting the first one, including the React extension. Inception.

If you don't have a simple React page available you can use the built-in test
page. Open the URL [chrome://extensions/](chrome://extensions/) again. Look for
the unique **ID** of the extension. E.g:

```
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/tests/page.html
```

### Project Structure

The purpose of this project is to trail the DevTools of the Chromium project.
Therefore the project is structured similarly. For example this project
doesn't use a module system. Each file is inserted using a script tag in the
global scope of the page. Files are isolated by global namespaces.

Please read the [Structure document](STRUCTURE.md) for more information about
the folder structure of the project.

### More…

There's only so much we can cram in here. To read more about the community and
guidelines for submitting pull requests, please read the [Contributing document](CONTRIBUTING.md).
44 changes: 44 additions & 0 deletions STRUCTURE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# Project Structure

###/

The root folder contains the main files used by the Chrome extension.
`main.html` bootstraps the extension.

###/blink

This Git submodule contains a copy of the DevTools from the Blink project.

This folder should never diverge from the upstream version. That way we can
keep a consistent look and reuse a lot of UI elements from the built-in Chrome
Developer Tools.

Only a small subset of these files are currently in use. The holes are patched
using files from the views folder.

###/views

The views folder contains views that are specific to the React Developer Tools.

`WebInspectorPatch.js` monkey patches all the WebInspector components that hook
into internals that we don't have access to from a Chrome extension.

###/agents

These are stubs APIs to access the pseudo DOM representation of React components
and JavaScript runtime objects. The ReactInspectorAgent is the client that
communicates cross-process to the inspected page. Since this is done
cross-process, these APIs are all asynchronous.

###/injected

These files gets evaluated the context of the inspected page. They're
essentially the host that the agents communicate with.

The format of these files is a single function that gets passed it's
dependencies by ReactInspectorAgent.

###/tests

This folder contains a sample React page. It's intended as a relatively stable
page intended to make sure all features works as expected.
Loading

0 comments on commit 9879bdc

Please sign in to comment.