From 1f9edcb0ba6eecdf97927ab46ca257728a72dae2 Mon Sep 17 00:00:00 2001 From: Joost Date: Fri, 22 Dec 2023 10:20:03 +0000 Subject: [PATCH 1/7] Direct copy of v4 recipe --- .../developing-and-testing/debug-safe-app.md | 138 ++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 docs/recipes/developing-and-testing/debug-safe-app.md diff --git a/docs/recipes/developing-and-testing/debug-safe-app.md b/docs/recipes/developing-and-testing/debug-safe-app.md new file mode 100644 index 000000000..aeb9f2eb1 --- /dev/null +++ b/docs/recipes/developing-and-testing/debug-safe-app.md @@ -0,0 +1,138 @@ +# How do I debug a SAFE app? + +## I'm using Visual Studio +In order to debug Server code from Visual Studio, we need set the correct URLs in the project's debug properties. + +### Debugging the Server + +#### 1. Configure launch settings +You can do this through the Server project's **Properties/Debug** editor or by editing the `launchSettings.json` file which is in the **properties** folder. + +After selecting the debug profile that you wish to edit (**IIS Express** or **Server**), you will need to set the **App URL** field to `http://localhost:5000` and **Launch browser** field to `http://localhost:8080`. The process is [very similar](https://docs.microsoft.com/en-us/visualstudio/mac/launch-settings?view=vsmac-2019#configure-the-start-url) for VS Mac. + +Once this is done, you can expect your `launchSettings.json` file to look something like this: +```json +{ + "iisSettings": { + "windowsAuthentication": false, + "anonymousAuthentication": true, + "iisExpress": { + "applicationUrl": "http://localhost:5000/", + "sslPort": 44330 + } + }, + "profiles": { + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "launchUrl": "http://localhost:8080/", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "Server": { + "commandName": "Project", + "launchBrowser": true, + "launchUrl": "http://localhost:8080", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + }, + "applicationUrl": "http://localhost:5000" + } + } +} +``` + +#### 2. Start the Client +Since you will be running the server directly through Visual Studio, you cannot use a FAKE script to start the application, so launch the client directly using e.g. `npm run start`. + +#### 3. Debug the Server +Set the server as your Startup project, either using the drop-down menu at the top of the IDE or by right clicking on the project itself and selecting **Set as Startup Project**. Select the profile that you set up earlier and wish to launch from the drop-down at the top of the IDE. Either press the Play button at the top of the IDE or hit F5 on your keyboard to start the Server debugging and launch a browser pointing at the website. + +### Debugging the Client +Although we write our client-side code using F#, it is being converted into JavaScript at runtime by Fable and executed in the browser. +However, we can still debug it via the magic of source mapping. If you are using Visual Studio, you cannot directly connect to the browser debugger. You can, however, debug your client F# code using the browser's development tools. + +#### 1. Set breakpoints in Client code +The exact instructions will depend on your browser, but essentially it simply involves: + +* Opening the Developer tools panel (usually by hitting F12). +* Finding the F# file you want to add breakpoints to in the source of the website (look inside the webpack folder). +* Add breakpoints to it in your browser inspector. + +## I'm using VS Code +VS Code allows "full stack" debugging i.e. both the client and server. Prerequisites that you should install: + +#### 0. Install Prerequisites + +* **Install** either [Google Chrome](https://www.google.com/chrome/) or [Microsoft Edge](https://www.microsoft.com/en-us/edge): Enables client-side debugging. +* **Configure your browser** with the following extensions: + * [Redux Dev Tools](https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en): Provides improved debugging support in Chrome with Elmish and access to Redux debugging. + * [React Developer Tools](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi): Provides access to React debugging in Chrome. +* **Configure VS Code** with the following extensions: + * [Ionide](https://marketplace.visualstudio.com/items?itemName=Ionide.Ionide-fsharp): Provides F# support to Code. + * [C#](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp): Provides .NET Core debugging support. + +#### 1. Create a launch.json file +Open the Command Palette using `Ctrl+Shift+P` and run `Debug: Add Configuration...`. This will ask you to choose a debugger; select `Ionide LaunchSettings`. + +This will create a `launch.json` file in the root of your solution and also open it in the editor. + +#### 2. Update the Configuration +The only change required is to point it at the Server application, by replacing the `program` line with this: + +```json +"program": "${workspaceFolder}/src/Server/bin/Debug/net6.0/Server.dll", +``` + +#### 3. Configure a build task +* From the Command Palette, choose `Tasks: Configure Task`. +* Select `Create tasks.json file from template`. This will show you a list of pre-configured templates. +* Select `.NET Core`. +* Update the build directory using `"options": {"cwd": "src/Server"},` as shown below: + +```json +{ + // See https://go.microsoft.com/fwlink/?LinkId=733558 + // for the documentation about the tasks.json format + "version": "2.0.0", + "tasks": [ + { + "label": "build", + "command": "dotnet", + "type": "shell", + "options": {"cwd": "src/Server"}, + "args": [ + "build", + "debug-pt3.sln", + // Ask dotnet build to generate full paths for file names. + "/property:GenerateFullPaths=true", + // Do not generate summary otherwise it leads to duplicate errors in Problems panel + "/consoleloggerparameters:NoSummary" + ], + "group": "build", + "presentation": { + "reveal": "silent" + }, + "problemMatcher": "$msCompile" + } + ] +} +``` + + +#### 4. Debug the Server +Either hit F5 or open the Debugging pane and press the Play button to build and launch the Server with the debugger attached. +Observe that the Debug Console panel will show output from the server. The server is now running and you can set breakpoints and view the callstack etc. + +#### 5. Debug the Client + +* Start the Client by running `dotnet fable watch -o output -s --run npm run start` from `/src/Client/`. +* Open the Command Palette and run `Debug: Open Link`. +* When prompted for a url, type `http://localhost:8080/`. This will launch a browser which is pointed at the URL and connect the debugger to it. +* You can now set breakpoints in the generated `.fs.js` files within VS Code. +* Select the appropriate Debug Console you wish to view. + +> If you find that your breakpoints aren't being hit, try stopping the Client, disconnecting the debugger and re-launching them both. + +> To find out more about the VS Code debugger, see [here](https://code.visualstudio.com/docs/editor/debugging). \ No newline at end of file From 6b99a20cd101422f8deba033dc038d5c5416f371 Mon Sep 17 00:00:00 2001 From: Joost Date: Thu, 21 Dec 2023 14:30:20 +0000 Subject: [PATCH 2/7] Clarity, remove references to webpack --- docs/recipes/developing-and-testing/debug-safe-app.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/recipes/developing-and-testing/debug-safe-app.md b/docs/recipes/developing-and-testing/debug-safe-app.md index aeb9f2eb1..ffcca06a4 100644 --- a/docs/recipes/developing-and-testing/debug-safe-app.md +++ b/docs/recipes/developing-and-testing/debug-safe-app.md @@ -6,7 +6,7 @@ In order to debug Server code from Visual Studio, we need set the correct URLs i ### Debugging the Server #### 1. Configure launch settings -You can do this through the Server project's **Properties/Debug** editor or by editing the `launchSettings.json` file which is in the **properties** folder. +You can do this through the Server project's **Properties/Debug** editor or by editing the `launchSettings.json` file in `src/Server/Properties` After selecting the debug profile that you wish to edit (**IIS Express** or **Server**), you will need to set the **App URL** field to `http://localhost:5000` and **Launch browser** field to `http://localhost:8080`. The process is [very similar](https://docs.microsoft.com/en-us/visualstudio/mac/launch-settings?view=vsmac-2019#configure-the-start-url) for VS Mac. @@ -57,7 +57,7 @@ However, we can still debug it via the magic of source mapping. If you are using The exact instructions will depend on your browser, but essentially it simply involves: * Opening the Developer tools panel (usually by hitting F12). -* Finding the F# file you want to add breakpoints to in the source of the website (look inside the webpack folder). +* Finding the F# file you want to add breakpoints to in the source of the website. * Add breakpoints to it in your browser inspector. ## I'm using VS Code From f437d2a1778a444edf0c8af8a51006dce2d964fc Mon Sep 17 00:00:00 2001 From: Joost Date: Thu, 21 Dec 2023 14:33:35 +0000 Subject: [PATCH 3/7] update mkdocs.yml with Debug Safe App --- mkdocs.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/mkdocs.yml b/mkdocs.yml index 606dbb73f..5bb9af58b 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -77,6 +77,7 @@ nav: - Package my SAFE app for deployment: "recipes/build/bundle-app.md" - Dev / Test: - Test the Client: "recipes/developing-and-testing/testing-the-client.md" + - Debug a SAFE app: "recipes/developing-and-testing/debug-safe-app.md" - UI: - Add Tailwind support: "recipes/ui/add-tailwind.md" - Add daisyUI support: "recipes/ui/add-daisyui.md" From 546a8b9ce6ab0d40852188351a0b8db51d88475a Mon Sep 17 00:00:00 2001 From: Joost Date: Tue, 2 Jan 2024 16:25:28 +0000 Subject: [PATCH 4/7] Add VS code debugging instructions --- .../developing-and-testing/debug-safe-app.md | 61 +++---------------- 1 file changed, 9 insertions(+), 52 deletions(-) diff --git a/docs/recipes/developing-and-testing/debug-safe-app.md b/docs/recipes/developing-and-testing/debug-safe-app.md index ffcca06a4..03a910ee8 100644 --- a/docs/recipes/developing-and-testing/debug-safe-app.md +++ b/docs/recipes/developing-and-testing/debug-safe-app.md @@ -73,65 +73,22 @@ VS Code allows "full stack" debugging i.e. both the client and server. Prerequis * [Ionide](https://marketplace.visualstudio.com/items?itemName=Ionide.Ionide-fsharp): Provides F# support to Code. * [C#](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp): Provides .NET Core debugging support. -#### 1. Create a launch.json file -Open the Command Palette using `Ctrl+Shift+P` and run `Debug: Add Configuration...`. This will ask you to choose a debugger; select `Ionide LaunchSettings`. +#### Debug the Server -This will create a `launch.json` file in the root of your solution and also open it in the editor. +1. Click the debug icon on the left hand side, or hit `ctrl+shift+d` to open the debug pane. -#### 2. Update the Configuration -The only change required is to point it at the Server application, by replacing the `program` line with this: - -```json -"program": "${workspaceFolder}/src/Server/bin/Debug/net6.0/Server.dll", -``` - -#### 3. Configure a build task -* From the Command Palette, choose `Tasks: Configure Task`. -* Select `Create tasks.json file from template`. This will show you a list of pre-configured templates. -* Select `.NET Core`. -* Update the build directory using `"options": {"cwd": "src/Server"},` as shown below: - -```json -{ - // See https://go.microsoft.com/fwlink/?LinkId=733558 - // for the documentation about the tasks.json format - "version": "2.0.0", - "tasks": [ - { - "label": "build", - "command": "dotnet", - "type": "shell", - "options": {"cwd": "src/Server"}, - "args": [ - "build", - "debug-pt3.sln", - // Ask dotnet build to generate full paths for file names. - "/property:GenerateFullPaths=true", - // Do not generate summary otherwise it leads to duplicate errors in Problems panel - "/consoleloggerparameters:NoSummary" - ], - "group": "build", - "presentation": { - "reveal": "silent" - }, - "problemMatcher": "$msCompile" - } - ] -} -``` +2. In the bar with the play error, where it says "No Configurations", use the dropdown to select ".NET 5 and .NET Core". In the dialog that pops up, select "Server.Fsproj: Server" +3. Hit F5 -#### 4. Debug the Server -Either hit F5 or open the Debugging pane and press the Play button to build and launch the Server with the debugger attached. -Observe that the Debug Console panel will show output from the server. The server is now running and you can set breakpoints and view the callstack etc. +The server is now running. You can use the bar at the top of your screen to pause, restart or kill the debugger #### 5. Debug the Client -* Start the Client by running `dotnet fable watch -o output -s --run npm run start` from `/src/Client/`. -* Open the Command Palette and run `Debug: Open Link`. -* When prompted for a url, type `http://localhost:8080/`. This will launch a browser which is pointed at the URL and connect the debugger to it. -* You can now set breakpoints in the generated `.fs.js` files within VS Code. -* Select the appropriate Debug Console you wish to view. +1. Start the Client by running `dotnet fable watch -o output -s --run npx vite` from `/src/Client/`. +2. Open the Command Palettek using `ctrl+shift+p` and run `Debug: Open Link`. +3. When prompted for a url, type `http://localhost:8080/`. This will launch a browser which is pointed at the URL and connect the debugger to it. +4. You can now set breakpoints in by opening files via the "Loaded Scrips" tab in the debugger; setting breakpoints in files opened from disk does NOT work. > If you find that your breakpoints aren't being hit, try stopping the Client, disconnecting the debugger and re-launching them both. From f38e27fd7710a067d81fc0625fe81198b38e3098 Mon Sep 17 00:00:00 2001 From: Joost Date: Tue, 2 Jan 2024 16:29:50 +0000 Subject: [PATCH 5/7] Formatting --- docs/recipes/developing-and-testing/debug-safe-app.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/docs/recipes/developing-and-testing/debug-safe-app.md b/docs/recipes/developing-and-testing/debug-safe-app.md index 03a910ee8..586f27e43 100644 --- a/docs/recipes/developing-and-testing/debug-safe-app.md +++ b/docs/recipes/developing-and-testing/debug-safe-app.md @@ -63,7 +63,7 @@ The exact instructions will depend on your browser, but essentially it simply in ## I'm using VS Code VS Code allows "full stack" debugging i.e. both the client and server. Prerequisites that you should install: -#### 0. Install Prerequisites +### Install Prerequisites * **Install** either [Google Chrome](https://www.google.com/chrome/) or [Microsoft Edge](https://www.microsoft.com/en-us/edge): Enables client-side debugging. * **Configure your browser** with the following extensions: @@ -73,22 +73,20 @@ VS Code allows "full stack" debugging i.e. both the client and server. Prerequis * [Ionide](https://marketplace.visualstudio.com/items?itemName=Ionide.Ionide-fsharp): Provides F# support to Code. * [C#](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp): Provides .NET Core debugging support. -#### Debug the Server +### Debug the Server 1. Click the debug icon on the left hand side, or hit `ctrl+shift+d` to open the debug pane. - 2. In the bar with the play error, where it says "No Configurations", use the dropdown to select ".NET 5 and .NET Core". In the dialog that pops up, select "Server.Fsproj: Server" - 3. Hit F5 The server is now running. You can use the bar at the top of your screen to pause, restart or kill the debugger -#### 5. Debug the Client +### Debug the Client 1. Start the Client by running `dotnet fable watch -o output -s --run npx vite` from `/src/Client/`. 2. Open the Command Palettek using `ctrl+shift+p` and run `Debug: Open Link`. 3. When prompted for a url, type `http://localhost:8080/`. This will launch a browser which is pointed at the URL and connect the debugger to it. -4. You can now set breakpoints in by opening files via the "Loaded Scrips" tab in the debugger; setting breakpoints in files opened from disk does NOT work. +4. You can now set breakpoints in your F# code by opening files via the "Loaded Scrips" tab in the debugger; setting breakpoints in files opened from disk does NOT work. > If you find that your breakpoints aren't being hit, try stopping the Client, disconnecting the debugger and re-launching them both. From 80145a723a4302a58d0c94f124d13912b4c97e36 Mon Sep 17 00:00:00 2001 From: Joost Date: Tue, 2 Jan 2024 16:34:45 +0000 Subject: [PATCH 6/7] Missing step --- docs/recipes/developing-and-testing/debug-safe-app.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/recipes/developing-and-testing/debug-safe-app.md b/docs/recipes/developing-and-testing/debug-safe-app.md index 586f27e43..a4dd81dbf 100644 --- a/docs/recipes/developing-and-testing/debug-safe-app.md +++ b/docs/recipes/developing-and-testing/debug-safe-app.md @@ -76,8 +76,9 @@ VS Code allows "full stack" debugging i.e. both the client and server. Prerequis ### Debug the Server 1. Click the debug icon on the left hand side, or hit `ctrl+shift+d` to open the debug pane. -2. In the bar with the play error, where it says "No Configurations", use the dropdown to select ".NET 5 and .NET Core". In the dialog that pops up, select "Server.Fsproj: Server" -3. Hit F5 +2. Hit the `Run and Debug` button +3. In the bar with the play error, where it says "No Configurations", use the dropdown to select ".NET 5 and .NET Core". In the dialog that pops up, select "Server.Fsproj: Server" +4. Hit F5 The server is now running. You can use the bar at the top of your screen to pause, restart or kill the debugger From eb267022aed517850b4fbdcd7fc5cc5f35835db7 Mon Sep 17 00:00:00 2001 From: Joost Date: Tue, 2 Jan 2024 16:44:55 +0000 Subject: [PATCH 7/7] improved instructions for running Client --- docs/recipes/developing-and-testing/debug-safe-app.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/recipes/developing-and-testing/debug-safe-app.md b/docs/recipes/developing-and-testing/debug-safe-app.md index a4dd81dbf..efed6b4c8 100644 --- a/docs/recipes/developing-and-testing/debug-safe-app.md +++ b/docs/recipes/developing-and-testing/debug-safe-app.md @@ -44,7 +44,11 @@ Once this is done, you can expect your `launchSettings.json` file to look someth ``` #### 2. Start the Client -Since you will be running the server directly through Visual Studio, you cannot use a FAKE script to start the application, so launch the client directly using e.g. `npm run start`. +Since you will be running the server directly through Visual Studio, you cannot use a FAKE script to start the application. Launch the Client directly by running the following command in `src/Client` + +```html +dotnet fable watch -o output -s --run npx vite +``` #### 3. Debug the Server Set the server as your Startup project, either using the drop-down menu at the top of the IDE or by right clicking on the project itself and selecting **Set as Startup Project**. Select the profile that you set up earlier and wish to launch from the drop-down at the top of the IDE. Either press the Play button at the top of the IDE or hit F5 on your keyboard to start the Server debugging and launch a browser pointing at the website.