react-devtools : Timeout unable to inspect element
My issue was resolved by removing the React Developer Tools extension, reinstalling it, and restarting Chrome.
react-devtools
React Dev Tools: “parse hook names” action throws a “Hook parsing failed” error
This is indeed related to how your webpack devtool selection handle source maps. If you want a quick fix, try updating your webpack like so: // webpack.config.js module.exports = { // … return { devtool: “cheap-module-source-map”, // or if you’re using the same webpack config for prod + dev: // devtool: process.env[“NODE_ENV”] === “development” ? … Read more
React tab doesn’t appear in chrome developer tools
You can’t see React tab because, Facebook have updated React DevTools to have Components and Profiler Tabs. ⚛️ Components tab serves same purpose as React tab in older versions. From description, You will get two new tabs in your Chrome DevTools: “⚛️ Components” and “⚛️ Profiler”. The Components tab shows you the root React components … Read more
Why is console.log() showing react_devtools_backend.js:4049 instead of the file and line number?
I was able to fix it in my console by adding the file to my Framework Ignore List in Chrome. Steps: Console -> Gear icon (top right) -> Settings -> Framework Ignore List. Add react_devtools_backend.js to the list and the console.log should start showing the correct mapping again.
What does the hook numbers in the Reactjs Dev tool correspond to?
This is the PR where they added that feat. They didn’t provide a better UI due to some performance constraints. But you can find what hooks those indexes correspond to if you go to the components tab in dev tools and inspect said component; in the hooks section, you’ll have a tree of the called … Read more