![]() Please read Debugging React apps created with Create React App in WebStorm for guides. In latest version of Webstorm, debugging the code of a React project is as easy as debugging JS code in normal html pages (thanks for the sourcemap, the debugger can recognize breakpoints in the code before pre-compiled by Babel). So why not just debug the /tmp/myscript.js file with the same argument? Debug React project ![]() ![]() The simplest way to debug the code in subprocess is getting the arguments of the subprocess and running the subprocess independently with the arguments.įor example, in above example code, the subprocess execute the Javascript code in /tmp/myscript.js with argument start. Just like subprocess.Popen in Python, Javascript cannot debug the subprocess directly. There are some projects like create-react-app may use a third-party library cross-spawn to do the same things. If you need the subprocess blocks the main process, you can use child_process.spawnSync instead. Also note the spawn function is an async function which will not block the rest code of the file. The function accept a callback function and will call it when the subprocess is actually running and generate stdout texts. Here is my result package.json file.Const ) Open the package.json file and add a few commands inside the scripts section. But noted let’s set up one more thing before we will move to debugging. Nice! As a result it looks like everything is working. # compile source (you could also just run tsc) Let’s compile it and run it by executing the following commands. dist.Ĭonsole.log('Hello World! We will setup TypeScript debugging in WebStorm!') Find it in the file, remove the comment, and change it to. As for dist directory, we need to edit the parameter outDir. TypeScript compiler will scan src directory by default. Afterward we need to edit it a bit to make it work with my preferred directory structure. Open the directory in WebStorm, and then open the tsconfig.json file. Now time to edit TypeScript configuration and make it work as excepted with my directories. My preference is to use src directory for TypeScript files, and dist directory for compiled code. Now I would like to set up a basic directories structure. To make TypeScript work we need to install it and initialize it. We can create a directory and initialize npm there by following commands. Better to have some tools in the pocket that will allow you to use more power. However, I should say sometimes the program’s complexity makes console.log debugging pretty hard. Of course, you can debug with console.log and don’t use any external debugger. Also, all terminal commands might not work in Windows systems.Īnd one more important thing. Setup the TypeScript projectįirst of all, you should have installed NodeJS and WebStorm to make all scripts on commands works. It will tell tsc to build source maps and that will help WebStorm to know where to stop if you put a breakpoint. Long Story Short: you need to set sourceMap parameter in tsconfig.json to true. I will set up a project from scratch and show you how to make the WebStorm debugger work. ![]() If you want to put a breakpoint and check variable values, you have to tell the debugger where it should stop. After compilation code will not be the same. As you know, TypeScript code should be compiled into JavaScript before running in a browser or NodeJS. In this article, I want to show you how WebStorm can debug TypeScript code.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |