I upgraded my Chrome to version 87. I no longer am seeing my React source code in DevTools. The React Chrome Extension is installed and permission to access local files is enabled. So what could be the problem?
Related
I want to use the experimental Insertable Stream for MediaStreamTrack API in my project, specifically, the MediaStreamTrackGenerator.
The compatibility chart says it's supported from Chrome 94, and I'm using Chrome 109 (on Windows) so I figured it would be okay.
However, when ran new MediaStreamTrackGenerator({kind: video}) in my local development version of my react app, I got the error:
'MediaStreamTrackGenerator' is not defined no-undef.
First thought this is a problem with my chrome version so I ran the same line in my devtools console, and it worked there.
Then I thought this is because my node, npm, or react version not supporting this feature, so I updated them all to the latest version and it didn't help.**
A weird detail is that this error only appears after I make changes in my code (and it hot-reloads) or that I open devtools for my react app.
Update: it seems like I just had to add windows. to it.
I created the build of a MERN Stack application using the npm run build command, then I ran this built application on my default browser (Microsoft Edge) using the npm start command. I then installed the react devtools extension for Edge from Chrome. But when I enable react devtools on my react app, it does not activate and I get the message This page doesn’t appear to be using React.
If this seems wrong, follow the troubleshooting instructions. I don't understand why I get this error because my application is entirely designed in react on the frontend side. I don't know if it's because I got the wrong server start command .
You can try the following solution.
In Edge, right click on React devtools, go to Manage extensions, and select "Allow access to file URLs".
Also, it has been reported that a re-installation of react devtools and a restart of browser may help. By the way, react devtools is available in Microsoft Edge Add-ons, so you can just install it in Edge (since you said you installed it from Chrome).
Updating Chrome to last version worked for me.
Chrome version: 109.0.5414.119 (Official Build) (64-bit)
System version: Ubuntu 20.04.2 LTS
I want to add react devtools to Safari browser
I didn't find a way to install it
I want to see the react sign on the websites made by react
Thank you
I think what you are looking for is the react-devtools chrome extension?
React-devtools is a standalone package that runs independently.
The chrome extension hooks it up for convenience in chrome.
Safari doesn't have an extension right now (legacy reasons).
If you really need to hook it up, it should not be hard to port it to safari since it's API's are now supposedly as open and similar as chrome's.
Starting with MacOS 13.0 Ventura and Safari 16.1, developers can now build and distribute Extensions for Safari Web Inspector, just like they do with Safari as a whole through the App Store.
It is now hopefully a matter of time before Facebook or someone else builds and distributes React Dev Tools for Safari.
Reference: Adding a web development tool to Safari Web Inspector
Working with create-react-app, while npm start is running, if I inspect an app, in Chrome DevTools I can find my project files only inside the Webpack-internal folder. Is that normal?
Further more if I open Source tab, this is what I see:
It seems that the ES6 code is changed to ES5 and also there are __source: tags every where.
I thought if I disable SourceMap for JavaScript in my DevTools settings, those __source tags will disappear, they didn't. Even refreshing the browser or relaunching the Dev server with npm start, didn't remove them.
This make it very hard debuggin the code. Are you facing the same issue? Any solution?
Babel is part of the build process, it is responsible for transpiling ES6 into ES5 so your app can work on browsers that don't support ES6 properly.
You can read more about it here https://babeljs.io/
You won't really be able to see your precompiled code in the browser. You should use an extension called React Developer Tools, you can get it for Chrome here https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
With the extension you can see much more relevant information about your React app.
I have been developing React Native for a while and I keep updating myself with new release of the framework by creating other new project to test. Currently I face problem when I reload the application in Debug mode on my old version of React Native.
Every time I reload, It displays Cached Bundle on Chrome as below
On my device
Runtime is not ready for debugging....
After going through googling, I follow these recommendation
reset watcher, uninstall/reinstall watcher
remove node_modules and reinstall it
But none of the solutions work.
*Notes
react: v 15.4.2
react-native: v0.42.3
os: ios
this error does not happen if I do not debug
After trying a lot of things, I just cleared browsing data(cookies and cache) of my google chrome and then started debugging and error is gone.