I use create-react-app 16.["react": "^16.8.4", "react-scripts": "^2.1.8"]
I read the blog on profiling react performance by Ben Schwarz using Chrome Dev tools:
https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad
He recommends to export your JS with source-maps.
When he does a performance trace, and clicks on a given react component in the User Timing section, specific component information shows in the Bottum-Up section with ** blue links to the source code** on the right hand side. This links don`t show, when I click on React components. When I click on components like for instance Evaluate Script, the blue links on the right hand side show.
Isn`t source mapping supposed to work "out-of-the-box" with create-react-app 16 in development.
I want to source-map only in development using Chrome Dev tools. Source mapping is activated in the Chrome Browser. What am I missing?
Thx in advance
P.S.:Since I haven`t got 10 reputation points I´m not suppose to use screenshots, which in this case made things not quite easy. I hope I managed to explain my problem sufficiently, though.
The Source Files for Debugging will be available under your localhost:3000 in the Chrome devtools.
We always tend to search under webpack://
Changes have been made to the newer versions I beleive
We always tend to search under webpack://
Changes have been made to the newer versions I beleive
Could you check the file
node_modules/react-scripts/config/webpack.config.js
Search there for the sourceMap and sourceMaps, and see if that is ok for you.
You can copy that file like "_original", and then set
sourceMaps: true,
in all ocurrences. After that, completely stop the app, and then start it again.
Is that working now?
To verify which sourceMap is working or not, add the sources to workspaces and check for the green dot:
https://developers.google.com/web/tools/chrome-devtools/workspaces/
Related
I've recently updated my react app to the latest version 18, but since doing that the html in localhost disappears after a few seconds. When I go to dev tools and look at the in 'Elements', it's empty but all of the content is still on the page, I just can't interact with it (click links or buttons, etc.).
Does anyone know what is causing this as I need to know before I push my code to production, as I'm not sure if this is a development environment issue.
I'm more than happy to post screenshots of my code, but I don't even know which screenshots would be helpful/relevant. Let me know if you need any. Thanks
When I run Lighthouse for the project I am working on, I get
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js
as no1 causer of unused JS.
How is that making sense from a performance optimization perspective?
I can't control what extensions the user runs in his browser.
I also can't find anything about the React dev tools in the project.
Would highly appreciate if someone could shed some light on that issue.
I found the issue is because the file of the devTools is installed when the page is loading... and it is useless in production mode.
So go to the extension and right click on it.
Then go to the manage extensions.
Then find the "Allow this extension to read and change all your data on websites you visit" change it to "on click".
I've built my website in Next.js, deployed statically via Netlify. Whenever I load it in a new tab, I get a white flash where the SVG logos are visible but nothing else, before the rest of the content loads in. I don't think this is a Flash Of Unstyled Content but it has a similar effect. I'm experiencing on desktop Chrome, Safari and Firefox, but doesn't seen to be happening on mobile. I've been trouble shooting for hours and am no closer to solving. Here's the repo if anyone wants to have a look. Any insights greatly appreciated.
Quoting directly from styled-components' docs:
Basically you need to add a custom pages/_document.js (if you don't
have one). Then copy the logic for styled-components to inject the
server side rendered styles into the .
Refer to our example in the Next.js repo for an up-to-date usage
example.
When using styled-components with Next.js you need to do a little magic in the _document.js. There is a with-styled-components example in the Next.js' repository. Please see here: https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js
I am trying to get my react extension working for local development, but "Components" and "Profiler" is missing in the Chrome developer tools. This only happens for local development, any other production code is displaying the two tabs in the developer tools as expected. I was wondering if this can be resolved somehow? I triple checked if the tabs are hidden on that occasion, and they are not. As said, this only happens for development version. When I click on the extension, I get the following message:
This page is using the development build of React. 🚧
Note that the development build is not suitable for production.
Make sure to use the production build before deployment.
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.
Based on this information I should have the tabs displayed.
When I go to a production app and click on the React extension, I can see the following displayed:
This page is using the production build of React. ✅
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.
And I also see those two tabs without a problem.
Any idea why this would happen? I searched for a solution, but did not encounter one. The only thing I found was someone mentioning you need to set the environment variable REACT_APP_ENV. I tried to set this value in the .env file where I defined REACT_APP_ENV='dev' as well as REACT_APP_ENV='development'. It did not resolve the issue, even with application and browser restart.
This happened to me as well. Looks like a bug in Chromium, but a temp solution is:
Change the chrome DevTools theme, only once it is required.
Now open devtools, you find the extension tab in DevTools.
You can again change the theme whatever you want to keep and this will fix your problem.
Check this out:
https://github.com/facebook/react/issues/19002#issuecomment-637462179
Was having the same issue, the Components and Profiler tabs weren't showing up, so I tried changing the theme as suggested by BobTheBuilder, that didn't work, so tried setting the debug levels to Default + Verbose (in addition to the others) in the console and they finally showed up.
The steps that helped me:
Remove React Developer Tools extension
Install React Developer Tools extension
Open a brand new tab containing react app
Open Dev Tools
React Developer Tools should be available
I had the same issue where Components and Profiler tabs were not showing. What worked for me was to open up the DevTools settings and to click the 'Restore defaults and reload' button (under the 'Sync' heading).
The steps that worked for me
Open chrome extensions
Disable the react dev tools extension
Enable the react dev tools extension
Enable Developer mode
Refresh target page
Where steps 1 and 2 are the little slide control at the bottom right of the extension in the extension manager.
Step 4 is the slider in the top right above all the extensions in the manager.
Below is the screenshot of my attempt to profile some React app.
As you can see, InspectionPage component is selected, but there is no information about children components displayed in the Bottom-Up tab, like, for example, we can see here - https://twitter.com/dan_abramov/status/994577100077191168.
What's weird - it's not always the case. Sometimes it's available and sometimes not given seemingly exact same conditions.
After struggling with this myself, my answer here is the only definite workaround I've been able to find.
It appears to be an issue with the current stable release of Chrome. Using a newer version of Chrome, such as Chrome Dev or Canary, will allow you to use the breakdown until the update makes its way into a stable release of Chrome.
Sources:
React Github
Associated Chromium Forum Post