react developer tools safari

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.

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?

• 0 - 14.x : Not supported
• 15.x : Supported (except for the new component filters feature)
• 16.x : Supported

react-native

• 0 - 0.61.x : Not supported
• 0.62 : 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 <div> , React Native <View> ) are hidden by default , but this filter can be disabled:

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:

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 .

• Software/ IT Staffing
• Project Management
• Technology Architecture
• Web Development
• Mobile Development
• App Development
• UI/ UX Design
• MVP Development
• SaaS Development
• API Development
• QA & Testing
• LabVIEW icon LabVIEW

DEV Community

Posted on Nov 23, 2021 • Originally published at upbeatcode.com on Jul 10, 2021

How to Use React Developer Tools

One tool that comes in handy when developing React applications is React Dev Tools. It allows you to inspect React component hierarchies in the browser developer tools. And in this guide, we're gonna learn how to use it!

How to Install React Dev Tools

To start using React developer tools. We need to install it as a browser extension. Click one of the links below to install it. Currently, the extension is supported by these browsers:

Once you have developer tools installed. It's time to start using them.

Opening React Dev Tools

To open the extension. Right-click anywhere in the browser window and click on Inspect. Additionally, you can open it by pressing F12. This will open browser developer tools with all the usual tabs like Elements, Console, etc.

Because we installed React dev tools extension. We get access to 2 new tabs:

• Components - Used for inspecting the component tree
• Profiler - Used for performance monitoring

Inspecting Component Tree

The main purpose of Components tab is to show us the structure of the React application. The structure shows how are all the components nested. In addition, we also get other useful information about the components. E.g. props, state, context, functions, etc... We'll talk more about them later. But for now - let's see how can we find the component we need inside the component tree.

Locating Component

The are multiple ways to locate the component inside React dev tools. The most simple one is to use the arrow in the top-left corner. Then simply point and click on the component we want to inspect.

If we know the name of the component we want to locate. We can use a built-in search bar that will find and highlight components for us. This is especially useful if we have a component tree that is deeply nested.

The one useful thing to remember is this. Components and Elements tab interact with each other. If we select any component in Components . It will also get selected in Elements . It also works another way around. In the example below, selecting button will automatically select Button in Components tab.

Debugging Component

Most of the time, we want to see what's happening inside our components. Using React developer tools, we can see a lot of useful information about the component. We can also see, how is the information changing as we interact with the application.

In the example below, we can see state changing as we're adding or removing new items. This also works another way around. This means we can manipulate state within developer tools, without any interaction with the UI. In the example below, we're removing items. By modifying the component state directly in the dev tools.

Components tab is also connected to Console. Once we have a component selected, we can switch over to Console and type $r . It will give us all the information we see in the Components tab.

This way, we can interact with the component using our beloved console. In addition, we can also call functions that the component has access to. I believe every front-end developer will find this handy.

Now that we know how to inspect our components. We can quickly find out if there are any issues within them. And if there are, it's time to find out why.

Inspecting Source Code

React developer tools make it easy to inspect source code directly in the browser window. Preventing us from constantly switching between code editor and browser. All we need to do is select the component. And click on the <> . This will open up the corresponding file, where we can see what's wrong with the code.

We get this feature by default if we're using create-react-app or Next.js . But if you can't see the original code of your component, you'll need to add babel-plugin-transform-react-jsx-source to your Webpack configuration.

Using these tools, we can easily observe how our application behaves. And fix the issues as they're coming up. When the application is stable and bug-free. It's time to optimize its performance. And for that, we can use Profiler .

Monitoring Performance with Profiler

Profiler shows us how long it takes to render each component of our app. We can identify what component is slowing down our application. And of course, improve its performance!

In this example, we can see that rendering material-ui Button is taking most of our rendering time. Not that it's slow. But if we want to make our app even faster. We can replace it with custom Button component.

It also shows if the component was rerendered and what triggered the rendering. It's worth checking out if there aren't any unnecessary re-renders happening in our app. And if they are, we most likely can optimize them. Making our React website much faster.

React developer tools come with a lot of handy features that can make our developer experience better. In this article, we showed how to install them. Showcased in what situations and how can we use them.

We also provided useful tips and tricks. Which can make using React developer tools much easier. New features are constantly added to React DevTools. React DevTools v4 was released in August 2019. Improving performance, Simplified navigation, and support for React Hooks. Since then, React team is continuously working on making this tool better and better!

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Document Object Model (DOM) : One Byte Explainer

Prakirth Govardhanam - Mar 29

Learning Cyber Security Day 4 - Integrating Encryption in Your Code🔐

Gaurav Chaudhary - Mar 29

Blazor Render Mode – How To Avoid Dependency Injection Woes

Dev Leader - Mar 29

HOW TO LAZY LOAD IMAGE IN REACTJS

Candie - Mar 26

We're a place where coders share, stay up-to-date and grow their careers.

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

A guide to features and updates in React DevTools

Editor’s note : This React DevTools tutorial was last updated on 5 August 2022 to include sections about installing the React DevTools browser extension, addressing a common problem with the extension showing up on the browser, and new features that shipped with recent, minor updates.

React DevTools is a highly valuable asset when you’re working on a React project. Though it has its standard use cases, there are a lot of subtle features within DevTools that go unnoticed or unused.

In this article, we’ll demonstrate how you can use React DevTools’s various features that you might not have tried yet (or didn’t even know existed). We’ll also go over how to install the browser extension and highlight some features that shipped with React DevTools v4 and in the subsequent minor releases.

What is React DevTools?

Why is react devtools not showing up in chrome devtools.

• Debug performance with React Profiler

Customize your environment with React DevTools themes

Access react components and state from the console, view source like a pro, access secret react apis, legacy react support, collapsed or expanded tree view, simplified tree view, improved tooltips, search timeline by component name, about brian vaughn and react devtools.

React DevTools is an open source, MIT-licensed tool developed and maintained by Meta. It adds React debugging capabilities to the browser DevTools. Though it is primarily a browser extension, React DevTools also comes as a standalone package.

Though the browser extension is for debugging browser-based React applications, you can use the standalone package for debugging non-browser-based applications, such as React Native and mobile browsers.

How to install the React DevTools browser extension

The React DevTools browser extension for debugging web-based React applications is available on some popular web browsers. You can install it from the corresponding web browser’s add-on stores below:

• Chrome web store
• Firefox add-ons
• Edge add-ons

It’s also possible to build and install React DevTools from the source directly. You can check the documentation for instructions on how to do so .

To use the standalone React DevTools package, you need to install it from the npm package registry as seen below:

React DevTools should appear in the browser’s DevTools when you point to a site built with React. However, it’s pretty common to experience issues while using the extension.

One of the common problems is React DevTools not showing up in the browser DevTools, even after installation.

The following are some of the possible causes and solutions to this problem:

• If you’re loading the project from a file ( file: ), be sure to provide the extension access to the file URLs. It’s important to give the extension access to the project
• Be sure to reload the webpage after installing React DevTools for it to start detecting pages that were already open
• The documentation recommends using the standalone React DevTools package if your project runs in an iFrame or to debug a React Native project
• It’s not possible to use React DevTools when you’re debugging a browser extension at the moment

The FAQ section of the React DevTools documentation has a list of the mentioned problems and how to troubleshoot them.

How to use React DevTools

New features are added to React DevTools all the time. React DevTools 4 was officially released in August 2019, bringing significant performance improvements, a revamped navigation experience, and full support for React Hooks. Since then, the React team has continuously refined DevTools with regular updates and improvements .

Now, we’ll go over five ways to use React DevTools. Let’s jump into it!

Debug performance with the React Profiler

In September 2018, the React team introduced an incredibly powerful feature for debugging performance-related issues called the React Profiler . When used with React v16.5 or later, React DevTools provides you with a profiling feature that shows you a summary of how your application rerenders.

Just like the regular JavaScript profiler found in your dev tools of choice, you’ll have to “record” a set of interactions. Once you’ve done that, you’ll see a visualization of each rerender your application goes through with accurate timing information and color-coded flame graphs. As of April 2019, it even captures screenshots of every DOM update .

For a deeper dive into the React Profiler, I recommend watching Brian Vaughn’s recorded live stream in which he demonstrates how to use the Profiler to locate and squash pesky performance bugs.

Are you one of those people that likes to spend a ton of time making your development environment look just right? If so, you’ll be happy to learn that React DevTools is themable. You can find theming options in the General tab of the React DevTools settings:

It will use your browser theme by default. You can also switch between the light and dark themes whenever you like. To start playing around with themes, click the cog icon on the right side of the main panel and then click the General settings tab.

Although you can find and fix most issues directly in React DevTools, there’s some debugging that just works better with a good old console.log . One of my favorite features is that DevTools actually gives you the option to interact with the component instances via the console itself.

Select a component in React DevTools and pop open the console (hitting the Esc key lets you see both at once). Type in $r and you’ll have access to the instance of that React component from the console.

Over 200k developers use LogRocket to create better digital experiences

This gives you a lot of debugging power. With DevTools, you can access React state from the console, trigger callback methods, and even augment functionality.

If you’re interested in a particular function, such as a click handler or callback function, React DevTools also provides a nice little convenience feature. If you right-click a function in the props or state overview, you can make it available as a global variable. This way, you can call it whenever you want with different arguments and contexts.

The debugging tools in modern browsers are much more powerful than most people are aware of. You can set breakpoints, inspect state and props as your app changes, and step through code execution line by line. However, code compiled with Babel tends to be hard to read and a pain to follow. Wouldn’t it be great if you could actually view the source the way you wrote it?

Babel provides a plugin that adds a __source prop to all JSX elements. This lets the React DevTools link directly to the source code of the component you’re inspecting. It slows down your application a bit, but it works great in development mode.

To use this feature, install babel-plugin-transform-react-jsx-source , apply it to your .babelrc file, and restart your dev server. When you right-click a component in the component tree, you’ll see a new option : “Show <component name> source”:

This enables you to jump into the browser’s source view, where you can inspect, set breakpoints and alter the code altogether.

If you use the popular bootstrap tool Create React App , you’ll find that this works out of the box. No config, no plugins, no nothing. Just jump straight to the source!

Did you know there are a few top-level exports from React made specifically for interacting with React DevTools? You probably won’t need them very often, but they come in incredibly handy when you do.

useDebugValue

When you’re creating custom React Hooks that are shared with other developers, it’s often a good idea to use the useDebugValue hook. This hook adds an informative label to the hook that shows up in the React DevTools.

Interaction tracking

In some situations, understanding why a particular commit or rerender took longer than expected can be a bit complicated. That’s why the React DevTools supports so-called interaction tracking . This is a programmatic API that lets you place labels on different events in your app and trace their performance.

To get started, install the scheduler package and import the unstable_trace method. This method accepts a label (“login button clicked,” for example), a timestamp, and a callback. What happens in the callback is traced at a much more detailed level than previously possible.

Debug your React production build

If you’re experiencing a performance regression that’s only present in the production build of your application, you might want to try profiling your application. Unfortunately, React doesn’t include profiling support for the production build of React   —  at least, not by default.

Luckily, you can still opt into having profiling available in your production app. You might not want to ship it to your customers, but testing it out locally or in a QA environment will help you out quite a bit.

What’s new in React DevTools

As previously mentioned, React DevTools is constantly under heavy development. React DevTools v4 was released in August 2019 and the subsequent minor updates have introduced a host of major and minor improvements, a few of which we’ll list below. The React DevTools changelog has a comprehensive list of recent updates and improvements in React DevTools, but we’ll go over a few now.

The earlier version of React DevTools only supports React v16 and up. React DevTools v4, however, supports React v0.13, 14, and 15 as well. This is great news for anyone stuck maintaining or bug fixing a legacy React codebase.

I guess it’s worth mentioning this explicitly in the thread as well: The new DevTools will support older React versions (probably v13+) To be transparent, I had initially hoped to avoid this, but it feels like the “right thing to do” for the community, etc. — Brian Vaughn (@briandvaughn) 18 April 2019

When you open React DevTools, you can now decide whether you want the tree view of your components to be collapsed or expanded by default. You can change your preference from the new and improved settings panel found behind the cog icon.

React DevTools features a slightly simplified tree view in v4. No inline props are shown (except the key, if applicable), and pure DOM nodes (like <div /> ) are shown.

This is a fairly controversial change that was met with some backlash from the community. On the plus side, the simplified tree leads to better performance and a more manageable tree-view UI.

That being said, I expect that a few of the changes will be controversial. For example: 1. The new DevTools does not show inline props, only the name and key (if there is one). 2. The new DevTools does not show DOM elements in the Components tree. — Brian Vaughn (@briandvaughn) 18 April 2019

Did you know that React DevTools has explanatory tooltips for most of its controls? Neither did most users. The native tooltips had a long delay and led many users to assume there weren’t any tooltips at all. There are now improved tooltips in React DevToos v4, courtesy of Ryan Florence and his Reach UI library !

The React DevTools v4.22.0 minor release adds functionality for searching the timeline by component name. Searching for the component name zooms the component measure. You can then step through using the next and previous arrows.

The features listed above are just a few of many that shipped with React DevTools v4 and subsequent minor releases.

As you might have noticed, Brian Vaughn’s name pops up a lot when speaking about the React DevTools. Brian was the main developer of the React DevTools and has done a tremendous effort on creating helpful tooling for the average React developer. If you want to become a DevTools expert, I recommend you check out a few of his talks on the subject. Brian has also done a few podcast interviews that are worth checking out.

React DevTools has made it a lot easier to build, ship and debug React applications than ever before. Thanks to the Profiler API, you can even squash most performance hiccups in no time! It’s an incredibly important tool to learn how to use and master, for novices and pros alike.

What are your favorite features in React DevTools?

Get set up with LogRocket's modern React error tracking in minutes:

• Visit https://logrocket.com/signup/ to get an app ID

Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not server-side

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Using AWS Lambda and CloudFront to optimize image handling

Leverage services like AWS Lambda, CloudFront, and S3 to handle images more effectively, optimizing performance and providing a better UX.

Building web-based terminal components with Termino.js

Explore Termino.js, an open source library for integrating web-based terminals into applications, in this introduction article.

How to build a custom GPT: Step-by-step tutorial

Let’s see why and how to build custom GPTs — personalized versions of ChatGPT that act as custom chatbots to serve a specific purpose.

Jest adoption guide: Overview, examples, and alternatives

Jest is feature-rich testing framework that comes with several in-built features that make it powerful and easy to use.

Leave a Reply Cancel reply

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

How I got React Devtools working in Safari Developer Tools in 2022

fycdev/react-devtools-in-safari-2022

Folders and files, repository files navigation, react devtools in safari 2022, introduction.

This is a successful experiment in getting React DevTools working in Safari Developer Tools in Safari 16 as of September 2022. Potentially, this process can be used with other extensions that extend the developer tools (e.g. Redux, Vue, etc...).

This is only a proof of concept but hopefully this may open the doors for tools that were previously accessible on other browsers to be now available on Safari spurring for a more open web experience (and debugging) for developers.

Requirements

• MacOS 12+ (Monterey)
• Safari 16 (as of this date this would be Safari Technology Preview for your respective MacOS version)

Instructions

In summary, we will build Firefox's version of React DevTools, port that built version to Safari, make a few adjustments, and then install it in Safari Technology Preview.

Clone the React repository so we can build the Firefox React DevTools.

In the React directory, build the Firefox React DevTools

a. Download the build from their CI (alternatively, you can build from source).

No need to worry where the download is stored.

b. From the main react/ directory

This will output the built files (.zip folder and an unpacked folder) to packages/react-devtools-extensions/firefox/build .

c. Unzip the zip file to a project folder of your choosing. Remember the folder path as it will be needed shortly.

Convert the Firefox React DevTools using safari-web-extension-converter

Optionally, can use the --project-location flag to set the destination folder for the converted extension otherwise it will save it to the current directory.

manifest.json will need to be updated before the project is run. Xcode should automatically open the project once the conversion has been completed. Otherwise, open the project in Xcode.

a. Within the project, navigate to manifest.json (case sensitive). If none of the file names have been changed it should be under /React Developer Tools Extension/Resources/manifest.json .

b. Within the permissions property add "devtools" to the array.

Run the project by either pressing the "play" button or from the Menu Bar Product -> Run which will install the extension as an application. An app will open and will have a button to "Quit and Open Safari Extensions Preferences...". Ignore it and close the app.

Open Safari Technology Preview (since of this writing it is the only version with Safari 16).

a. In the Menu Bar enable:

• Develop -> Allow Unsigned Permissions
• Develop -> Experimental Features -> Web Inspector Extensions

b. Open Preferences and navigate to Extensions. React Developer Tools will be shown in the list given the process worked successfully. Enable it and allow the extension to run on any chosen website or all websites.

c. To uninstall, click the "Uninstall" button in the Extensions pane. Follow the prompt to open the folder. Navigate up the folders until React_Developer_Tools-somehash can be deleted.

Congratulations! React DevTools should now be working in Safari.

Converting a web extension for Safari

Adding a web development tool to Safari Web Inspector

React DevTools 101: Master Debugging with This Essential Tool

Introduction to react devtools.

React DevTools provides invaluable debugging and profiling capabilities for React developers. With React DevTools, you can inspect React components right in the browser DevTools panel. This allows tracking down bugs faster and optimizing performance. This guide will overview the key features of React DevTools and demonstrate how it helps debug React apps through real-world examples. By the end, you'll have the skills to master debugging your own React apps with DevTools.

Let's start by installing React DevTools and accessing it through the browser.

Installing and Accessing React DevTools

React DevTools is available as a browser extension for Chrome and Firefox. You can install it from the Chrome Web Store or Firefox Add-ons site.

Once installed, a new "React" tab will appear in your browser's Developer Tools panel. To open DevTools, use the keyboard shortcut Ctrl + Shift + C (Cmd + Shift + C on Mac). The React tab is where you'll access all the React debugging features.

For example, I installed the React DevTools extension in Chrome. When I inspect my example React app and open the Chrome DevTools, I see the React tab alongside the other panels like Elements and Network. This is where I can start inspecting and debugging my React components.

Inspecting React Components

The Components panel in React DevTools shows the component tree for your React application. You can click on any component to view additional details like props, state, and hooks.

The highlighting tool is great for visualizing which components are actually rendering. I can hover over a component in the tree view and DevTools will highlight it on the page. This helps trace whether components are rendering as expected.

Filtering components is also handy. I can search for a specific component by name or filter the tree to only show components rendering under a certain folder path. When debugging a large app, this keeps the view focused.

The timeline tool in React DevTools is invaluable for inspecting component updates. It shows detailed information on which components re-rendered during a given timeframe. I can replay renders to watch component updates live. This helps pinpoint components that may be re-rendering too frequently.

For example, while profiling my app I noticed the Navbar component was re-rendering constantly on scroll events even when its props weren't changing. The timeline tool helped me identify this performance bottleneck.

Examining State and Props

React DevTools makes it easy to inspect the props and state values for any component.

I can select a component in DevTools and view its props and state in the panel sidebar. Interactively editing these values is an easy way to test different scenarios. My changes even persist across page reloads, which accelerates development.

The props and state history navigator allows "time travel" debugging. I can view previous values and step through changes turn-by-turn. This is invaluable when tracking down bugs related to state.

I also leverage the search feature frequently. I can search for components that contain specific props or state values. This comes in handy when trying to locate the source of stale state bugs.

Pinning components persists their state which is handy for important debugging scenarios. For example, I'll pin my Redux store component to keep monitoring state changes.

Debugging with React DevTools

React DevTools unlocks powerful JavaScript debugging techniques tailored for React.

Setting breakpoints allows pausing execution to inspect component values in the middle of rendering. I can also step through the code line-by-line to isolate issues.

The call stack tool provides insightful stack traces. I can view the chain of function calls leading up to errors or slow renders. This context helps narrow down the source of bugs.

Logging custom debug messages to the console from my React components makes debugging straightforward. I can track variables, function calls, and more.

There are also React-specific tips like checking for unnecessary re-renders due to parent components passing new props references unnecessarily. React DevTools points out these optimizations.

For example, I had a bug where state was getting overwritten unexpectedly. By setting a breakpoint in componentDidUpdate and examining the call stack, I was able to pinpoint where the incorrect state update was occurring. React DevTools cut down hours of debugging time.

Profiling with the Profiler

Optimizing performance is crucial for React apps. The Profiler provides detailed performance metrics to identify optimization opportunities.

The Profiler measures how long each render phase takes for components. I can record traces to visualize components that are slowing things down.

Flame charts help highlight expensive operations like excessive state updates. I can dig into specific components to understand what’s causing sluggish renders.

The Profiler integrates nicely with the Chrome Performance tab for low-level profiling. I can compare performance across app versions to validate optimizations.

For example, I noticed my app animation was janky during scroll events. The Profiler showed that an expensive DOM measurement was happening on each scroll. By memoizing the measurement into a variable, I reduced the time spent rendering substantially.

<a href="https://devhunt.org" style="font-weight:bold;color:blue;">Check out DevHunt to discover more innovative developer tools like React DevTools →</a>

Advanced Usage of React DevTools

React DevTools offers advanced capabilities for power users. Let's explore a few highlights.

Customizing Components in DevTools

For rapid testing, I can modify components directly in React DevTools. Changes like swapping prop values or state persist across page reloads.

Overriding CSS styles comes in handy for quickly mocking layouts and themes. I can tweak margins, colors, and more.

For Redux apps, overriding the Redux state from the DevTools panel accelerates development. Mocking API response data avoids roundtrips while testing.

These customizations streamline development by removing friction. I save hours not having to recompile code to test every change.

Integrating with React Native

Debugging React Native apps works similarly to web apps with a few extra steps.

I can open the DevTools overlay by shaking the device or pressing the menu button. Here I can inspect views, profile performance, and debug JS code.

Setting up remote debugging allows full integration with my machine's Chrome DevTools. There is some initial setup, but the workflow is smooth.

Being able to access the full React DevTools capabilities for React Native apps is invaluable. The integration may take more work, but unlocks next-level debugging powers.

Mastering React DevTools is a gamechanger for React developers. The ability to inspect components, view state, debug code, and profile performance unlocks next-level app development, debugging, and optimization.

While it takes time to learn all of React DevTools' capabilities, integrating it into your workflow is worth the effort. The tools feel like they were made specifically for React.

Hopefully this overview has shown that React DevTools lives up to its tagline as an “essential” tool for React. Master it, and you’ll be able to debug even the most complex React applications with confidence.

Join us for Flagship 2024: April 16-17 – Register Now .

Search site

Feature delivery & control, feature measurement & learning, enterprise readiness, related links, by industry, developer resources, content hub, 10 tools every react developer needs.

Creating, maintaining, and deploying your React app can be frustrating if you’re not taking advantage of modern tooling. However, with the hundreds of thousands of tools out there, it can be overwhelming to decide which ones to use. With the end goal of making feature development and coding as smooth as possible, I’ve done some research, and I’m sharing the tools I found that are making my life easier every day.

1. Create React App

Facebook’s Create React App is the known fool-proof way of creating and maintaining a React application. You don’t have to worry about project structure, or which modules to add. Create React app takes care of all of that for you. The thing that makes Create React App stand out is the setup. When you create an app with this tool, you are automatically setting up all of the files that a React app needs to run. You also don’t need to configure anything, as it’s already taken care of for you.

2. No Sweat ESLint and Prettier Setup

This ESLint and Prettier setup from Wes Bos is one of the best linting packages you can use. It lints JavaScript based on the latest standards, fixes formatting errors with Prettier, and lints and fixes everything inside of html script tags. My favorite part about this configuration is that it automatically adds semicolons where necessary!

XState is a library for creating, interpreting, and executing JavaScript and TypeScript finite state machines and statecharts for modern web development. With useState, you can represent a piece of state in your component that can be changed at any time. But since the state is directly “changed”, it’s unclear as to how the state can change; this logic is scattered in event handlers and other parts of your component. With useReducer , the logic can be represented clearly in a centralized place — the reducer. Events can be “dispatched” to the reducer, which determines the next state based on the current state and received event. But two things are unclear: you don’t have a full picture of all the possible logical “flows” that can occur, and side-effects are handled separately. This makes it difficult to know exactly what can happen, as all of this logic is stuck in the developer’s head, instead of the code.

This is where XState and @xstate/react come in. With the useMachine hook, you represent your state and logic similar to useReducer , except you define it as a state machine. This lets you specify finite states that control the behavior of “what happens next” per state, as well as what effects should be executed on state transitions. The result is more robust logic, making it impossible to get into impossible states. Oh, and it can be visualized, automatically!

4. React Testing Library

Testing is all about confidence. You want to be able to ship bug-free applications. As Kent C. Dodds rightfully says, the more your tests resemble the way your software is used, the more confidence they can give you. React Testing Library is an absolutely critical tool to enable you to do this effectively. Plus, it’s recommended by the React team for testing React apps and it’s the de facto standard for testing your React code. Give it a try!

5. React Router

React Router is a collection of components that get composed declaratively with your application. React Router conditionally renders certain components to display depending on the route that’s being used in the URL. The power with React Router is proven when you use multiple routes to determine which component should render based on which path is active at that moment. Many times, if you’re building a single page application, you will use React Router to render specific components that act like separate pages — making it look like your website is made up of more than one page.

6. Styled Components

In a typical React application, CSS files and JS files are separated — meaning your styles and components live in different places. Although this is the traditional way of approaching a React application, it comes with its downsides. For example, if you are looking at a CSS file, you have no clue which component is using it, so if you make any changes to it, you don’t know what it’s going to potentially break. The solution to this problem is to scope your styles so that the layout, styling, and app logic all lives in one place in your code. Because of this, when you make changes, you’ll know what it’s affecting, and you will avoid surprises in production. Styled Components make it easy to understand what’s going on because you won’t have to go back and forth between the CSS and js files — It removes this mapping between components and styles, reducing confusion and time wasted going back and forth.

7. Framer Motion

Framer Motion is a production-ready motion library for React. It’s an open-source prototyping tool for React applications. The motions and animations are powered by the Framer library. Framer Motion includes spring animations, simple keyframes syntax, gestures (drag/tap/hover), layout, and shared layout animations. The beauty of Framer Motion is you don’t need to be a CSS expert to make beautiful animations anymore — you can simply create a prototype and then integrate it with your application.

8. Storybook

Storybook is an open-source tool you can use to develop and inspect UI components in isolation. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application. It also helps you document components for reuse and automatically visually test your components to prevent bugs.

9. Reach UI

Reach UI provides the foundation for making your React App accessible. Reach UI is a library of accessible React components that have each been tested with Safari + VoiceOver, Firefox + NVDA, and Edge + JAWS. Because they have minimal styling, you can go ahead and add whatever styles you desire to the components.Whether or not you choose to use one or all of the components depending on your scope, Reach UI is a great place to start with accessibility!

10. React Proto

React Proto is another prototyping tool for developers and designers. You can prototype UIs without having to write code for it — you simply drag and drop the components into your existing application or create and export a new app with create-react-app. Once the export is complete, you will have auto-generated code that you can further customize with your team. This takes away the headaches that are brought on by classic CSS.

Fork and Clone Repository .

Bonus: Split

Split is a feature-flagging tool that allows developers to separate code deployment from feature release. With Split, you can test your code in production, run AB tests and other types of experiments, migrate your monolith to microservices, and release features with the click of a button.Split combines feature flags and data. Deploy often, release without fear, and experiment to maximize impact. With Split, you can develop faster, release more often, and maximize your impact. With its numerous integrations , it will fit into your current workstream easily!

Learn More About React and Feature Flags

Using the right tools for your React App can not only make your life simpler but can make development with React more fun! With these ten tools, you will have increased ease of feature development, which will accelerate your releases, and increase your engineering culture. For more information on getting started with feature flags in React, their benefits, and use cases, check out these posts:

• Add Styled Components to Your React App
• The Benefits of Feature Flags in Software Development
• 7 Ways Feature Flags Improve Software Development
• Testing Styled Components in Your React App
• Set Up Feature Flags with React in 10 Minutes

We are always posting new content to our Twitter page, @splitsoftware , and our YouTube channel , so be sure to follow us!

Get Split Certified

Split Arcade  includes product explainer videos, clickable product tutorials, manipulatable code examples, and interactive challenges.

Switch It On With Split

Split gives product development teams the confidence to release features that matter faster. It’s the only feature management and experimentation solution that automatically attributes data-driven insight to every feature that’s released—all while enabling astoundingly easy deployment, profound risk reduction, and better visibility across teams. Split offers more than a platform: It offers partnership. By sticking with customers every step of the way, Split illuminates the path toward continuous improvement and timely innovation. Switch on a  trial account , schedule a  demo , or  contact us  for further questions.

Want to Dive Deeper?

We have a lot to explore that can help you understand feature flags. Learn more about benefits, use cases, and real world applications that you can try.

Introducing Switch, Split’s New AI Developer Assistant

Experimenting with statistical rigor to make data-driven taco decisions, rethinking dora: mean time to restore, split and stable diffusion:  feature flags with generative ai, profiling and optimizing node.js application performance, automating database schema changes safely with feature flags, release new features faster.

We’re excited to accompany you on your journey as you build faster, release safer, and launch impactful products.

You Might Not Need Continuous Deployment

Engineering burnout: what it is and how experimentation and continuous delivery can help, split brings feature experimentation platform to make data-driven decisions, create impact with everything you build.

react-devtools

Use react-devtools outside of the browser

This package can be used to debug non-browser-based React applications (e.g. React Native, mobile browser or embedded webview, Safari).

Installation

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

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

With NPM you can just use NPX :

Usage with React Native

Run react-devtools from the terminal to launch the standalone DevTools app:

If you're not using a local simulator, you'll also need to forward ports used by React DevTools:

If you're using React Native 0.43 or higher, it should connect to your simulator within a few seconds. (If this doesn't happen automatically, try reloading the React Native app.)

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:

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:

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

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).

Add <script src="http://localhost:8097"></script> as the very first <script> tag in the <head> of your page when developing:

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

If you install react-devtools as a project dependency, you may also replace the <script> suggested above with a JavaScript import ( import 'react-devtools' ). It is important that this import comes before any other imports in your app (especially before react-dom ). 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 'react-devtools' as the first item in the entry array of the development-only configuration, and then you wouldn’t need to deal either with <script> tags or import statements.

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.

The React Tab Doesn't Show Up

If you are running your app from a local file:// 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:

Or you could develop with a local HTTP server like serve .

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 __REACT_DEVTOOLS_GLOBAL_HOOK__ , 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 your Components tab is empty, refer to "The React tab shows no components" section below .

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.

The React tab shows no components

The issue with chrome v101 and earlier.

As we migrate to a Chrome Extension Manifest V3, we start to use a new method to hook the DevTools with the inspected page. This new method is more secure, but relies on a new API that's only supported in Chrome v102+. For Chrome v101 or earlier, we use a fallback method, which can cause malfunctions (e.g. failure to load React Elements in the Components tab) if the JS resources on your page is loaded from cache. Please upgrade to Chrome v102+ to avoid this issue.

Service Worker malfunction

Go to chrome://extensions. If you see "service worker (inactive)" in the React Developer Tools extension, try disabling and re-enabling the extension. This will restart the service worker. Then go to the page you want to inspect, close the DevTools, and reload the page. Open the DevTools again and the React components tab should be working.

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 packages 1 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 createRoot 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:

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 yarn start:backend and yarn start:standalone in packages/react-devtools-core
• Run yarn start in packages/react-devtools
• Refresh the app after it has recompiled a change
• For React Native, copy react-devtools-core to its node_modules to test your changes.

Template type: create-react-app

This sandbox is a live running version of https://www.github.com/facebook/react/tree/main/packages/react-devtools

Dependencies

• cross-spawn: ^5.0.1
• electron: ^23.1.2
• minimist: ^1.2.3
• react-devtools-core: 5.0.0
• update-notifier: ^2.1.0

react-devtools

• 6 Dependencies
• 33 Dependents
• 150 Versions

This package can be used to debug non-browser-based React applications (e.g. React Native, mobile browser or embedded webview, Safari).

Installation

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

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

With NPM you can just use NPX :

Usage with React Native

Run react-devtools from the terminal to launch the standalone DevTools app:

If you're not using a local simulator, you'll also need to forward ports used by React DevTools:

If you're using React Native 0.43 or higher, it should connect to your simulator within a few seconds. (If this doesn't happen automatically, try reloading the React Native app.)

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:

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:

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

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).

Add <script src="http://localhost:8097"></script> as the very first <script> tag in the <head> of your page when developing:

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

If you install react-devtools as a project dependency, you may also replace the <script> suggested above with a JavaScript import ( import 'react-devtools' ). It is important that this import comes before any other imports in your app (especially before react-dom ). 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 'react-devtools' as the first item in the entry array of the development-only configuration, and then you wouldn’t need to deal either with <script> tags or import statements.

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.

The React Tab Doesn't Show Up

If you are running your app from a local file:// 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:

Or you could develop with a local HTTP server like serve .

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 __REACT_DEVTOOLS_GLOBAL_HOOK__ , 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 your Components tab is empty, refer to "The React tab shows no components" section below .

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.

The React tab shows no components

The issue with chrome v101 and earlier.

As we migrate to a Chrome Extension Manifest V3, we start to use a new method to hook the DevTools with the inspected page. This new method is more secure, but relies on a new API that's only supported in Chrome v102+. For Chrome v101 or earlier, we use a fallback method, which can cause malfunctions (e.g. failure to load React Elements in the Components tab) if the JS resources on your page is loaded from cache. Please upgrade to Chrome v102+ to avoid this issue.

Service Worker malfunction

Go to chrome://extensions. If you see "service worker (inactive)" in the React Developer Tools extension, try disabling and re-enabling the extension. This will restart the service worker. Then go to the page you want to inspect, close the DevTools, and reload the page. Open the DevTools again and the React components tab should be working.

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 packages 1 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 createRoot 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:

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 yarn start:backend and yarn start:standalone in packages/react-devtools-core
• Run yarn start in packages/react-devtools
• Refresh the app after it has recompiled a change
• For React Native, copy react-devtools-core to its node_modules to test your changes.

Current Tags

Version history.

19 hours ago

• a month ago
• 4 months ago
• 6 months ago
• 9 months ago
• 2 years ago
• 3 years ago
• 4 years ago
• 5 years ago
• 6 years ago
• 7 years ago

Package Sidebar

npm i react-devtools

Git github.com/facebook/react

github.com/facebook/react#readme

Downloads Weekly Downloads

Unpacked size, total files, last publish, collaborators.

React Developer Tools

1.5K ratings

Adds React debugging tools to the Chrome Developer Tools. Created from revision 47cf347e4 on 3/8/2024.

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. You will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler". The Components tab shows you the root React components that were 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 its 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. 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. The Profiler tab allows you to record performance information. 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.

4.0 out of 5 1.5K ratings Google doesn't verify reviews. Learn more about results and reviews.

LEONARD KIPTALA Apr 13, 2024

Guys if you dont see it in the dev momode just scroll more to the left and you can see it ""COMPONENTS" and "PROFILER" after security tab in chrome.

Dong Cai Apr 11, 2024

Components and Profiler tabs are not in DevTool

Kuldeep Dhangar Apr 9, 2024

But this time it not open in DevTool to showing component

• Version 5.0.2 (3/8/2024)
• Updated March 9, 2024
• Report a concern
• Offered by Meta
• Size 1.5MiB
• Languages English
• Developer Meta Platforms, Inc. 1 Hacker Way Menlo Park, CA 94025 US Email [email protected]
• Trader This developer has identified itself as a trader per the definition from the European Union.

This developer declares that your data is

• Not being sold to third parties, outside of the approved use cases
• Not being used or transferred for purposes that are unrelated to the item's core functionality
• Not being used or transferred to determine creditworthiness or for lending purposes

For help with questions, suggestions, or problems, visit the developer's support site

LocatorJS Chrome Extension - option-click to code (ReactJS)

OctoLinker – Links together, what belongs together.

Angular state inspector

Helps you debug Angular component state. Supports Angular 1/2+/Ivy!

MobX Developer Tools

Dev-tools for MobX and React

Redux DevTools

Redux DevTools for debugging application's state changes.

React Context DevTool

Devtool for React Context and useReducer

JSON Formatter

Makes JSON easy to read. Open source.

Vue.js devtools

Browser DevTools extension for debugging Vue.js applications.

React Performance Devtool

A devtool extension for inspecting the performance of React components.

Testing Playground

Simple and complete DOM testing playground that encourage good testing practices.

GraphQL Network Inspector

Simple and clean network inspector for GraphQL

GraphQL developer tools

Devtools panel for GraphQL development

React Developer Tools

Gunakan React Developer Tools untuk memeriksa komponen , menyunting props dan state , dan mengidentifikasi masalah kinerja.

Anda akan mempelajari

• Cara menginstal React Developer Tools

Ekstensi peramban

Cara termudah untuk melakukan debugging website yang dibangun dengan React adalah dengan menginstal ekstensi peramban React Developer Tools. Ekstensi ini tersedia untuk beberapa peramban populer:

• Instal untuk Chrome
• Instal untuk Firefox
• Instal untuk Edge

Sekarang, jika Anda mengunjungi sebuah website yang dibangun dengan React, Anda akan melihat panel Components dan Profiler .

Safari and peramban lainnya

Untuk peramban lainnya (misalnya, Safari), instal package npm react-devtools :

Selanjutnya buka React Developer Tools dari terminal:

Lalu sambungkan website Anda dengan menambahkan tag <script> berikut ke awal <head> website Anda:

Reload website Anda sekarang untuk melihatnya di React Developer Tools.

Mobile (React Native)

React Developer Tools dapat digunakan untuk memeriksa aplikasi yang dibangun dengan React Native juga.

Cara termudah untuk menggunakan React Developer Tools adalah dengan menginstalnya secara global:

React Developer Tools akan terhubung ke aplikasi React Native lokal yang sedang berjalan.

Lakukan reload aplikasi jika React Developer Tools tidak terhubung setelah beberapa detik.

Pelajari lebih lanjut tentang debugging React Native.

Seberapa suka Anda dengan dokumentasi ini?

Optimizing WebKit & Safari for Speedometer 3.0

Apr 10, 2024

by Alan Baradlay, Antti Koivisto, Matt Woodrow, Patrick Angle, Ryosuke Niwa, Vitor Ribeiro Roriz, Wenson Hsieh, and Yusuke Suzuki

The introduction of Speedometer 3.0 is a major step forward in making the web faster for all, and allowing Web developers to make websites and web apps that were not previously possible. In this article, we explore ways the WebKit team made performance optimizations in WebKit and Safari based on the Speedometer 3.0 benchmark.

In order to make these improvements, we made an extensive use of our performance testing infrastructure. It’s integrated with our continuous integration , and provides the capability to schedule A/B tests. This allows engineers to quickly test out performance optimizations and catch new performance regressions.

Improving Tools

Proper tooling support is the key to identifying and addressing performance bottlenecks. We defined new internal JSON format for JavaScriptCore sampling profiler output to dump and process them offline. It includes a script which processes and generates analysis of hot functions and hot byte codes for JavaScriptCore. We also added FlameGraph generation tool for the dumped sampling profiler output which visualizes performance bottlenecks. In addition, we added support for JITDump generation on Darwin platforms to dump JIT related information during execution. And we improved generated JITDump information for easy use as well. These tooling improvements allowed us to quickly identify bottlenecks across Speedometer 3.0.

Improving JavaScriptCore

Revising megamorphic inline cache (ic).

Megamorphic IC offers faster property access when one property access site observes many different object types and/or property names. We observed that some frameworks such as React contain a megamorphic property access. This led us to continuously improve JavaScriptCore’s megamorphic property access optimizations: expanding put megamorphic IC, adding megamorphic IC for the in operation, and adding generic improvements for megamorphic IC.

Revising Call IC

Call IC offers faster function calls by caching call targets inline. We redesigned Call IC and we integrated two different architectures into different tiers of Just-In-Time (JIT) compilers. Lower level tiers use Call IC without any JIT code generation and the highest level tier uses JIT code generatiton with the fastest Call IC. There is a tradeoff between code generation time and code efficiency, and JavaScriptCore performs a balancing act between them to achieve the best performance across different tiers.

Optimizing JSON

Speedometer 3.0 also presented new optimization opportunities to our JSON implementations as they contain more non-ASCII characters than before. We made our fast JSON stringifier work for unicode characters . We also analyzed profile data carefully and made JSON.parse faster than ever .

Adjusting Inlining Heuristics

There are many tradeoffs when inlining functions in JavaScript. For example, inline functions can more aggressively increase the total bytecode size and may cause memory bandwidth to become a new bottleneck. The amount of instruction cache available in CPU can also influence how effective a given inlining strategy is. And the calculus of these tradeoffs change over time as we make more improvements to JavaScriptCore such as adding new bytecode instruction and changes to DFG’s numerous optimization phases. We took the release of the new Speedometer 3.0 benchmark as an opportunity to adjust inlining heuristics based on data collected in modern Apple silicon Macs with the latest JavaScriptCore.

Make JIT Code Destruction Lazy

Due to complicated conditions, JavaScriptCore eagerly destroyed CodeBlock and JIT code when GC detects they are dead. Since these destructions are costly, they should be delayed and processed while the browser is idle. We made changes so that they are now destroyed lazily, during idle time in most cases.

Opportunistic Sweeping and Garbage Collection

In addition, we noticed that a significant amount of time goes into performing garbage collection and incremental sweeping across all subtests in both Speedometer 2.1 and 3.0. In particular, if a subtest allocated a large number of JavaScript objects on the heap, we would often spend a significant amount of time in subsequent subtests collecting these objects. This had several effects:

• Increasing synchronous time intervals on many subtests due to on-demand sweeping and garbage collection when hitting heap size limits.
• Increasing asynchronous time intervals on many subtests due to asynchronous garbage collection or timer-based incremental sweeping triggering immediately after the synchronous timing interval.
• Increasing overall variance depending on whether timer-based incremental sweeping and garbage collection would fall in the synchronous or asynchronous timing windows of any given subtest.

At a high level, we realized that some of this work could be performed opportunistically in between rendering updates — that is, during idle time — instead of triggering in the middle of subtests. To achieve this, we introduced a new mechanism in WebCore to provide hints to JavaScriptCore to opportunistically perform scheduled work after the previous rendering update has completed until a given deadline (determined by the estimated remaining time until the next rendering update). The opportunistic task scheduler also accounts for imminently scheduled zero delay timers or pending requestAnimationFrame callbacks : if it observes either, it’s less likely to schedule opportunistic work in order to avoid interference with imminent script execution. We currently perform a couple types of opportunistically scheduled tasks:

• Incremental Sweeping : Prior to the opportunistic task scheduler, incremental sweeping in JavaScriptCore was automatically triggered by a periodically scheduled 100 ms timer. This had the effect of occasionally triggering incremental sweeping during asynchronous timing intervals, but also wasn’t aggressive enough to prevent on-demand sweeping in the middle of script execution. Now that JavaScriptCore is knowledgable about when to opportunistically schedule tasks, it can instead perform the majority of incremental sweeping in between rendering updates while there aren’t imminently scheduled timers. The process of sweeping is also granular to each marked block, which allows us to halt opportunistic sweeping early if we’re about to exceed the deadline for the next estimated rendering update.
• Garbage Collection : By tracking the amount of time spent performing garbage collection in previous cycles, we’re able to roughly estimate the amount of time needed to perform the next garbage collection based on the number of bytes visited or allocated since the last cycle. If the remaining duration for performing opportunistically scheduled tasks is longer than this estimated garbage collection duration, we immediately perform either an Eden collection or full garbage collection . Furthermore, we integrated activity-based garbage collections into this new scheme to schedule them at appropriate timing.

Overall, this strategy yields a 6.5% total improvement in Speedometer 3.0 *, decreasing the time spent in every subtest by a significant margin, and a 6.9% total improvement in Speedometer 2.1 *, significantly decreasing the time spent in nearly all subtests.

* macOS 14.4, MacBook Air (M2, 2022)

Various Miscellaneous Optimizations for Real World Use Cases

We extensively reviewed all Speedometer 3.0 subtests and did many optimizations for realistic use cases. The examples include but are not limited to: faster Object.assign with empty objects , improving object spread performance , and so on.

Improving DOM code

Improving DOM code is Speedometer’s namesake, and that’s exactly what we did. For example, we now store the NodeType in the Node object itself instead of relying on a virtual function call. We also made DOMParser use a fast parser, improved its support of li elements , and made DOMParser not construct a redundant DocumentFragment . Together, these changes improved TodoMVC-JavaScript-ES5 by ~20%. We also eliminated O(n^2) behavior in the fast parser for about ~0.5% overall progression in Speedometer 3.0. We also made input elements construct their user-agent shadow tree lazily during construction and cloning , the latter of which is new in Speedometer 3.0 due to web components and Lit tests. We devirtualized many functions and inlined more functions to reduce the function call overheads. We carefully reviewed performance profile data and removed inefficiency in hot paths like repeated reparsing of the same URLs .

Improving Layout and Rendering

We landed a number of important optimizations in our layout and rendering code. First off, most type checks performed on RenderObject are now done using an inline enum class instead of virtual function calls , this alone is responsible for around ~0.7% of overall progression in Speedometer 3.0.

Improving Style Engine

We also optimized the way we compute the properties animated by Web Animations code. Previously, we were enumerating every animatable properties while resolving transition: all . We optimized this code to only enumerate affected properties. This was ~0.7% overall Speedometer 3.0 progression. Animating elements can now be resolved without fully recomputing their style unless necessary for correctness.

Speedometer 3.0 content, like many modern web sites, uses CSS custom properties extensively. We implemented significant optimizations to improve their performance. Most custom property references are now resolved via fast cache lookups, avoiding expensive style resolution time property parsing. Custom properties are now stored in a new hierarchical data structure that reduces memory usage as well.

One key component of WebKit styling performance is a cache (called “matched declarations cache”) that maps directly from a set of CSS declarations to the final element style, avoiding repeating expensive style building steps for identically styled elements. We significantly improved the hit rate of this cache.

We also improved styling performance of author shadow trees, allowing trees with identical styles to share style data more effectively.

Improving Inline Layout

We fixed a number of performance bottlenecks in inline layout engine as well. Eliminating complex text path in Editor-TipTap was a major ~7% overall improvement. To understand this optimization, WebKit has two different code paths for text layout: the simple text path, which uses low level font API to access raw font data, and the complex text path, which uses CoreText for complex shaping and ligatures. The simple text path is faster but it does not cover all the edge cases. The complex text path has full coverage but is slower than the simple text path.

Previously, we were taking the complex text path whenever a non-default value of font-feature or font-variant was used. This is because historically the simple text path wouldn’t support these operations. However, we noticed that the only feature of these still missing in the simple text path was font-variant-caps . By implementing font-variant-caps support for the simple text path , we allowed the simple text path to handle the benchmark content. This resulted in 4.5x improvement in Editor-TipTap subtest, and ~7% overall progression in Speedometer 3.0.

In addition to improving the handling of text content in WebKit, we also worked with CoreText team to avoid unnecessary work in laying out glyphs. This resulted in ~0.5% overall progression in Speedometer 3.0, and these performance gains will benefit not just WebKit but other frameworks and applications that use CoreText.

Improving SVG Layout

Another area we landed many optimizations for is SVG. Speedometer 3.0 contains a fair bit of SVG content in test cases such as React-Stockcharts-SVG. We were spending a lot of time computing the bounding box for repaint by creating GraphicsContext, applying all styles, and actually drawing strokes in CoreGraphics. Here, we adopted Blink ’s optimization to approximate bounding box and made ~6% improvement in React-Stockcharts-SVG subtest. We also eliminated O(n^2) algorithm in SVG text layout code, which made some SVG content load a lot quicker .

Improving IOSurface Cache Hit Rate

Another optimization we did involve improving the cache hit rate of IOSurface. An IOSurface is a bitmap image buffer we use to paint web contents into. Since creating this object is rather expensive, we have a cache of IOSurface objects based on their dimensions. We observed that the cache hit rate was rather low (~30%) so we increased the cache size from 64MB to 256MB on macOS and improved the cache hit rate by 2.7x to ~80%, improving the overall Speedometer 3.0 score by ~0.7%. In practice, this means lower latency for canvas operations and other painting operations.

Reducing Wait Time for GPU Process

Previously, we required a synchronous IPC call from the Web Process to the GPU process to determine which of the existing buffers had been released by CoreAnimation and was suitable to use for the next frame. We optimized this by having the GPUP just select (or allocate) an appropriate buffer, and direct all incoming drawing commands to the right destination without requiring any response. We also changed the delivery of any newly allocated IOSurface handles to go via a background helper thread , rather than blocking the Web Process’s main thread.

Improving Compositing

Updates to compositing layers are now batched , and flushed during rendering updates, rather than computed during every layout. This significantly reduces the cost of script-incurred layout flushes.

Improving Safari

In addition to optimizations we made in WebKit, there were a handful of optimizations for Safari as well.

Optimizing AutoFill Code

One area we looked at was Safari’s AutoFill code. Safari uses JavaScript to implement its AutoFill logic, and this execution time was showing up in the Speedometer 3.0 profile. We made this code significantly faster by waiting for the contents of the page to settle before performing some work for AutoFill. This includes coalescing handling of newly focused fields until after the page had finished loading when possible, and moving lower-priority work out of the critical path of loading and presenting the page for long-loading pages. This was responsible for ~13% progression in TodoMVC-React-Complex-DOM and ~1% progression in numerous other tests, improving the overall Speedometer 3.0 score by ~0.9%.

Profile Guided Optimizations

In addition to making the above code changes, we also adjusted our profile-guided optimizations to take Speedometer 3.0 into account. This allowed us to improve the overall Speedometer 3.0 score by 1~1.6%. It’s worth noting that we observed an intricate interaction between making code changes and profile-guided optimizations. We sometimes don’t observe an immediate improvement in the overall Speedometer 3.0 score when we eliminate, or reduce the runtime cost of a particular code path until the daily update of profile-guided optimizations kicks. This is because the modified or newly added code has to benefit from profile-guided optimizations before it can show a measurable difference. In some cases, we even observed that a performance optimization initially results in a performance degradation until the profile-guided optimizations are updated.

With all these optimizations and dozens more, we were able to improve the overall Speedometer 3.0 score by ~60% between Safari 17.0 and Safari 17.4. Even though individual progressions were often less than 1%, over time, they all stacked up together to make a big difference. Because some of these optimizations also benefited Speedometer 2.1, Safari 17.4 is also ~13% faster than Safari 17.0 on Speedometer 2.1. We’re thrilled to deliver these performance improvements to our users allowing web developers to build websites and web apps that are more responsive and snappier than ever.

React Developer Tools

Description.

• Trending Blogs
• Geeksforgeeks NEWS
• Geeksforgeeks Blogs
• Tips & Tricks
• Website & Apps
• ChatGPT Blogs
• ChatGPT News
• ChatGPT Tutorial
• How will AI Impact the Future of Work and Life?
• 20 Best Artificial Intelligence Movies You Must Watch (2023)
• Sparse Rewards in Reinforcement Learning
• Resolution Theorem Proving
• Understanding Reinforcement Learning in-depth
• Propositional Logic based Agent
• Optimal Decision Making in Multiplayer Games
• Types of Reasoning in Artificial Intelligence
• 10 Most Demanded Job Roles in Artificial Intelligence
• Top 10 Industries using Virtual Reality
• Face recognition using Artificial Intelligence
• Top Challenges for Artificial Intelligence in 2020
• Advantages and Disadvantage of Artificial Intelligence
• Game Theory in AI
• What is Artificial General Intelligence (AGI)?
• Difference between Chatbot and Virtual Assistant
• Difference between Artificial Intelligence and Automation
• The State of Artificial Intelligence in India and How Far is Too Far?
• 6 Ways Artificial Intelligence Will Change Education in the 2020s

The 7 Best AI Tools for Programmers to Streamline Development in 2024

If you are a developer focused on efficiency and productivity, you should use AI tools that simplify your job. The AI Tools for Programmers give you the edge you need to win in the coding world. These tools will automate many recurring tasks and boost the code quality. Using these tools, you can help businesses cut expenses and provide workable code.

With numerous AI Tools for Programmers making rounds online, finding the best ones to revolutionize or streamline the development process is complex. No matter whether you are a professional programmer or a new one, we have listed the seven best AI Tools for Programmers.

Top 7 AI Tools for Programmers

2. github copilot, 6. mintlify, 6. alphacode, 7. code by sourcegraph, what to look for in ai tools for programmers, what is the best tool of all ai tools for programmers, faqs – ai tools for programmers.

Following are top 7 AI tools for programmers to streamline development

Tabnine is one of the best AI tools for programmers, and it helps developers boost productivity by automatically extracting the code and introducing workflow efficiency. The tab nine tool will predict the following line of code based on the provided syntax and context.

• Offer you a complete list of suggestions related to functions.
• Works on laptops, servers, desktops, and cloud.
• Support different languages such as Python, Go, Rust, and TypeScript.
• Complete all the code lines with just a single stroke.
• Easy to integrate with popular code editors such as Visual Studio code, eclipse, Android Studio, and IntelliJ.
• Developers will be able to train the data to receive tailored suggestions. Programmers can easily connect to the code repositories like GitHub or Bitbucket.
• Performance is not expected in some programming languages or frameworks with complicated syntax.
• When AI runs on local hardware, it consumes many resources over the cloud.
• Pro – free for 90 days- $12/month
• Enterprise: $39/month

Link: https://www.tabnine.com/

Github Copilot will automatically generate the code made by Github and OpenAI. It is one of the most powerful AI tools for programmers trained with billions of code lines to translate natural language requests and generate code recommendations in various languages.

• Offer extensions to IDEs such as Visual Studio Code, JetBrains, Neovim, and Visual Studio.
• Suggest the code and complete functions while you are coding.
• Offer you with auto-complete suggestions in no time.
• Identify the errors in the code and fix the bugs briskly.
• Support multiple programming languages like Javascript, C++, Python, and Go.
• Support real-time collaboration with other developers to communicate easily about the project.
• Sometimes, these AI Tools for Programmers will suggest efficient and correct code.
• Code correction will need human corrections.
• Team: $3.67/month
• Enterprise: $19.25/month

Link: https://github.com/features/copilot

AskCodi is one of the best AI tools for programmers and is designed to improve the coding experience. The clear-cut translate app will convert natural language into programming languages like Ruby, Python, C++, Java, and PHP.

• It supports a lot of IDE extensions, such as VScode and Pycharm.
• It offers a lot of code snippets in different languages, such as English, German, and Polish.
• It is easy to share the code snippets with others.
• Analyze the code to fix bugs and improve the code performance and security.
• Support many programming languages such as JavaScript, Python, C++, Java, and Ruby
• Use NLP-powered AI capabilities to answer questions related to the software development projects and offer suggestions.
• New users complain about the learning curve.
• The response time for providing the code would be late.
• Ultimate: $24.99/month
• Premium:$8.33/month

Link : https://www.askcodi.com/

Scribe is one of the best AI tools for programmers for software development , and it will use AI to create, debug, and control the whole process document. Its rich user interface lets developers record the workflow and procedures in real-time, develop guides and tutorials, and visualize data to comprehend better.

• It is easy to customize the text, steps, and images.
• Access the tool through the Chrome extension and desktop application.
• Come with robust enterprise-level security and a lot of controls
• It integrates with many tools, such as IDEs or AI tools for developers.
• Programmers can record the workflows and procedures.
• Create comprehensive manuals that will be a valuable resource for developers and others.
• Does not support many AI integrations
• Errors will occasionally be encountered while using this tool.
• Pro personal:$23/month
• Pro team: $12/month
• Enterprise: Custom

Link : https://scribehow.com/

Mintlify will use AI to generate code and play a key role in saving developers time dealing with technical tasks. Using this one of the AI tools for programmers, you can search for the code for the document already in place and generate this document to explain each line of code.

• Automated documentation features will let developers create documents that are easier to search efficiently.
• Developers can improve the documentation by making this document readable.
• It is easy for developers to track documentation patterns and improve accessibility.
• Integrate with Github to sync the documents and code repositories.
• These AI Tools for Programmers support many programming languages to generate the code in the language you want.
• Comprehend the code context with this tool accurately.
• It does not generate the document for all the files in one go.
• It could have added a lot of programming languages to generate the code in those languages.
• Startup: $120/month
• Growth: $400/month

Link : https://mintlify.com/

Alpha code will auto-generate code for the natural language problems you stated in your own words. It is one of the AI tools for programmers that is best for development as it helps solve many problems that involve logic, reasoning, algorithms, and coding.

• Transformer-based language models will be used to generate code using this one of the best tools for developers.
• It helps to correct the errors in the code.
• It is trained on the GitHub datasets to complete programming tasks.
• Generate the code in various programming languages like C++, Python, Haskell, and Java.
• Organize the samples into different clusters to create custom test cases.
• Available for free to use on GitHub.
• Many times, the tool will offer you free code snippets.
• Needs to handle issues related to tags and ratings efficiently.

Pricing: Free

Link : https://alphacode.ai/en/

Code by Sourcegraph is one of the best AI tools for programmers to help developers debug and automate the code. The AI chatbot will thoroughly analyze the code base and offer you accurate answers to queries.

• These AI Tools for Programmers supports programming languages like Javascript, Typescript, Python, and Go.
• It detects and helps you resolve the bugs in the code.
• Generate code snippets and generate functions based on the commands.
• Allow developers to access context-based predictions, reducing the time it takes to write code.
• Debug the code and will answer the queries in no time.
• Generate accurate code snippets by providing appropriate instructions.
• The UX of the tool could have been improved for a better user experience.
• Support from other languages would help the developers generate code for different languages.
• Pro: $9/month
• Enterprise: $19/month

Link: https://sourcegraph.com/

The following are the features you should look for while buying AI tools for developer s:

1. Completion of Code

It would help if you looked for tools that offer code suggestions and auto-complete the rest of the code to expedite the development process and keep errors at bay.

2. Review Coding Capabilities

You must access the tool and look for the one to review and analyze the code for its quality, style, and critical issues.

3. Security Features

Ensure you use the tool with security features to safeguard the data and code from users accessing it unauthorizedly.

4. Suggest Functions

You can look for tools that will suggest functions and methods, optimize the code quality, and boost its efficiency.

5. Perform Unit Testing

You need to check whether the tool supports automated code and unit testing to improve the software quality.

6. Different Integration Options

It would help if you looked for a tool to integrate with third-party programs and apps for development.

7. Support Multiple Programming Languages

Look for a tool that supports programming languages you work with and can understand natural language to generate the code based on it.

Out of all the AI tools for programmers, Github Copilot is the best one since it has an artificial intelligence engine that is ideal for coders and developers to generate code snippets in no time just by providing natural prompts. It is also compatible to use with different IDEs. This best developer companion lets you give the prompt to generate the code strings. It also offers different recommendations based on the project context and style conventions.

AI tools for programmers are a breakthrough in the technology world. With many AI tools for development available in the market, developers are using them to boost the coding experience and complete coding tasks briskly. However, the tools available will only give a helping hand but are only a partial replacement for the job of a developer. As the coding world evolves, these AI tools for programmers are crucial in generating efficient code that executes flawlessly.

Can beginners use AI tools for development?

Yes, the AI development tools are for beginners, too, since every line of code generated by this tool comes with explanations for developers to understand thoroughly.

Will AI tools replace human developers?

AI tools for developers will only replace human developers if human intelligence is required to write the code and humans have better problem-solving skills than those tools.

Are the AI tools for development highly secure to use?

Yes, the AI coding tools available are highly secure for developers to use responsibly. However, it is recommended that sensitive data and information be kept private from the tool despite meeting security standards.

How will AI coding tools promote collaboration between developers?

The generative AI tools for developers will promote better collaboration by offering real-time suggestions and letting multiple developers work on the same code simultaneously.

Can I use AI tools for development to build applications without any prior coding knowledge?

Yes, everyone can generate code snippets and build apps. These tools will also help people with no coding knowledge to produce software. It uses machine learning techniques to generate code based on the user-specified functionality.

Please Login to comment...

Similar reads.

• Artificial Intelligence
• Trending News
• How to Organize Your Digital Files with Cloud Storage and Automation
• 10 Best Blender Alternatives for 3D Modeling in 2024
• How to Transfer Photos From iPhone to iPhone
• What are Tiktok AI Avatars?
• 30 OOPs Interview Questions and Answers (2024)

Improve your Coding Skills with Practice

What kind of Experience do you want to share?