I'm new to reactjs, I created a project using the init command, and run the sample using the npm start however I was wondering if there is a way to run it on debug mode and attach it to the chrome debugger. I have tried something like node --inspect-brk=127.0.0.1:9229 .\node_modules\react-scripts\bin\react-scripts.js start however this just debugs the react-script.js file and I guess this is expected, but this is the only way I know to run a reactjs program.
NOTE: I have tried debugging with vscode however I'm interested on knowing what will be the procedure from command line.
Thanks in advance!
Related
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.
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 have a simple react/redux app that I can run from the command line via npm start, and debug from the browser, but I would like to continue its development using Intellij. Unfortunately, the snippets of advice in don't provide enough overall context, given my level of web-development experience, to help very much. And I haven't been able to find a simple example application to use as a pattern to figure out the process.
Principal question: I can open the application directory structure in Intellij, see all the file of my little application, and build it without errors, so I need to create a run configuration. Which configuration template should I use, and to what do I set the associated parameters so I can run and debug it from Intellij?
Thanks!
The docs give enough information to start from... You need building and starting your application using npm start (can be done in IDEA by opening your app package.json in the editor and clicking the Run icon in the gutter to the left of your start script). Then you have to create a new JavaScript debug configuration: choose Run | Edit Configurations, click Add icon, and choose JavaScript Debug from the list. In the URL field, enter URL you normally use to open your app in browser (http://localhost:3000/ or whatever it looks like). Click Debug
with your sample app:
select npm start run configuration, press Run
select Debug Application configuration, press Debug:
See https://www.jetbrains.com/webstorm/guide/tutorials/react_typescript_tdd/chrome_debugging/
I found two ways to run React-app in Intellij Idea but it has two different drawbacks:
in 1st scenario Idea doesnt work as debugger
2nd we need to run 'npm start' manually. If we need to rerun 'npm start' we need to stop it. The port will be still in use and we shall to specify the new port in the configs and in npm start another port from the start to successfully use it as debugger;
Let's configure react-app from the scratch:
1. add new configuration: JavaScript Debug
name: react-app
URL: http://192.168.1.106:3000/
Browser: Chrome
Script before launch: Run npm script [reactapp-directory/package.json]
|- package.json: ..../reactapp-directory/package.json
|- Command: start
|- Node interpreter: Project node(/usr/bin/node) 10.19.0
|- Package manager: Project node(/usr/bin/npm 6.14.4
Save changes
2. Open your script and add debug breakpoint
3. and click 'debug' button.
What we expect but dont achieve:
(I've already placed the issue-ticket in the jetbrains support
Idea):
Idea successfully runs the app with set npm start
opens browser new tab with specified url http://192.168.1.106:3000/
stops on the breakpoint
What happens exactly, there are two different scenarios:
1st: It performs first two steps (
successfully runs the app with set npm start
opens browser new tab with specified url http://192.168.1.106:3000/
) but doesnt work as debugger so we need to use browser DevTool to debug
2nd: To make it work the build-in debugger you should to change the run steps:
run 'npm start' from the shell by yourself
click 'debug' with the set configuration
remove from the config the Script before launch
or
run see the running script clashes with previous npm start one and you need to refuse it by pushing button 'n';
Idea opens new tab with specified url and successfully stops on the chosen debugging point
I found the simplest way the achieve all the above without hustle. Open Terminal on Webstorm and start your app normally using npm start as shown below.
npm start
Click on the link while pressing cmd + shift on Mac, on Windows or Linux use Ctrl + Shift and a click. This will open debug sessions and all your break points will be observed
My code runs a previous version of itself, so even though i completely remove all the code, it still runs the old one. I've read a few other posts regarding this problem, and tried it out. My temporary solution is to build the project before running it, but that is kinda stupid. the .exe file is in the Release folder, and my Debug folder dissapeared after the Clean.
How do I stop needing to build the project before everytime I need to run it?
I found out there's a button called auto build in the Launch Configuration properties window. So it build everytime I run it.
I'm new to Sencha and so for Sencha Test. On my Windows 10 machine I installed the latest Sencha Studio and imported a sample project for ours. Following tutorials I created a test suite with the sample "it should pass 1 = 1" test. But I cannot run this test, neither via IDE nor CLI.
On the scenario I selected my local Chrome browser and the sample test. When I click on RUN, the browser selection on the right gets updated with gray bullets or void but nothing else happens. Changing the scenario's test type to "Webdriver" or "In-browser" does not change anything in regard for the outcome.
I also tried to execute the test via CLI but no success either. I always end up with this message: "Sencha Test v2.0.2Error: Sencha Cmd install directory not found : C:\Users[MY_PROFILE]\bin\Sencha\Cmd." That's right, my Sencha Cmd installation is located in C:\dev\Sencha\Cmd and works properly. Where's the configuration to change that stc can find Sencha Cmd?
Any hints how to get the tests run? Is an archive server mandatory to run the tests? Is there anything that I might have missed? Using Google was no help so far.
Maybe that's helpful: The Event Recorder does also not work properly. When I click on recording, my Chrome does not get opened, I have to open it by myself and navigate to the URL provided by Sencha Studio. Weird.
Thanks in advance.
After several hours of thinking and searching I think the most critical error was to NOT install Sencha Cmd and Sencha Test into the installer's recommended folder. I still have issues when starting tests but I'll post an answer if there's anything interesting about this topic.
Also, it seems that Sencha Test always expects that a built project exists. So just checking out the sources without building them is not sufficient to run tests, even if you're testing e.g. the staging.