VS Code React app closes/crashes using Chrome debugger - reactjs

I am troubleshooting an issue I am having debugging a React application using VS Code with the Chrome debugger extension. I am using Windows 10 x64.
When I try to log into the application from the app's login page, the debug browser closes without any error (see screenshot below of break-point in code where the browser closes/crashes). I've tried debugging with both Chrome and Edge and I see the same issue with both browsers.
I do not have the same issue running the application without debugger from npm start. Nor do I see the issue when running the application from Chrome debugger on a different computer. Also my friend who is working on the same code does not see the issue on his computer when debugging or running the code.
I cloned an extra copy of the application code onto a different directory on my computer and that did not fix the issue.
I see a file is created \src\debug.log which seems like it could be related to the issue, but not sure what this is used for. The log file just shows the below error over and over.
ERROR:crash_report_database_win.cc(469)] failed to stat report
Any ideas on how I can fix this or what might be happening here?

I faced with the same issue in the Chrome version 85, I've updated to version 86.0.4240.75 and now is working for me

Here you'll find the Chrome Bug Report: https://bugs.chromium.org/p/chromium/issues/detail?id=1123329
The solution for now is to disable the new Javascript Debugger
"debug.javascript.usePreview": false

Related

VsCode now is showing main.chunk.js instead on original jsx file in debugging mode

Before I always debug an reactjs application in vscode directly in the jsx component file. Now I can't do it because when I try to debug vscode tries to debug a file called main.chunk.js. I'm using chrome too.
Vs Code Debugging a main.chunk.js
I would like to return debugging directly in component jsx file. Do you have a suggestions of how to do it ?
Same problem here! =(
The funny thing is that the first time it works correctly by vscode, but during the debug it stops working and goes into main.chunk.js.
-------- Edit
A modification I made here and that apparently worked...
In the browser:
Inspect > Preference Settings > Workspace > Add Folder (Project Root)
I was getting the same issue and tried multiple settings before reinstalling VSCode. Even installing the same version seems to have fixed this issue for me. Will update if I run into the issue again.
Happens to me sometimes with REACT + vs code.
Usually after I save, and react live updates and recompiles the code.
I find that if I stop the npm process which is serving react: npm start, and then restart both it, and the vscode debugger, then everything works.

Firefox React developer tools stopped working

I've been using the React developer tools extension in Firefox for some time, they're great. But yesterday the tools stopped working. The Components tab is available, but it doesn't show any content - my React component tree is simply missing, the pane is blank.
I've tried uninstalling the extension, closing Firefox, and reinstalling the extension.
I've tried rebooting my machine.
I've checked the Components tab settings, everything looks OK.
I've tried reverting to an old version of my project, back when the Developer tools definitely worked.
Has anybody got any ideas? There's no error, and I can't think of any way to investigate what's causing the problem. I haven't found anything by web searching.
And I can't switch to Chrome, because the tools won't install on Chrome under Linux!
OS: Linux mint Cinnamon
Firefox version: 63.0.3 (64 bit)
Phew, got it working again! I'm posting what worked for me in case it helps anybody else.
I completely uninstalled Firefox and reinstalled it following these instructions:
https://www.fosslinux.com/13881/how-to-clean-uninstall-and-reinstall-firefox-in-ubuntu.htm
Then re-added the Developer Tools extension, and it is now working. Firefox is now at version 69.0.

Why is create react app npm start deploying previous version of code?

When running npm start to deploy my code to localhost:3000 the version displayed is a previous version of the code.
I've tried resetting my editor (Visual Studio Code) and Node.js. Tried disable cache in the network inspector of Chrome.
The browser will reload upon a save, however it will not use the correct code. It continues to 'hang' on the previous version.
This is potentially an issue with the create-react-app service worker.
Can you please look for that file, and remove it or comment it out?
Otherwise, it is possible you have an error in your code.

Chrome Netbeans Plugin only shows blank page

I'm learning AngularJS at the moment and thought I would install netbeans as it supports debugging in chrome via a plugin. Or claims to at least...
I have followed the user guides and tutorials that I've found and always seem to falter at the same point:
Install Netbeans
Install chrome plugin
Create a simple sample project
Set the default web browser to Chrome with Plugin
Click run
At this point I always see a blank page loaded in Chrome. I suspect that this is a bug as all of the resources online seem sure that I should be able to see the default index.hmtl page in my browser...
I'm running on a MAC:
And my plugin version is:
My Netbeans version:
My Default Browser in Netbeans:
Does anyone know of any issues with running this configuration? No matter what I do I just see a blank page with a mangled URL like so when I hit run:
http://file:///private/var/folders/4l/3gq9477n6_952q1ztvz5ngdckcdyx4/T/blank2587611836421039861.html
When I open this file in VI I see one line in it:
<html :netbeans_temporary="true"></html>
This seemed to work as a workaround for me:
Open the project configuration and change the browser from Chrome with netbeans connector to Chrome
Run the project (the correct page should come up in Chrome)
Click on the Netbeans Connector in the upper right corner of the Chrome window
Select "Debug in Netbeans" (You should get the yellow information notice across the top of the window)
Go back to Netbeans and click on the 'debug main project' button.
My configuration is os/x High Sierra, Netbeans 8.2

Protractor Chrome angular could not be found on the page

I have had E2E tests set up to run in Chrome for a while, however they no longer work. I'm not sure when they stopped working as they've been neglected. The project uses grunt-protractor-runner (2.1.2) which uses protractor 2.5.1
I get the following error:
Uncaught exception: Error while waiting for Protractor to sync with the page: "angular could not be found on the window"
Below is screenshot of the output:
It actually opens up Chrome , however doesn't navigate anywhere. The omnibox says "data:," and nothing else:
One thing I'm wondering, is that chrome got somewhat locked down - and the omni box doesn't work as a google browser now - but I don't see why that would affect it as it should hit a URL directly.
Can anyone advise please?
Typically this error happens in one of two ways:
There is a race condition where protractor wants to start the tests before the page is fully loaded. In this case, make sure that your onPrepare function in your protractor conf returns a promise that gets resolved once all preparations work.
The test does not navigate to the app's url. In this case, make sure that you run `browser.get();
There is an error trying to start your app. This one's a little harder to fix. You can try running the protractor element explorer and see if there's an error in the browser console.
Ive seen this problem a few times myself. The last time I fixed it was by updating to the latest version of chrome driver and the latest version of protractor. Certain earlier combinations of chrome driver and protractor can cause this problem.
Grunt protractor runner can be used with latest versions of protractor according to its documentation. I suggest having a little read of how to update to the latest versions?

Resources