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
Related
Since this morning I can't launch any React JS Project in my dev server.
I explain. When I launch npm start command, all works fine, no any error message, all works as usual, it opens me a tab in my browser, but it loads forever and I just have a blank page loading.
For information, I works on a Windows System, with WSL Debian distro.
I tried to open it with http://localhost:3000, http://127.0.0.1:3000 and with my local IP adress (that's an exemple) http://192.168.0.1:3000, I also changed browser (Chrome / Edge ), and every thing is the same.
After that I launch with npm start an Express project -> it works like a charm.
I also tried with a Symfony project, here with the PHP dev server php -S 0.0.0.0:8000 -t public and same as Express, it displays normaly in my browser.
So I'm pretty sure there is something with React, but that's on all mys REact projects, not with one particulary, and again, there is no error in my console, output is like everyday, so that's very strange and I really don't get it!
If someone has any idea 🙏
image: https://i.stack.imgur.com/bpDuM.png
I just installed EasyPHP Devserver, it would enable you to access PHPmyAdmin clicking on module at the bottom of the page, the problem is that in order to start those modules You must start the Database and HTTP before.
Http works, but when I click on Database it doesn't do nothing.
I've also tried to use Xampp, but neither this works, maybe my pc has some problem with virtual ports...
it looks like it's not a virtual ports problem !
I started the development with easyphp, but after that I preferred to use WampServer, and even more linux debian.
if you want to work with wamp, don't forget to install Visual Studio :)
I started a new developer role a few days ago and made some environmental changes to adapt for work. Since then, my hot reload/fast refresh has just stopped working entirely. Changes don't show up even if I refresh the page manually. Only shows changes when I stop the dev server and restart it with 'npm run dev'. The triangle indicator at the bottom right should be active, showing active reload of the window (this no longer shows up consistently either, and if it does the page gets reloaded, but alas the proposed changes aren't visible)
Context:
It has this effect on all NextJS and react applications of mine. Even running a basic project template off the NextJS examples page shows no hot reload working.
I researched this issue and it seems wrong imports (e.g. importing components using lowercase or files in the pages directory being capitalized) can cause this, but I combed through the code and can't spot any issues (of course, I could be missing it but my codebase is over 300 files).
Service workers in the background can cause issues, but I cleared my browser of all of them to be sure and it still doesn't fix it.
I installed ngrok for tunneling for work purposes and docker-compose to handle the work dev. environment.
Made sure I'm using the latest Next version. Even deleted node_modules and ran npm install. Deleted .next and the out folder and still no luck.
Anybody have any ideas or clues to what I should try next? Is it related to the stuff I installed for work? Something related to VS code or WSL2? Seems so puzzling it kind of just happened overnight. Thanks for any insight or advice!
System information
OS: Windows (WSL2 virtualization for VS code)
Browser: Chrome
Version of Next.js: 10.0.3
Version of Node.js: 14.8.0
Deployment: npm run dev for development work; amplify publish for AWS hosting
The problem is with WSL2. I use WSL2 inside VS Code; which is a big performance upgrade in the Linux environment. The problem is WSL2 is actually in a 'virtualization' and thus cannot send information from VS Code AND the browser (localhost:3000) at the same time.
It's a big issue they are working on and there is no fix yet for it. That's why fast refresh doesn't work because localhost is not receiving the changes being made. Either proxy through or revert back to WSL1 https://github.com/microsoft/WSL/issues/4769
Solution provide by OP on question section
Add a .env file or a .env.local file to your root and put this line on it:
WATCHPACK_POLLING=true
Now, restart your server.
Thanks I encounter the same issue with WSL2. I just switch to windows terminal and it works.
If you run Poweshell as administrator and run
wsl.exe -l -v
This will give you th eversion of wsl your distros run on.
I am personally using Ubuntu, and this is the output
Ubuntu Running 2
docker-desktop Stopped 2
docker-desktop-data Stopped 2
To switch to wsl 1,
Run
wsl.exe --set-version Ubuntu 1
and if you wanna switch back,
run,
wsl.exe --set-version Ubuntu 2.
This worked for me.
In my react projects, I just add in my .env file at the root project folder the values
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
and it works! enjoy!
The problem is with WSL2. I use WSL2 inside VS Code. But React JS and Next JS projects don't auto-reload. So, add a .env or .env.local (recommended) file to your root and put these lines on it:
WATCHPACK_POLLING=true
CHOKIDAR_USEPOLLING=true
Now, restart your server.
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
I am trying to debug an Angular application using IntelliJ Webstorm (10.0.1). I created an application with Yeoman (1.4.6) using the command yo angular. I then opened the directory as a project in Webstorm. (This is the same configuration as described in "Grunt Server and WebStorm javascript debugging (and SpyJS) not working".) I can run the application using grunt serve both from the command line and from within Webstorm. I now want to set breakpoints and step through the Javascript in Webstorm.
I followed the instructions in How to debug AngularJS with Intellij, but debugging still does not work. Specifically, I start the app with grunt serve and then try to connect with my debug configuration, but the debugger never connects. The Debugger window in Webstorm reads "Waiting for connection from JetBrains IDE Support Extension for Chrome (IDE port 63342)."
I am on OS X (10.10.2). My default browser is Chrome (41.0.2272.118). The JetBrains IDE Support extension (2.0.7) is installed and enabled in the browser. It is using the default port 63342.
My Angular application is running in the default location http://localhost:9000.
In the debug configuration, my "URL" is http://localhost:9000/ and I map the index.html in my project to the "Remote URL" http://localhost:9000/index.html.
I am asking this separately from the other Webstorm debugging questions on StackOverflow because those do not mention the "Waiting for connection" message and their solutions are to follow the instructions that I started from.
Any ideas on what I'm doing wrong?