React Developer Tools lets you inspect the React component hierarchy, including component props and state. It exists both as a browser extension (for Chrome and Firefox), and as a standalone app (works with other environments including Safari, IE, and React Native).
Questions tagged [react-devtools]
220 questions
2
votes
1 answer
'Timings' tab in Chrome Performance Profiler Missing
So I was successfully monitoring the performance of my React Native App in the Timings section inside the Performance Tab of Chrome Developer Tools.
All of a sudden upon a particular reload of the app, the Timings tab went missing.
I have tried…
Ali
- 484
- 3
- 5
- 16
2
votes
1 answer
What does "Connect" next to component in React Dev Tools?
What does the "Connect" message mean in React Dev Tools:
QuatroUno
- 33
- 2
2
votes
2 answers
How to horizontally align tabs in chrome-dev-menu,instead of vertical alignment, for extension React-dev tools?
I am building ReactApp, and for debugging using React-Dev-Tools,
while testing states of the component, It shows two menus side by side,at left side
GD- Ganesh Deshmukh
- 1,456
- 3
- 24
- 36
2
votes
1 answer
"connecting to react ...." in react-devtools, when I want to connect with react native android emulator
I want to connect to react-devtools. I installed it later.I change:
On android emulator press cmd +m Dev Settings > Debug server host & port for device >"localhost:8097" because react-devtools connect with port=8097.
After all changes, react…
Mahmonir Bakhtiyari
- 546
- 1
- 8
- 21
2
votes
0 answers
React devtools does not have a profiler tab in electron
When I open React devtools in electron, it works, but it has no Profiler tab.
I have updated the extension, as far as I can tell, using electron-devtools-installer but this doesn't seem to have made any difference.
I'm using react 16.5.0 and…
OliverRadini
- 6,238
- 1
- 21
- 46
2
votes
2 answers
Prevent React dev tools from changing props/state
Is there a way to prevent any prop/state change from front-end on production?
I tried following but it completely disables the dev tools:
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
for (let [ key, value ] of Object.entries(
…
AspiringCanadian
- 1,595
- 6
- 24
- 43
2
votes
1 answer
Chrome extension: Permission to use another extension
I'm working on a chrome extension using React. I would like to use React devtools in dev mode, but it won't appear. I tried adding chrome://extensions/ in permissions but that isn't a valid one.
Am I missing something to enable this? Also, the Redux…
pnk6
- 276
- 3
- 15
2
votes
2 answers
Debug React. Identify Which prop was changed
For debugging my react app I want to know which prop was changed. When the application runs it executes componentWillReceiveProps infinite times. I don't know which prop was received. Is there any way to identify the modified props by comparing…
PranavPinarayi
- 3,037
- 5
- 21
- 32
1
vote
0 answers
Highlight re-rendered components in react native
Is there a way to highlight Rerendered components in react native liké we Can do it in react with devtools.
Zero0
- 371
- 4
- 15
1
vote
1 answer
React Dev Tools not connecting to React instance running in Electron
I've got a new Electron Forge project which uses:
React (17.0.2)
React Dev Tools (4.27.2-1a88fbb67)
React-Redux (7.2.9)
Electron (23.1.1)
electron-devtools-installer (3.2.0)
@electron-forge/cli (6.0.5)
Despite the React Developer Tools being…
jmts
- 43
- 4
1
vote
0 answers
How to prevent parent layouts rerenders when their child layout changes in react-router-v6
Context
I use a nested routes/layout setup in react-router (v6.8).
const router = createBrowserRouter(
createRoutesFromElements(
xav
- 4,101
- 5
- 26
- 32
1
vote
0 answers
How to display context and hook names in the React DevTools profiler?
I have a React component that consumes multiple contexts and uses multiple hooks, when I profile it and try to find out why it re-renders, The devtools tell me it re-rendered because "Context changed" or "Hook 4 changed", this isn't very insightful…
InfinityVive
- 101
- 1
- 8
1
vote
1 answer
While run the React application getting error
You need to install 'webpack-dev-server' for running 'webpack serve'.
Error: Cannot find module 'ajv/dist/compile/codegen'
I getting error like this when give npm install to run React application. Please give solution to solve this issue.
Yogesh
- 13
- 2
1
vote
1 answer
How can I make a chain of HoC appear as a single component in React DevTools?
I'd like to have my HoCs do as little as possible for what they need. (e.g. withI18n, withStyled, withNativeFontFamily)
So if I had something like
const MyText = withI18n(withStyled(withNativeFontFamily(Text)));
I'd like to show in React DevTools…
Archimedes Trajano
- 35,625
- 19
- 175
- 265
1
vote
1 answer
react admin console Error: Unknown dataProvider function: toJSON
I'm facing an issue in react-admins ra-data-json-server.
import jsonServerProvider from 'ra-data-json-server';
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
export default function App() {
return (
…
Zicheng Wang
- 13
- 3