I'm trying to debug the back-end of the react - express application. I'm using webpack for bundling.
How to edit configuration on WebStorm so that I could debug both front end and back-end? I'm using WebStorm 2016.
You need to create and start a Node.js run/debug configuration to debug your server-side code and create and start a JavaScript debug configuration for the client-side code.
In the Node.js configuration in the JavaScript file field you need to specify the path to file that kicks off the server.
In the JavaScript configuration in the URL field specify the URL your server is running on. You might also need to configure the mappings between local paths and remote URLs: that's most probably should be between the folder where the component are located and webpack:///. (see this answer for more details).
Also make sure that you have dev-tools: 'source-map' in your Webpack configuration.
Went through some documentations on WebStrom and finally managed to get it working. First select Edit Configurations then a menu will pop up which will allow you to edit Run/Debug Configurations. Click the + button on the left side and add a node js. From that change the Node interpreter from default(local) node_modules to the babel node inside your project dependencies. eg ~/MyWork/Project/node_modules/.bin/babel-node. Then Add --presets=babel-preset-es2015 as Node Parameters. Fill the rest of the configurations and click save and run the project.
Here is an example:
Related
I am trying to debug a nodejs + nest application in IntelliJ, I am able to start the application using two types of configs.
Using Yarn (through NPM configuration template in intellij)
Using Node (I am not sure but when I use the main.js from dist folder then I get some debug point but it is useless as it is not pointing to my actual code base)
Debugger doesn't work for any of the above options!
I am posting screen shots of both the configurations.
New to Node + IntelliJ, so not sure what did I do wrong in both the configurations! Any help would be appreciated.
Intellij Version is 2020.3.3 And NodeJS application exposes several APIs, I am trying to call the APIs using a Postman and expect it to debug.
Debugging in both main.ts and controllers works for me when using the configuration below:
See also https://github.com/nestjs/nest/issues/993 for some recipes
Preact guide says
To alias any package in webpack, you need to add the resolve.alias section to your config. Depending on the configuration you're using, this section may already be present, but missing the aliases for Preact.
But using any of the official templates (default, typescript, material web components, etc...) doesn't generate any webpack.config.js file and preact has no eject command like react to access the full project configuration.
So, few things:
Firstly, Preact and Preact-CLI are two separate items.
You're quoting the section from our docs labeled "Integrating into an existing pipeline". This means adding Preact to an existing React application of yours, but, if you're using one of our templates, then this is a new project, not an existing one.
preact has no eject command like react to access the full project configuration.
There is no way to "eject" React. What you're referring to is the build tool called "Create React App".
We do allow for full configuration of the Webpack config with a preact.config.js. With this, you can edit any parts of the config that you'd like: change plugin options, add loaders, remove plugins, etc., without owning the configuration yourself. You can just comment out your changes in your config and you're back to the default config.
We believe CRA's "eject" is a poor API and therefore don't match it.
Im NodeJS newbie. I have JS application for running selenium-based tests of web aplication. My problem is that I cannot debug this application.
How to debug my JS application. My editor is Visual Studio :) or any simple text editor.
My application is started by code
node src/test/UI/app/Tests.js
Any module needed for debuging JS apps started under NodeJS?
As an example, you can debug your Node.js in WebStorm.
There are two scenarios of how you can do that.
Remote debugging. In that case you need to run you test with --inspect flag (node --inspect <pathToTest>). Then you need to create a debug configuration (port 9229 is a default debugging port used by Node.js). See details on the screenshot bellow.
Start Node.js app through WebStorm debug configuration. In that case you just have to specify another debug configuration by setting path to node binary and specifying application entry point (in that case it is your test file). Screenshot bellow illustrates details.
After that set a break point and launch your selenium test.
Happy debugging.
I'm in a jhipster project using both Angular2 and bootstrap 4.
On the jhipster web site, there's a page about how you can customize bootstrap variables, but I can't make this work with realtime changes.
When I put my customized variables in vendor.scss, if I want to see my changes, executing yarn run webpack:build:vendor is not enough, I need to rerun yarn start everytime....
How do I make so my changes are automatically applied ?
You can customize it in the vendor.scss file under the content folder
And make sure you are running the code on
localhost:9000 port.
I recently started to use the new "devtool" module for debugging Node.js in Chrome Dev Tools.
The debugging process was a dream until I tried to use some ES6 code by using require("babel-core/register"); in the entry point of my application.
I could still use the devtool debugger but everything except my "node_modules" files where dumped into the "no domain" folder.
I assume the es6->es5 compiling needs some sort sourcemap to keep the folder structure possible.
Any ideas?
Way late to this but hope this helps someone, here goes.
From my understanding you're trying to use es6 features when running projects using the devtool command to server projects via Chrome Dev Tools?
To do this follow the babel docs on setting up a new project (make sure you have a .babelrc) then server your projects by running
devtool -r babel-register [MY_FILE_NAME.js]
Instead of simply devtool [MY_FILE_NAME.js]
You don't need to add any imports in your app's entry point if you followed the babel docs correctly.
see https://github.com/Jam3/devtool