![]() ![]() It's done this way to meet specification requirements. The most popularly recommended base Babel presets ( es2015 / env / latest) include the babel-plugin-transform-es2015-template-literals transform to make tagged template literals work in older browsers, but there is a caveat: output of that transform is quite verbose. With Babel, you're likely transpiling ES2015+ JavaScript to ES5-compliant code for older browser support. With WebStorm you can debug all kinds of applications written in JavaScript, TypeScript or Dart: Node. I probably looked at the most articles on the Internet, but my progress was minimal. The settings for JavaScript file will be nodemoduleswebpackbinwebpack.js and the Application parameters will be something like -config. I was able to reach the 2nd goal, however Im stuck at the 1st. My goals are: Make WebStorm stop at breakpoints Use source maps so the variable names are not obfuscated. js) and not your React application code (Im not sure why you are trying to use Node.js debugger to debug the code that runs in browser and not with Node. Wait, transpiling tagged template literals? Doesn't Babel do this natively? □ Our app is built using React + TypeScript 3.6.1 + Webpack. With this configuration, you are debugging the server-side code (namely, webpack-dev-server. WebStorm should be debugging your client-side code, and should stop at breakpoints as expected.This plugin transpiles styled-components tagged template literals down to a smaller representation than what Babel normally creates. Set some breakpoints in the client-side code. Start the application by clicking start in the npm panel, or typing npm start from the command line. Give the configuration a name.Įnter the URL to your app in the “URL:” field. Choose Run -> Edit Configuration, then add a “JavaScript Debug” item. I haven’t needed to try these steps yet, but I understand this is the procedure:Ĭreate a new Run/Debug Configuration. WebStorm starts debugging your server-side code, and should stop at breakpoints as expected. In WebStorm, choose Debug (Ctl-D) for the configuration you created in 4. This chapter covers Debugging TypeScript code with the help of source maps The role of linters Compiling and bundling TypeScript apps with Webpack Compiling. Set some breakpoints in the server-side code. For react-starter-kit, it’s “build/server.js”īuild all the files by double-clicking “build” in the npm panel, or typing npm build in the command line. Give the configuration a name, and if it isn’t already there, enter the path to your Node.js binary.Įnter the path to your react-starter-kit project folder in “Working Directory”.įor the “Javascript file:” enter the server-side code in the “build” directory. Choose Run -> Edit Configuration, then add a “Node.js” item. Look in the same file near line 156 for a line like this, and change it to:įilename: DEBUG ? '.js' : '.js',Ĭreate a new Run/Debug Configuration. You also have to remove references to “hash” from the output filenames. Look in for a line containing devtool (near line 204), and change it to: ![]() You’ll need to tell webpack to generate source maps when debugging. Clone the react-starter-kit repo, then npm install as usual.Update: WebStorm 2016.1 can automatically create the React Starter Kit 0.5.1 when you choose New Project… Debugging Server-side Code These steps worked for me with WebStorm 2016.1 on OSX 10.10.5. ![]() Configuring a NPM build script to simply run webpack, then adding that to the 'Before launch' section. As described above, WebStorm does not wait for it to complete before running the app, causing the previous version to be run instead. My application was built using react-starter-kit 0.5.1 – which is the current build as of mid-March 2016. After this step is executed on hitting the Debug button and displaying the webpack log and errors in the WebStorm tool output window, WebStorm will launch. Adding the webpack command to the 'Before launch' section of my Run/Debug configuration. The instructions came from a ticket WEB-20781, but they’re not in one place, so I figured I would write them out. It recently became possible to debug both server-side and client webpack applications with JetBrains’ WebStorm. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |