基本信息

更新日期:
包名:
fmkadmapgofadopljbjfkapdkoienihi
版本:
4.28.5 (10/25/2023)
大小:
1.48MiB
类型:
扩展
平台:
Chrome
评分:
发布日期:
2023-10-26
价格:
免费
开发者:
Meta

React Developer Tools插件截图

【图】React Developer Tools(截图1)

React Developer Tools插件简介

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.

类似React Developer Tools插件

Makes JSON easy to read. Open source.
The original JSON Formatter, now with optional dark mode 🌚 Auto-formats JSON when you load it in a browser tab. FEATURES - Fast, even on very long JSON pages - Dark mode - Syntax h..
A devtool extension for inspecting t..
A devtool extension for inspecting the performance of React components. A Chrome devtool extension for inspecting performance of React components.
Simple and complete DOM testing play..
Simple and complete DOM testing playground that encourage good testing practices. Adds Testing-Playground to the Chrome Developer Tools. Testing Playground is an extension that hel..
Devtools panel for GraphQL developme..
Devtools panel for GraphQL development Adds a new tab to Chrome Developer Tools and allows to inspect GraphQL queries and responses.
OctoLinker – Links together, what be..
OctoLinker – Links together, what belongs together. OctoLinker – a browser extension for GitHub Navigate through projects on GitHub.com efficiently with OctoLinker. OctoLinker turn..
Redux DevTools for debugging application's state changes.
The extension provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state. This is an open source p..
Simple and clean network inspector f..
Simple and clean network inspector for GraphQL A platform agnostic network inspector specifically built for GraphQL. Clearly see individual GraphQL requests including support for q..
Helps you debug Angular component st..
Helps you debug Angular component state. Supports Angular 1/2+/Ivy! Angular State Inspector for Angular Supports all versions of Angular: AngularJs Angular 2+ Angular Ivy Hybrid ap..
Browser DevTools extension for debugging Vue.js applications.
Chrome devtools extension for debugging Vue.js applications.
Devtool for React Context and useReducer
React Context DevTool is debugging tool for React Context and useReducer API. You can easily show context values changes in different views like tree, raw and diff view. Now Devtoo..
MySeoPanel用于管理instagram和facebook的喜欢,评论,追随者和反应
MySeoPanel用于管理instagram和facebook的喜欢,评论,追随者和反应
护心镜 是由360 WEB攻防团队0KEE Team开发用来防御前端脚本攻击的工具,由浏览器扩展和告警平台两部分组成。安装了护心镜的浏览器,可降低网站后台、邮箱等账户被黑客控制..
护心镜 是由360 WEB攻防团队0KEE Team开发用来防御前端脚本攻击的工具,由浏览器扩展和告警平台两部分组成。安装了护心镜的浏览器,可降低网站后台、邮箱等账户被黑客控制的风险。 目前为止,没有任何一款杀毒软件可以让浏览器主动防御XSS攻击。 如果您是邮箱、微博等社交应用的重度用户,或者工作中有比较重要的网站后台,都可使用本工具进行保护。
Inspect Lit or Polymer webcomponents 'through a prism'. View and modify component properties on the fly through Chrome DevTools.
Inspect LitElement or PolymerElement webcomponents 'through a prism'. View and modify component properties on the fly through Chrome Developer Tools. Open the developer tools (F12)..
Easily add candidates from popular w..
Easily add candidates from popular websites directly into the CEIPAL ATS applicant tracking system. Save time when sourcing candidates from websites like LinkedIn, MonsterIndia and..
Extension for developers, facilitate..
Extension for developers, facilitates the creation and edition of offline sass-css files. based Sass.js
Help teachers to see participant Mes..
Help teachers to see participant Message When Browse Tab is Hide during presentation Note:It is not storing or sending any data to anywhere ,it is simply listening for new Message ..
Erweiterung zur Prüfung der Verfügba..
Erweiterung zur Prüfung der Verfügbarkeit diverser Websites Source @ GitHub: https://github.com/StephanAltmann85/chrome-extension-servercheck
A Chrome plugin for KanColle / Kanta..
A Chrome plugin for KanColle / Kantai Collection 为舰队收藏 ( KanColle / Kantai Collection ) 设计的 Chrome 插件 To access this plugin Customize and control google Chrome -> More Tools -&g..
json api debugger
json api debugger
一个把图片转换base64格式的扩展。 选择图片 > 右键 > 转换base64 。如果成功,图片的base64格式编码将粘贴在剪贴板中。
一个把图片转换base64格式的扩展。 选择图片 > 右键 > 转换base64 。如果成功,图片的base64格式编码将粘贴在剪贴板中。

React Developer Tools插件下载

免费下载插件商店插件官网

插件评论

man

为什么我安装完之后调试工具里没出现components?

guangzan

稍大点的项目就能卡死,还是 M1 Pro 上,想象不到设备性能差的选手用这东西多痛苦

网友

Not working for React 18

Carson

怎么用不了

carson

It's strange that the latest version works in vue pages (third-party's or mine), never happened before. Because of the tsx? 有点奇怪,它的新版本会在第三方或者我的vue页面中检测到react并运行,之前没有的,是因为我用了tsx?

None

Why is the devtool icon activated on every site??

123

为什么开哪个网站都亮

shuaicha

react developer tools在浏览器右上角的图标为什么不管我打开什么网页都会亮,甚至一个demo.html 很纳闷 今天突然出现的情况

martt

启用该插件时,双击文字会控制台会出现这个错误:Error handling response: TypeError: Cannot read properties of undefined (reading 'left')

迷綾

很好用

李李

虽然刚入手react,感觉这个和vue相似的还是很方便的

cc

在开启工具之后,在React中使用window.addEventListener('message', event => {});会频繁的触发监听事件

Andrew

pretty well

石磊

为什么开发版本无法使用?

陈远

为什么我安装完之后调试工具里没出现components?

Zili

控制台有错时,页面会偶发花屏。

封寒

DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/injectGlobalHook.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME 能不能解决一下

chou

In 4.9.0 version, component will be loading,can't debug and auto update

Xudong

Note that the development build is not suitable for production. Make sure to use the production build before deployment.

储沨

最近版本热加载后空白,希望早日修复。 功能很强大,不过现在这bug太严重