From 704651c9e2987255f2ba85a9442f146d8c8baaee Mon Sep 17 00:00:00 2001 From: Ekaterina Prigara Date: Mon, 21 Aug 2017 14:58:33 +0200 Subject: [PATCH 1/3] Debugging in WebStorm --- packages/react-scripts/template/README.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 71d6b25d360..9121f8fa732 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -243,9 +243,11 @@ If you want to enforce a coding style for your project, consider using [Prettier ## Debugging in the Editor -**This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) editor.** +**This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) and [WebStorm](https://www.jetbrains.com/webstorm/).** -Visual Studio Code supports debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools. +Visual Studio Code and WebStorm support debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools. + +### Visual Studio Code You would need to have the latest version of [VS Code](https://code.visualstudio.com) and VS Code [Chrome Debugger Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed. @@ -270,6 +272,16 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor. +### WebStorm + +You would need to have [WebStorm](https://www.jetbrains.com/webstorm/) and [JetBrains IDE Support](https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji) Chrome extension installed. + +In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and select `JavaScript Debug`. Paste `http://localhost:3000` into the URL field and save the configuration. + +Start your app by running `npm start`, then press ^D on macOS or F9 on Windows and Linux or click the green debug icon to start debugging in WebStorm. + +The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. + ## Formatting Code Automatically Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/). From 24b7baa0b5821c5a28ed1151a0303625ab46caaf Mon Sep 17 00:00:00 2001 From: Ekaterina Prigara Date: Mon, 21 Aug 2017 15:03:13 +0200 Subject: [PATCH 2/3] Fixed formatting for shortcuts --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 9121f8fa732..cc353bf0484 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -278,7 +278,7 @@ You would need to have [WebStorm](https://www.jetbrains.com/webstorm/) and [JetB In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and select `JavaScript Debug`. Paste `http://localhost:3000` into the URL field and save the configuration. -Start your app by running `npm start`, then press ^D on macOS or F9 on Windows and Linux or click the green debug icon to start debugging in WebStorm. +Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm. The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. From 905b782ad5812d10d47bea604822a91d2d7dbc3a Mon Sep 17 00:00:00 2001 From: Ekaterina Prigara Date: Mon, 21 Aug 2017 17:29:57 +0200 Subject: [PATCH 3/3] Added note about default URL --- packages/react-scripts/template/README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index cc353bf0484..c55ccdf949f 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -269,6 +269,7 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco }] } ``` +>Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration). Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor. @@ -278,6 +279,8 @@ You would need to have [WebStorm](https://www.jetbrains.com/webstorm/) and [JetB In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and select `JavaScript Debug`. Paste `http://localhost:3000` into the URL field and save the configuration. +>Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration). + Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm. The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.