Product:
Planning Analytics Workspace
Microsoft Windows 2022 server
Issue:
How record web activate to send to support to troubleshoot issues in the web application.
Solution:
Use a tool to catch the traffic between the Web Browser and the server, try like https://www.telerik.com/fiddler/fiddler-classic
or more network tools like https://www.wireshark.org/download.html ….
-
- Wireshark: Open Wireshark, choose the network interface you want to monitor, and start the capture. You can use capture filters to narrow down the traffic you see (e.g., by IP address or port). Stop the capture and save the results in a
.pcapfile for later analysis.
- Wireshark: Open Wireshark, choose the network interface you want to monitor, and start the capture. You can use capture filters to narrow down the traffic you see (e.g., by IP address or port). Stop the capture and save the results in a
- Fiddler: This tool is excellent for capturing and inspecting both HTTP and HTTPS traffic from any browser or application. It allows you to filter, save, and replay traffic sessions.
- tcpdump: A command-line utility that captures raw packets. You can specify an interface (
-i) and write the output to a file (-w). For example,tcpdump -i wlan0 -w capture.pcapwould capture traffic from thewlan0interface to a file namedcapture.pcap
You can also use the network tool built inside the web browser, they save the collected data to a HAR file.
HAR files (“Http ARchive”) are a JSON-formatted archive file format for logging a web browser’s interaction with a site.
- Typically, they are useful in troubleshooting performance problems (and errors) when using web-based software (such as PAW).
The steps vary, depending on the web browser that the user is using.
Chrome
1. Launch Google Chrome.
2. In Chrome, go to the page where you are experiencing trouble
3. Select the Chrome menu (⋮) at the top-right of your browser window, then select More Tools > Developer Tools.
1. Launch Google Chrome.
2. In Chrome, go to the page where you are experiencing trouble
3. Select the Chrome menu (⋮) at the top-right of your browser window, then select More Tools > Developer Tools.
4. The Developer Tools will open as a docked panel at the side or bottom of Chrome. Click on the Network tab.
5. Tick/select the option Preserve log (see below):
5. Tick/select the option Preserve log (see below):
6. The recording should autostart and you will see a red circle at the top left of the Network tab (see above).
If not, click the black circle, to start recording activity in your browser.
7. Refresh the web page that you are on
7. Refresh the web page that you are on
– Perform the task which is causing the issue
– The goal is to reproduce the problem you’ve been experiencing while Google Chrome is recording activity.
8. Once you have reproduced the problem (while recording), right-click within the Network tab and click Save as HAR with Content to save a copy of the activity that you recorded:
8. Once you have reproduced the problem (while recording), right-click within the Network tab and click Save as HAR with Content to save a copy of the activity that you recorded:
9. Save the HAR file somewhere convenient.
10. Now click the Console tab and right-click anywhere in the console log. Select the popup option “Save as…” and name the log file something sensible:
10. Now click the Console tab and right-click anywhere in the console log. Select the popup option “Save as…” and name the log file something sensible:
11. Close the developer panel.
12. Typically, the customer will now upload the two files (especially the HAR file) into their support case.
Firefox
1. Launch Firefox.
2. In Firefox, go to the page where you are experiencing trouble.
3. Select the Firefox menu (Three horizontal parallel lines) at the top-right of your browser window, then select Developer > Network.
4. The Developer Network Tools will open as a docked panel at the side or bottom of Firefox. Click on the Network tab.
– Before starting the capture, be sure to enable the setting: Enable persistent logs in the Toolbox Options > Common Preferences (click on gear icon on the Toolbox toolbar to open the Toolbox Options pane)
– Click on the Network tab after setting the option.
5. The recording will autostart once you start performing actions in the browser.
6. Refresh the web page that you are on
5. The recording will autostart once you start performing actions in the browser.
6. Refresh the web page that you are on
– Perform the task which is causing the issue
– The goal is to reproduce the problem you’ve been experiencing while Firefox is recording activity.
7. Once you have reproduced the issue and you see that all of the actions have been generated in the Developer Network Panel (this should just take a few seconds), right-click anywhere under the “File” column and click on “Save All as Har”
8. Save the HAR file somewhere convenient and close the developer panel.
9. Typically, the customer will now upload the HAR file into their support case.Internet Explorer (IE)
8. Save the HAR file somewhere convenient and close the developer panel.
9. Typically, the customer will now upload the HAR file into their support case.Internet Explorer (IE)
We shall use Microsoft F12 Developer Tools and the Network Tool to capture the browser headers. Then export the captured traffic as HAR file (or XML if using older version of IE).
1. Launch Microsoft Internet Explorer.
2. Press the F12 key on your keyboard. This should open the Developer Tools panel in IE. If not, find it on the browser menu: F12 Developer Tools
3. In the Developer Tools panel, click the Network panel and then deselect the Clear entries on navigate option. (on by default).
4. Click the Network panel/button and then the Start Capturing button (or press Ctrl + E). Note: the icon looks like a green triangle
5. Click the IE Refresh button. The goal is to reproduce the problem you’ve been experiencing while IE is recording activity
6. The Developer Tool panel should now show a list of the URLs that are included in the page you have in your browser.
7. Click the Stop button when the issue has been reproduced (or press Ctrl + E). Note: the icon looks like a red square
8. Click the Export captured traffic icon and save the file somewhere convenient (or press Ctrl + S). Note: the icon looks like a floppy disk.
9. Typically, the customer will now upload the HAR file into their support case.
10. Click on the Console tab and look for any errors/warnings reported. If errors are shown, please right-click on the console errors and select Copy all or send a screenshot of them.
11. Close the Developer Tools panel.
2. Press the F12 key on your keyboard. This should open the Developer Tools panel in IE. If not, find it on the browser menu: F12 Developer Tools
3. In the Developer Tools panel, click the Network panel and then deselect the Clear entries on navigate option. (on by default).
4. Click the Network panel/button and then the Start Capturing button (or press Ctrl + E). Note: the icon looks like a green triangle
5. Click the IE Refresh button. The goal is to reproduce the problem you’ve been experiencing while IE is recording activity
6. The Developer Tool panel should now show a list of the URLs that are included in the page you have in your browser.
7. Click the Stop button when the issue has been reproduced (or press Ctrl + E). Note: the icon looks like a red square
8. Click the Export captured traffic icon and save the file somewhere convenient (or press Ctrl + S). Note: the icon looks like a floppy disk.
9. Typically, the customer will now upload the HAR file into their support case.
10. Click on the Console tab and look for any errors/warnings reported. If errors are shown, please right-click on the console errors and select Copy all or send a screenshot of them.
11. Close the Developer Tools panel.
More Information:
https://github.com/radekstepan/fetch-fiddler
https://www.telerik.com/fiddler/usecases/https-traffic-recording
https://www.wireshark.org/docs/wsug_html_chunked/
https://help.okta.com/oag/en-us/content/topics/access-gateway/troubleshooting-with-har.htm