Skip to content

Commit 1f9edcb

Browse files
LarocceauLarocceau
committed
Direct copy of v4 recipe
1 parent a690852 commit 1f9edcb

File tree

1 file changed

+138
-0
lines changed

1 file changed

+138
-0
lines changed

‎docs/recipes/developing-and-testing/debug-safe-app.md‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
# How do I debug a SAFE app?
2+
3+
## I'm using Visual Studio
4+
In order to debug Server code from Visual Studio, we need set the correct URLs in the project's debug properties.
5+
6+
### Debugging the Server
7+
8+
#### 1. Configure launch settings
9+
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.
10+
11+
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.
12+
13+
Once this is done, you can expect your `launchSettings.json` file to look something like this:
14+
```json
15+
{
16+
"iisSettings": {
17+
"windowsAuthentication": false,
18+
"anonymousAuthentication": true,
19+
"iisExpress": {
20+
"applicationUrl": "http://localhost:5000/",
21+
"sslPort": 44330
22+
}
23+
},
24+
"profiles": {
25+
"IIS Express": {
26+
"commandName": "IISExpress",
27+
"launchBrowser": true,
28+
"launchUrl": "http://localhost:8080/",
29+
"environmentVariables": {
30+
"ASPNETCORE_ENVIRONMENT": "Development"
31+
}
32+
},
33+
"Server": {
34+
"commandName": "Project",
35+
"launchBrowser": true,
36+
"launchUrl": "http://localhost:8080",
37+
"environmentVariables": {
38+
"ASPNETCORE_ENVIRONMENT": "Development"
39+
},
40+
"applicationUrl": "http://localhost:5000"
41+
}
42+
}
43+
}
44+
```
45+
46+
#### 2. Start the Client
47+
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`.
48+
49+
#### 3. Debug the Server
50+
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.
51+
52+
### Debugging the Client
53+
Although we write our client-side code using F#, it is being converted into JavaScript at runtime by Fable and executed in the browser.
54+
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.
55+
56+
#### 1. Set breakpoints in Client code
57+
The exact instructions will depend on your browser, but essentially it simply involves:
58+
59+
* Opening the Developer tools panel (usually by hitting F12).
60+
* Finding the F# file you want to add breakpoints to in the source of the website (look inside the webpack folder).
61+
* Add breakpoints to it in your browser inspector.
62+
63+
## I'm using VS Code
64+
VS Code allows "full stack" debugging i.e. both the client and server. Prerequisites that you should install:
65+
66+
#### 0. Install Prerequisites
67+
68+
* **Install** either [Google Chrome](https://www.google.com/chrome/) or [Microsoft Edge](https://www.microsoft.com/en-us/edge): Enables client-side debugging.
69+
* **Configure your browser** with the following extensions:
70+
* [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.
71+
* [React Developer Tools](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi): Provides access to React debugging in Chrome.
72+
* **Configure VS Code** with the following extensions:
73+
* [Ionide](https://marketplace.visualstudio.com/items?itemName=Ionide.Ionide-fsharp): Provides F# support to Code.
74+
* [C#](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp): Provides .NET Core debugging support.
75+
76+
#### 1. Create a launch.json file
77+
Open the Command Palette using `Ctrl+Shift+P` and run `Debug: Add Configuration...`. This will ask you to choose a debugger; select `Ionide LaunchSettings`.
78+
79+
This will create a `launch.json` file in the root of your solution and also open it in the editor.
80+
81+
#### 2. Update the Configuration
82+
The only change required is to point it at the Server application, by replacing the `program` line with this:
83+
84+
```json
85+
"program": "${workspaceFolder}/src/Server/bin/Debug/net6.0/Server.dll",
86+
```
87+
88+
#### 3. Configure a build task
89+
* From the Command Palette, choose `Tasks: Configure Task`.
90+
* Select `Create tasks.json file from template`. This will show you a list of pre-configured templates.
91+
* Select `.NET Core`.
92+
* Update the build directory using `"options": {"cwd": "src/Server"},` as shown below:
93+
94+
```json
95+
{
96+
// See https://go.microsoft.com/fwlink/?LinkId=733558
97+
// for the documentation about the tasks.json format
98+
"version": "2.0.0",
99+
"tasks": [
100+
{
101+
"label": "build",
102+
"command": "dotnet",
103+
"type": "shell",
104+
"options": {"cwd": "src/Server"},
105+
"args": [
106+
"build",
107+
"debug-pt3.sln",
108+
// Ask dotnet build to generate full paths for file names.
109+
"/property:GenerateFullPaths=true",
110+
// Do not generate summary otherwise it leads to duplicate errors in Problems panel
111+
"/consoleloggerparameters:NoSummary"
112+
],
113+
"group": "build",
114+
"presentation": {
115+
"reveal": "silent"
116+
},
117+
"problemMatcher": "$msCompile"
118+
}
119+
]
120+
}
121+
```
122+
123+
124+
#### 4. Debug the Server
125+
Either hit F5 or open the Debugging pane and press the Play button to build and launch the Server with the debugger attached.
126+
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.
127+
128+
#### 5. Debug the Client
129+
130+
* Start the Client by running `dotnet fable watch -o output -s --run npm run start` from `<repo root>/src/Client/`.
131+
* Open the Command Palette and run `Debug: Open Link`.
132+
* 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.
133+
* You can now set breakpoints in the generated `.fs.js` files within VS Code.
134+
* Select the appropriate Debug Console you wish to view.
135+
136+
> If you find that your breakpoints aren't being hit, try stopping the Client, disconnecting the debugger and re-launching them both.
137+
138+
> To find out more about the VS Code debugger, see [here](https://code.visualstudio.com/docs/editor/debugging).

0 commit comments

Comments
 (0)