![]() In WebStorm 2018.1 we have significantly reworked the way this information is presented. Showing expression infoĪs you might know, if you hold Cmd or Ctrl and hover over a symbol in JavaScript or TypeScript, you will see some information about it, for example, where and how it’s defined and in TypeScript also the type information. Then open Expo client app on your phone or simulator, select the current app and enable remote debugging. One last thing that we need to do is change the port used to connect to the bundler. Instead of react-native start we need to run the npm task start to run the dev server – we can configure that if we click the edit icon next to the In it, disable Build and Launch application (since Expo takes care of it). To do that, you need to create a new React Native configuration. You can now debug React Native apps that use Expo in WebStorm. ![]() Note that in this case, Chrome Headless will keep running after you’ve stopped debugger in WebStorm.ĭebugging React Native apps that use Expo If you don’t want to see any new Chrome windows, you can add -headless flag to the Chrome settings in React Native debug configuration. You can use DevTools together with WebStorm to debug the app. Right now, when you start debugging React Native apps, WebStorm starts a new Chrome instance and attaches to it. The main reason for this decision was that node implementation was difficult to maintain for different react-native and node versions. ![]() We now rely on Chrome for debugging, which is used by React Native itself. Update on using node for debuggingĪnother update is that we have deprecated using Node.js as a backend for React Native debug process. Or if you have bundler already running, you can simply remove this step from the configuration (because you don’t need to run more than one bundler per app). You can also select an npm task from your project’s package.json that will start the bundler. By default, it will run react-native start. It’s now listed as a Before Launch task in the React Native configuration. There’s also now more flexibility with running React Native bundler. So if it’s unchecked and you start debugging this configuration, WebStorm will run React Native bundler and will wait for you to open an app in the simulator with the Remote debug enabled in the app. Therefore, in the updated React Native configuration, you can now select whether to build and open the app in the simulator as part of the run or debug or not – for that there’s now a Build and Launch Application checkbox. However, if you haven’t made any changes to the native code in your application since the last build and the bundler is already running, you don’t really need to rebuild it – you can just open the app in the simulator and then debug. Only after that, you can start debugging it. To start your React Native app for the first time, you need to do two things: run React Native bundler/packager and then build and launch an app on a simulator or a device using the react-native run-ios or run-android command. We would really appreciate your feedback on these changes in the comments: have you managed to successfully set up the configuration? Did it fit into your workflow? Were you able to set up debugging with Expo? Would you prefer to have a separate run configuration for the bundler? For that, we had to rework the React Native run/debug configuration significantly. In the React Native development, we now support several new run and debug scenarios, including debugging with Expo. WebStorm will create a new single-file component (or warn you if the name you’ve selected is already used or invalid) and import it into the parent component.Īll the data and methods used in the extracted template will stay in the parent component and will be passed to a new component with props. Select the part of the template you want to extract, press Alt-Enter and select Extract VueĬomponent. With this new intention you can now easily, without any copy and paste, extract a new Vue component from an existing one. To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts. You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version. The new WebStorm 2018.1 Early Preview build (181.3263.21) is now available!
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |