I can debug just fine using Chrome devtools for a while, but at some point my breakpoints stop working. They are still enabled (darker blue in the gutter). "debugger;" statements still break. Quitting and restarting Chrome does not solve the problem, but completely rebooting my machine does.
Does this ring bells for anyone? I have not tried uninstalling and reinstalling chrome.
Chrome is current as of today: Version 74.0.3729.169 (Official Build) (64-bit)
Using create-react-app, VSCode, can supply version #s but doubt they are relevant.
Any help appreciated! Thanks
Related
I'm using VSCode with WSL. With the Remote WSL extension I'm opening my project in VSCode. I'm running my project (it's a react project) in WSL. First I can connect to my application on localhost:3000 but after a while my browser says that it couldn't connect to it. My project is running fine without errors. I've tried it with Chrome, Edge and Firefox (with and without extensions). Same thing. After a while it loses connection. If I run the project on my local windows it works fine. It used to work with WSL too just a few days before.
Brower connection error
My project running without issues
I've tried updating all of the WSL packages and reinstalling all of my VSCode extensions but it didn't help. Any idea what's causing this issue and how to solve it?
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
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.
So, I am using WebStorm to develop an React app with webpack, usually I just run webpack-dev-server in the console, the server is at port 8081 and I open the browser, visit localhost:8081//build and all works with hot reload.
Today I want to debug deeper into the code with debugger in WebStorm, I never use break points before, so I went to this page https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/
Though I did not install create-react-app, because my project is not generated by the module, I created project manually with webpack.config.js and package.json, I do not know how to generate a existing project.
Second, Instead of run npm start as the instruction, I also passed this part because I think web-dev-server is already a server, I do not need another one.
Then I followed the instructions from here, created a debug configuration with an url of "localhost:8081/build" as there is the webpack-dev-server location.
At last I tried to set "debugger - built-in-server - port" to 8081, I also installed JetBrains IDE Support addon for Chrome and tried to set the port to 8081 either. But WebStorm told me that the port is not free and also the addon on Chrome toolbar now is grey.
Then I thought that the addon port and debugger port is not associated with webpack-dev-server, only the debug configuration is associated, but these thoughts are all guesses, because I really do not understand.
At last I run debug, the app index page is opened and it said JetBrains IDE support is debugging, I modified any file and saved it would hot reload, console in WebStorm showed result as in Chrome console, seems all works great, except breakpoints, they are all ignored, like they were not there, in the debugger tool window in WebStorm, the Frames window shows "Frames are not available", the Variables window shows a blue round icon followed by "Connected to JetBrains Chrome Extension" and that is all, none variable shows there.
I am sorry I did not understand both WebStorm debugger and breakpoint debugging well, this was my first time I do not know how to get stuff together.
Should I use create-react-app explicitly to generate a project (please no), or is there a way to make all this working?
At last I tried to set "debugger - built-in-server - port" to 8081, I
also installed JetBrains IDE Support addon for Chrome and tried to set
the port to 8081 either. But WebStorm told me that the port is not
free and also the addon on Chrome toolbar now is grey.
Please set it back to default - port specified there is a port the IDE is opening on start for debugging/serving static files, it has nothing to do with the port of the server your application is hosted on
seems all works great, except breakpoints, they are all ignored
you need to make sure that the sourcemaps are generated properly (devtool: 'source-map' is the most preferred option) and (probably) specify the remote URL mappings in your debug configuration (check https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/, 4. In WebStorm 2016 (.1, .2 and .3) section for some hints).
If it still doesn't work, please create a support ticket to get the assistance on setting up the debugger
I'm trying to automate my test suite on Safari 5.1.7 on Windows 8.1. I did install the extension provided in Seleniumhq.org. But I'm getting an error saying
Exception:
Did not receive a connection from the Safari extension. Please verify that it is properly installed and is the proper version..
I'm struggling with this since a very long time but didn't receive any help. Googled a lot but left unsuccessful. If anyone is automating safari on windows please help me.
Followed the steps mentioned here.
According to this post on SO, Is it worth downgrading for Safari? I could run my test suite on IE11, Firefox, Chrome and Opera. Can someone please guide me with this issue.
Thanks.
Using Selenium Webdriver 2.47, we can automate safari on windows platform. Source from here.