This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 9879bdc
Showing
33 changed files
with
17,838 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
Oops, something went wrong.