When there is an error because of X, in Firefox I can only detect this by looking at the console. The components still render. I've had this happen on other projects too, on different computers, making me think this is something I am going to have to address specifically for FF.
Versus in Chrome, where the helpful "error component" (IDK what this is called) renders, definitely making the developer aware. I've attached an image of this.
It's the screen that says this at the bottom: "This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message."
I really want this to appear in FF. Any clue how? I do have React devtools installed, but that is not the thing driving this, as you don't even need that tool in Chrome to see this rendered.
This was the cause of an extension getting in the way.
I solved this by disabling a handful of extensions at a time until I got the error screen to load. Then I reversed the process until I narrowed it down to one extension.
The culprit was a form auto-fill extension.
Related
Now I can see about VM line in my chrome developer tools like this.
There are some solution that I found,
such as make gray 'pause button'
however, it was already gray in my developer-tool
and it was also not worked for me.
How can I get rid of that VM messages in my console?
Thanks for read my problem.
With the right mouse click on a VM:xxx link select "Reveal in Sources panel", and study the code that causes those console messages.
In my case, I found there this line - original Method(...format WithStyles(args, 'color: ${color}'));, and other lines there revealed that it was referring to React Devtools Extention. So in its "Components" console tab => Settings gear icon => Debugging tab => I checked on the "Hide logs during second render in strict mode" option.
It helped me, but it can be some other extension in your case. Study the source code of a message first.
Open Chrome console, than select All Levels (it may appear like Default, if so, click it.) See in the list if Info is checked. If it is checked, close it. It helped me to get rid of it, hope it will help you to get rid of [VM] line in Chrome console too.
Check the image below:
Not sure if anyone had this problem, since I could not look it up anywhere but I cannot see any logs for react native app because the browser console tells me that "Another debugger is already connected" its a warning that keeps looping.
Metro bundler is telling me that I have to see the javascript logs in the browser. I cannot work on my app without debugging it, can anyone help ?
This happens if you have another tab opened at http://localhost:8081/debugger-ui as you can only have one instance of the debugger running.
You could either go back to the already running tab and see the logs there or close the other tab and refresh this one.
I am watching this video and when an error occurs he gets an actual error on the page and only a blank white screen when he deploys the site.
I see this a few times. However I only see white screen no matter if I am on local host or on production.
I see he is using chrome on Mac and I am using it on PC. Not sure if that is the difference.
While I can't say definitively, my suspicion is that you aren't using create-react-app to setup your project.
You will only see that error message if you have used CRA to set up your project, as that is a specific error handler that is baked into that project. If you're not using create-react-app, React should log an error to your console instead.
ReactJS smart enough to hide the errors to the users when the app is in production mode.
You will see only a blank page if the app gets crashed but if you inspect the page you will see small detail about the error in the console.
if you running the app in development mode you will see full details about the errors.
for this case cames componentDidCatch method to handle app crash errors, instead of the blank page display a “Something went wrong” message to the user or you can send XHR request to the server with the error info.
Check out this example of declaring and using an error boundary
https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
I'm wondering why my Chrome browser doesn't show when I start testing my angularjs app with protractor. It does execute the test though. I can see the output on my console.
However, if I change the value of browserName to point to firefox and rerun protractor, Firefox will fire up. I'll also see protractor doing its test on the browser.
I also had the impression that my Chrome was not showing up, but I just did not see it as I had too many open Chrome browser windows to even notice the one extra. The real reason I did not see it, was, that I was in full screen mode and the chrome window could not go to the forground as MacOS does not always allow this to happen.
For me I quit my usual Chrome session and then I saw that there was actually a new Chrome session appearing as I started the tests. (I know this is so obvious, but after a long day at work the most obvious things can sometimes lead to be puzzled. So this answer is for the ones who just happened have a bad day ;) )
I have a web-page written using AngularJS. When I open it using IE9, the top menu's templates aren't executed at all. However when I open the developer console in IE9 and reload, it all suddenly starts working fine and keeps working even if I close the console.
Can it be due to some "clever" IE9 optimizations, which are disabled when the console is open?
Has anyone encountered the same problem?
Is there something I can do about it? It seems impossible to debug it, since it works correctly when I am debugging it...
It's probably because you have used console.log used somewhere in the code which throws an error when the console is not active.