I am using Cypress to test a React app.
is there a way to make this warning message in my console go away:
Download the React DevTools for a better development experience: ...
you will note that I see this warning only when running the controlled Chrome instance, not when looking at the same app in the normal Chrome browser. (As well, I do have the React dev tools installed and activated in Chrome so it seems this message is a side effect of the Cypress test-runner)
Add this regex to the DevTools console filter input:
-/React.DevTools/
Related
OS: MacOS Catalina 10.15.5
Browser: Firefox 78.0.2 with React Developer Tools 4.8.0 add-on enabled
IDE: Visual Studio Code 1.46.1
Framework: React
This all of a sudden started happening today. Maybe Firefox updated in the background without me knowing, but one minute this never happened, and now it won't stop happening.
Problem: Whenever I save a local file I am working on that has a React error (could be a missing component prop, or improper syntax), Firefox reloads the page but then directs me to the Debugger DevTools tab, and pauses the page. I then have to navigate back to the Console DevTools tab, and manually reload the page. It's very frustrating.
When the browser re-directs to the Debugger, there is a dialogue on the page saying "Paused on debugger statement". The highlighted debugger code is:
// --- Welcome to debugging with React DevTools ---
// This debugger statement means that you've enabled the "break on warnings" feature.
// Use the browser's Call Stack panel to step out of this override function-
// to where the original warning or error was logged.
// eslint-disable-next-line no-debugger
debugger;t.apply(void 0,o)};n.__REACT_DEVTOOLS_ORIGINAL_METHOD__=t,// $FlowFixMe property error|warn is not writable.
The only way to stop this is to disable the React Developer Tools add-on. I don't know how to disabled the "break on warnings" feature. Any help would be deeply appreciated.
===
Edit: I looked at the React Developer Tools Profiler tab, went to Settings, then Debugging, and noticed that the "Break on warnings" was already unchecked. Still unsure what the solution could be.
It's a bug from the latest React Dev Tools (4.8.0): https://github.com/facebook/react/issues/19308
Workaround is to toggle the Break on Warnings setting on and then off. They've already cut a release (4.8.1) that fixes the problem.
I had the same issue. Toggling the setting on then off again fixed it.
My basic static React Redux TypeScript app works locally on Windows, and then it also works when I deploy to GitHub Pages for every device I've tested except iPhone 6 iOS 12.0.1 (where it is a blank white screen).
I've researched many articles, such as:
React/redux app renders blank screen on Safari
React/Node Uncaught SyntaxError: Unexpected token <
Why deployed react app on gh-pages is showing blank page on different browsers while showing correctly on my browser?
https://stackoverflow.com/a/57027870/470749
https://community.netlify.com/t/react-application-builds-deploys-into-a-blank-page/2571
https://github.com/facebook/create-react-app/blob/061d1e46fcd4766d38b45499c3d29cfaa2b7d0af/packages/react-scripts/template/README.md#github-pages
https://caniuse.com/#feat=es6
Most of them try to solve the case where all devices show a white page. But that's not my scenario.
Others talk about how older browsers need polyfills, but I've already added try/catch blocks around my use of fetch.
I've also tried changing to "homepage": "." in package.json, but again, I don't think that's related to the issue because most browsers already work, so I know that the assets are being accessed.
Any ideas?
Finally I remembered that I could use the free http://xip.io/ service to browse from my iPhone to the "local" React server hosted on my Windows machine.
That way, I could see error messages that wouldn't be visible on production (at GitHub Pages).
I discovered that the error was "ReferenceError: Can't find variable: IntersectionObserver".
So the solution would be to use a polyfill.
See helpful links:
https://stackoverflow.com/a/55767479/470749
https://stackoverflow.com/a/59368511/470749
https://github.com/mhartington/lazy-load-image/issues/1#issuecomment-372384646
https://webkit.org/blog/8582/intersectionobserver-in-webkit/
https://caniuse.com/#feat=intersectionobserver
"IntersectionObserver API is supported on iOS Safari since 12.2." That explains why it worked on other iPhones but not mine.
As the title shows, Can i know how many times when a class component or a functional component render? Is there any chrome extension or webpack plugin?And now i just can get this by console.log
just console.log to log the times
You should use react-devtools:
Install react-devtools extension.
While on a development environment, excess your browser dev tools.
Go to Profiler tab
Press Start-Profiling
Examine the snapshot
Dashboard Component (0.6ms of 86.ms) - Rendered at 1.3 for 83ms
Refer to official walkthrough video of the profiler on YouTube.
Im running react 16.8+ on Internet Explorer 9.
Initially the page renders as blank without any react app in the root element.
When I open the F12 dev tools and refresh the page it renders fine.
When I close the dev tools and refresh it also renders fine.
Does anyone have an idea why initially the page is not rendered?
Apparently since redux is trying to console log the app freezes, since console log is only available when dev-tools is open. Therefor add the following polyfill in your index.tsx / index.js above all other imports:
yarn add console-polyfill
I am following the Debugging page of the official doc as below URL.
On the "Inspecting Component Instances" it says "Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential." But I can't find debuggerWorker.js on my dev tools.
https://facebook.github.io/react-native/docs/debugging.html#react-developer-tools
What steps should I take to install debuggerWorker.js?
It's in Page panel, not overrides