React developer tools github

React developer tools github DEFAULT

npm

React DevTools is available as a built-in extension for Chrome and Firefox browsers. This package enables you to debug a React app elsewhere (e.g. a mobile browser, an embedded webview, Safari, inside an iframe).

It works both with React DOM and React Native.

React DevTools screenshot

Installation

Install the package. Because this is a development tool, a global install is often the most convenient:

# Yarn yarn global add react-devtools # NPM npm install -g react-devtools

If you prefer to avoid global installations, you can add as a project dependency. With Yarn, you can do this by running:

yarn add --dev react-devtools

With NPM you can just use NPX:

Usage with React Native

Run from the terminal to launch the standalone DevTools app:

If you're not in a simulator then you also need to run the following in a command prompt:

adb reverse tcp:8097 tcp:8097

If you're using React Native 0.43 or higher, it should connect to your simulator within a few seconds.

Integration with React Native Inspector

You can open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

React Native Inspector

However, when 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

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says . This step is essential.

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 in the Chrome console, letting you inspect its props, state, and instance properties.

React DevTools Chrome Console Integration

Usage with React DOM

The standalone shell can also be useful with React DOM (e.g. to debug apps in Safari or inside of an iframe).

Run from the terminal to launch the standalone DevTools app:

Add as the very first tag in the of your page when developing:

<!doctype html><htmllang="en"><head><scriptsrc="http://localhost:8097"></script>

This will ensure the developer tools are connected. Don’t forget to remove it before deploying to production!

If you install as a project dependency, you may also replace the suggested above with a JavaScript import (). It is important that this import comes before any other imports in your app (especially before ). Make sure to remove the import before deploying to production, as it carries a large DevTools client with it. If you use Webpack and have control over its configuration, you could alternatively add as the first item in the array of the development-only configuration, and then you wouldn’t need to deal either with tags or statements.

Advanced

By default DevTools listen to port on . If you need to customize host, port, or other settings, see the package instead.

FAQ

The React Tab Doesn't Show Up

If you are running your app from a local URL, don't forget to check "Allow access to file URLs" on the Chrome Extensions settings page. You can find it by opening Settings > Extensions:

Allow access to file URLs

Or you could develop with a local HTTP server like .

The React tab won't show up if the site doesn't use React, or if React can't communicate with the devtools. When the page loads, the devtools sets a global named , then React communicates with that hook during initialization. You can test this on the React website or by inspecting Facebook.

If your app is inside of CodePen, make sure you are registered. Then press Fork (if it's not your pen), and then choose Change View > Debug. The Debug view is inspectable with DevTools because it doesn't use an iframe.

If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment, try the standalone version instead. Chrome apps are currently not inspectable.

If you still have issues please report them. Don't forget to specify your OS, browser version, extension version, and the exact instructions to reproduce the issue with a screenshot.

Local development

The standalone DevTools app can be built and tested from source following the instructions below.

Prerequisite steps

DevTools depends on local versions of several NPM packages1 also in this workspace. You'll need to either build or download those packages first.

1 Note that at this time, an experimental build is required because DevTools depends on the API.

Build from source

To build dependencies from source, run the following command from the root of the repository:

Download from CI

To use the latest build from CI, run the following command from the root of the repository:

./scripts/release/download-experimental-build.js

Build steps

You can test the standalone DevTools by running the following:

  • First, complete the prerequisite steps above! If you don't do it, none of the steps below will work.
  • Then, run and in
  • Run in this folder
  • Refresh the app after it has recompiled a change
  • For React Native, copy to its to test your changes.
Sours: https://www.npmjs.com/package/react-devtools

An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.

Features / Improvements:

  • Improve inspection/rendering of nested Arrays
  • Improve inspection of TypedArrays (rendered similarly to Arrays)
  • Improve display of ArrayBuffers and DataViews (Shows size, no deep inspection)
  • Iterables are rendered as
  • Iterables are read only
  • Iterables entries are rendered as lists/arrays
  • Inspecting Iterables/Immutable values is greatly improved (but keyed collections need improving. See below)
  • ES6 Map/Set objects no longer throw an error

Addresses much of Issue #52 and was inspired by PR #149, particularly @gaearon's comment

Code Change Summary:

  • Moved duplicated to separate file
  • Refactored to improve readability (in addition to enhancements)
  • Added and propteries to for dehydrated values where appropriate
  • Component check for when rendering
  • Added cases to and in addition to some refactoring for readbility
  • Added several props to empty elements to to demonstrate changes.

Caveats / For future Improvement

Typed Arrays are set read only in the inspector with these changes - Editing them (in the current released version) would cause them to be converted to objects, but it should be possible to handle this.

Iterators/Iterators are read only for fairly obvious reasons, however it might be reasonable to implement a live-edit feature for built-in iterables (i.e. , , ).

Improvement of Keyed iterables/iterators

With these changes the inspector / renders entries of iterators as Arrays of arrays i.e. rather than . Determining if an iterable is a keyed iterable is tricky because an iterator entry can be of any value. Simply checking that entries are arrays of length is insufficient because a Set of arrays (see in ) would 'break' this approach. In addition ES6 and allow complex keys and use Same-value-zero equality to determine uniqueness. This means the keys/attribute strings in the inspectors cannot easily be converted to strings through either or without breaking correctness in some cases.

Requesting Feedback & Help for:

  • Code style, improvements, etc
  • UI/UX/Styling/Color tweaks for , , etc?
  • Ideas for handling keyed iterable case
  • Community assistance in testing with other collection libraries e.g. seamless-immutable, etc

Finally Substantial unit test coverage is on it's way, I just wanted to get some eyeballs on this first!

CLA Signed GH Review: review-needed 
Sours: https://bestofreactjs.com/repo/facebook-react-devtools-react-development-tools
  1. Samsung s20 setup guide
  2. Turbo 400 transmission weight
  3. Cbj top prospects
  4. S10 not receiving texts
  5. Sabertooth 990fx ram compatibility

Introducing the New React DevTools

We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!

What’s changed?

A lot has changed in version 4! At a high level, this new version should offer significant performance gains and an improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects.

DevTools version 4 screenshot

Visit the interactive tutorial to try out the new version or see the changelog for demo videos and more details.

Which versions of React are supported?

  • -: Not supported
  • : Supported (except for the new component filters feature)
  • : Supported

  • -: Not supported
  • : Supported

How do I get the new DevTools?

React DevTools is available as an extension for Chrome and Firefox. If you have already installed the extension, it should update automatically within the next couple of hours.

If you use the standalone shell (e.g. in React Native or Safari), you can install the new version from NPM:

Where did all of the DOM elements go?

The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies. Host nodes (e.g. HTML , React Native ) are hidden by default, but this filter can be disabled:

DevTools component filters

How do I get the old version back?

If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM:

For older versions of React DOM (v0.14 or earlier) you will need to build the extension from source:

Thank you!

We’d like to thank everyone who tested the early release of DevTools version 4. Your feedback helped improve this initial release significantly.

We still have many exciting features planned and feedback is always welcome! Please feel free to open a GitHub issue or tag @reactjs on Twitter.

Is this page useful?Edit this page

Sours: https://reactjs.org/blog/2019/08/15/new-react-devtools.html

Redux DevTools Extension

Join the chat at https://gitter.im/zalmoxisus/redux-devtools-extensionPRs WelcomeOpenCollectiveOpenCollective

Demo

Installation

1. For Chrome

  • from Chrome Web Store;
  • or download from last releases, unzip, open url and turn on developer mode from top left and then click; on and select the extracted folder for use
  • or build it with and load the extension's folder;
  • or run it in dev mode with and load the extension's folder.

2. For Firefox

3. For Electron

4. For other browsers and non-browser environment

Usage

Note that starting from v2.7, was renamed to / .

1. With Redux

1.1 Basic store

For a basic Redux store simply add:

const store = createStore( reducer, /* preloadedState, */ + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() );

Note that argument is optional in Redux's .

For universal ("isomorphic") apps, prefix it with .

constcomposeEnhancers=(typeofwindow!=='undefined'&&window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__)||compose;

For TypeScript use npm package, which contains all the definitions, or just use (see Recipes for an example).

constcomposeEnhancers=(windowasany).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__||compose;

In case ESLint is configured to not allow using the underscore dangle, wrap it like so:

+ /* eslint-disable no-underscore-dangle */ const store = createStore( reducer, /* preloadedState, */ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); + /* eslint-enable */

Note: Passing enhancer as last argument requires [email protected]>=3.1.0. For older versions apply it like here or here. Don't mix the old Redux API with the new one.

You don't need to npm install when using the extension (that's a different lib).

1.2 Advanced store setup

If you setup your store with middleware and enhancers, change:

import { createStore, applyMiddleware, compose } from 'redux'; + const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(- const store = createStore(reducer, /* preloadedState, */ compose( applyMiddleware(...middleware) ));

Note that when the extension is not installed, we’re using Redux compose here.

To specify extension’s options, use it like so:

constcomposeEnhancers=typeofwindow==='object'&&window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...}) : compose;constenhancer=composeEnhancers(applyMiddleware(...middleware),// other store enhancers if any);conststore=createStore(reducer,enhancer);

See the post for more details.

1.3 Use package from npm

To make things easier, there's an npm package to install:

and to use like so:

import{createStore,applyMiddleware}from'redux';import{composeWithDevTools}from'redux-devtools-extension';conststore=createStore(reducer,composeWithDevTools(applyMiddleware(...middleware),// other store enhancers if any));

To specify extension’s options:

import{createStore,applyMiddleware}from'redux';import{composeWithDevTools}from'redux-devtools-extension';constcomposeEnhancers=composeWithDevTools({// Specify name here, actionsBlacklist, actionsCreators and other options if needed});conststore=createStore(reducer,/* preloadedState, */composeEnhancers(applyMiddleware(...middleware),// other store enhancers if any));

There’re just few lines of code added to your bundle.

In case you don't include other enhancers and middlewares, just use :

import{createStore}from'redux';import{devToolsEnhancer}from'redux-devtools-extension';conststore=createStore(reducer,/* preloadedState, */devToolsEnhancer(// Specify name here, actionsBlacklist, actionsCreators and other options if needed));

1.4 Using in production

It's useful to include the extension in production as well. Usually you can use it for development.

If you want to restrict it there, use :

import{createStore}from'redux';import{devToolsEnhancer}from'redux-devtools-extension/logOnlyInProduction';conststore=createStore(reducer,/* preloadedState, */devToolsEnhancer(// options like actionSanitizer, stateSanitizer));

or with middlewares and enhancers:

import{createStore,applyMiddleware}from'redux';import{composeWithDevTools}from'redux-devtools-extension/logOnlyInProduction';constcomposeEnhancers=composeWithDevTools({// options like actionSanitizer, stateSanitizer});conststore=createStore(reducer,/* preloadedState, */composeEnhancers(applyMiddleware(...middleware),// other store enhancers if any));

You'll have to add in your Webpack config for the production bundle (to envify). If you use , it already does it for you.

If you're already checking when creating the store, include for production environment.

If you don’t want to allow the extension in production, just use .

See the article for more details.

1.5 For React Native, hybrid, desktop and server side Redux apps

For React Native we can use , which already included the same API with Redux DevTools Extension.

For most platforms, include 's store enhancer, and from the extension's context menu choose 'Open Remote DevTools' for remote monitoring.

2. Without Redux

See integrations and the blog post for more details on how to use the extension with any architecture.

Docs

Demo

Live demos to use the extension with:

Also see folder.

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

Sours: https://github.com/zalmoxisus/redux-devtools-extension

Github tools react developer

Best React Developer Tools 2021

If you are a React developer in Europe, good news — you're in high demand! Europe's IT worker shortage is projected to grow, meaning job openings for React developers are on the up and up.

That being said, it's always important to expand your skillset to stay up to date with the latest in the world of React to be a competitive player in the job market. Let's talk about what React developer tools are being used in 2021 and why you should include them in your stack.

1. Reactide

reactide developer tool

Reactide is the first tailored IDE for React web application development. It offers super convenient features such as hot module reloading, streamlined configurations, and component visualisation. I highly recommend this IDE to all React developers.

However, if you prefer something else, go forVSCode, which is the best IDE for JavaScript development in general.

Head over to GitHub if you want to learn more about Reactide. There you'll see how to get started using the tool so you can add it to your next project. 

2. Create React App

create react app developer tool

At number two we have the Create React App from Facebook. This is a hugely popular tool among React developers, with over 88K stars on GitHub!

Basically, the Create React App is the best starting point for any new React project. You can set up your React app with a single command. No build configurations are required. You don’t have to worry about the best project structure or which support modules to include; create-react-app will handle it all!

So start here if you are planning a new react project. Obviously, there’s more to the tool than I’ve described, I suggest you go and read the documentation so you don’t miss any of the other features. 

You can find it all straight on GitHub. Enjoy!

3. Bit

bit react developer tool

Bit is an open-source tool on GitHub with over 13K stars. This tool is a great option for creating different React components and then sharing them. Bit allows you to build your React application as a collection of independent components (a novel concept to build scalable React apps).

With Bit, you also have access to their third-party store, where you can search and download components created by others and render them to fit your specific project. Obviously, this is super helpful because you don’t have to create everything from scratch. 

It strongly supports React and React Native, having automated steps to create components, write unit tests and add documentation. It works perfectly well with Microfrontends and handles the complexities of code sharing between applications as well.

4. Storybook

storybook react developer app tool

Storybook is another open-source tool with over 63K GitHub stars. Storybook allows you to create and write UI components and pages quicker. Coding for visual components is a constant back-and-forth between code and the webpage. 

Storybook makes this process a lot smoother (and easier) with their UI editor. While you are developing each visual component you can inspect and interact with it — for better productivity and a generally better process all around. 

Storybook includes a sandbox for developing UIs in isolation, mocking difficult-to-reach use cases, documenting use cases as stories, and automating testing.

Another reason why I recommend using Storybook is that it’s compatible with Vue.js and Angular as well. That means you can use this tool across multiple projects. Where to start? Storybook’s own tutorials are really well made plus they support a number of different languages, so I suggest you start your journey there!  

5. Rekit

rekit-studio

Rekit is an all-in-one solution toolkit for creating modern, scalable web applications using React, Redux, and React-router.

Rekit allows you to concentrate on business logic rather than dealing with large libraries, patterns, configurations, and so on. Rekit now creates apps that are bootstrapped by create-react-app.

With Rekit you’ll also have access to some nice project management tools like the Rekit Studio, which is going to give you a nice overview of all the components, pages, and reducers. Pair this tool with the Create React App!

Check out the documentation to get up to speed with this tool! 

6. React Developer Tools

react developer tools

React Developer Tools is a Chrome, Firefox, or Edge (Chromium) Developer Tools extension that allows you to inspect the React component hierarchy. You’ll be able to see the list of components rendered on the screen plus whatever subcomponents are there as well. 

It is still the most popular and helpful way for developers to debug React apps since they can thoroughly inspect each component and with a bit of testing, easily identify where the issues are. You can also measure your app’s performance to see if everything is running smoothly.  

Along with these tools, you can use tools like React Proto, React Cosmos, React Styleguidist, and Evergreen to make the development and testing process easier and more organized.

I strongly recommend React Developer Tools if you are serious about react-related development. If you want to familiarize yourself with all the features, this tutorial will get you up to speed quickly. 

Conclusion

There are many more great tools out there for React developers, these are just my top picks. Hopefully, these modern React developer tools make it easier for you to create, manage, debug, and document applications.

Good luck out there 🙏

Sours: https://cult.honeypot.io/reads/best-react-developer-tools-2021/
Inspect and Debug React Components for beginners - React Developer Tools Chrome Extension

This extension requires permissions to access the page's React tree, but it does not transmit any data remotely. It is fully open source, and you can find its source code at https://github.com/facebook/react/tree/master/packages/react-devtools-extensions.

If you think this add-on violates Mozilla's add-on policies or has security or privacy issues, please report these issues to Mozilla using this form.

Please don't use this form to report bugs or request add-on features; this report will be sent to Mozilla and not to the add-on developer.

This add-on needs to:

  • Input data to the clipboard
  • Extend developer tools to access your data in open tabs
  • Access your data for all websites

Bugfix
* Show different error boundary UI for timeouts than normal errors (bvaughn in #22483)
* Fixed bug where deleting a component filter would also close the settings modal (Biki-das in #22484)

Sours: https://addons.mozilla.org/en-US/firefox/addon/react-devtools/

Now discussing:

reduxjs / redux-devtools Public

GitHub Workflow StatusPRs Welcome

Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations).

It can be used as a browser extension (for Chrome, Edge and Firefox), as a standalone app or as a React component integrated in the client app.

image

Note that this repository is work in progress for the monorepo, which will merge all the packages. Please refer to Redux DevTools Extension and Redux DevTools package.

Documentation

License

MIT

Sours: https://github.com/reduxjs/redux-devtools


2068 2069 2070 2071 2072