You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/azure-web-pubsub/howto-troubleshoot-network-trace.md
+19-11Lines changed: 19 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ ms.author: yajin1
6
6
ms.service: azure-web-pubsub
7
7
ms.custom: linux-related-content
8
8
ms.topic: how-to
9
-
ms.date: 11/08/2021
9
+
ms.date: 07/12/2024
10
10
---
11
11
12
12
# How to collect a network trace
@@ -22,13 +22,13 @@ Fiddler is a powerful tool for collecting HTTP traces. Install it from [telerik.
22
22
23
23
If you connect using HTTPS, there are some extra steps to ensure Fiddler can decrypt the HTTPS traffic. For more information, see the [Fiddler documentation](https://docs.telerik.com/fiddler/Configure-Fiddler/Tasks/DecryptHTTPS).
24
24
25
-
Once you've collected the trace, you can export the trace by choosing **File** > **Save** > **All Sessions** from the menu bar.
25
+
Once you collect the trace, you can export the trace by choosing **File** > **Save** > **All Sessions** from the menu bar.
26
26
27
27
## Collect a network trace with tcpdump (macOS and Linux only)
28
28
29
29
This method works for all apps.
30
30
31
-
You can collect raw TCP traces using tcpdump by running the following command from a command shell. You may need to be `root` or prefix the command with `sudo` if you get a permissions error:
31
+
You can collect raw TCP (Transmission Control Protocol) traces using tcpdump by running the following command from a command shell. You need to be `root` or prefix the command with `sudo` if you get a permissions error:
32
32
33
33
```console
34
34
tcpdump -i [interface] -w trace.pcap
@@ -45,23 +45,27 @@ man tcpdump
45
45
Most browser Developer Tools have a "Network" tab that allows you to capture network activity between the browser and the server.
46
46
47
47
> [!NOTE]
48
-
> If the issues you are investigating require multiple requests to reproduce, select the **Preserve Log** option with Microsoft Edge, Google Chrome, and Safari. For Mozilla Firefox select the **Persist Logs** option.
48
+
> If the issues you are investigating require multiple requests to reproduce, select the **Preserve Log** option with Microsoft Edge, Google Chrome, and Safari. For Mozilla Firefox, select the **Persist Logs** option.
49
49
50
50
### Microsoft Edge (Chromium)
51
51
52
-
1. Open the [DevTools](/microsoft-edge/devtools-guide-chromium/)
53
-
* Select `F12`
52
+
To capture a detailed network trace using your browser's DevTools, follow these steps:
53
+
54
+
1. Open the [DevTools](/microsoft-edge/devtools-guide-chromium/):
55
+
* Select `F12`
54
56
* Select `Ctrl`+`Shift`+`I`\(Windows/Linux\) or `Command`+`Option`+`I`\(macOS\)
55
-
* Select `Settings and more` and then `More Tools > Developer Tools`
57
+
* Select `Settings and more` and then `More Tools > Developer Tools`
56
58
1. Select the `Network` Tab
57
59
1. Refresh the page (if needed) and reproduce the problem
58
-
1. Select the `Export HAR...` in the toolbar to export the trace as a "HAR" file
60
+
1. Select the `Export HAR...` in the toolbar to export the trace as a "HAR (HTTP Archive)" file
59
61
60
62
:::image type="content" source="./media/howto-troubleshoot-network-trace/edge-export-network-trace.png" alt-text="Collect network trace with Microsoft Edge":::
61
63
62
64
### Google Chrome
63
65
64
-
1. Open the [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)
66
+
To capture a detailed network trace using your browser's DevTools, follow these steps:
67
+
68
+
1. Open the [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools):
65
69
* Select `F12`
66
70
* Select `Ctrl`+`Shift`+`I`\(Windows/Linux\) or `Command`+`Option`+`I`\(macOS\)
67
71
* Select `Customize and control Google Chrome` and then `More Tools > Developer Tools`
@@ -73,7 +77,9 @@ Most browser Developer Tools have a "Network" tab that allows you to capture net
73
77
74
78
### Mozilla Firefox
75
79
76
-
1. Open the [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools)
80
+
To capture a detailed network trace using your browser's DevTools, follow these steps:
81
+
82
+
1. Open the [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools):
77
83
* Select `F12`
78
84
* Select `Ctrl`+`Shift`+`I`\(Windows/Linux\) or `Command`+`Option`+`I`\(macOS\)
79
85
* Select `Open menu` and then `Web Developer > Toggle Tools`
@@ -85,7 +91,9 @@ Most browser Developer Tools have a "Network" tab that allows you to capture net
85
91
86
92
### Safari
87
93
88
-
1. Open the [Web Development Tools](https://developer.apple.com/safari/tools/)
94
+
To capture a detailed network trace using your browser's DevTools, follow these steps:
95
+
96
+
1. Open the [Web Development Tools](https://developer.apple.com/safari/tools/):
89
97
* Select `Command`+`Option`+`I`
90
98
* Select `Developer` menu and then select `Show Web Inspector`
0 commit comments