Skip to content

Commit

Permalink
Update debug-network-requests-chrome.md
Browse files Browse the repository at this point in the history
fix image links
  • Loading branch information
yi-gu authored May 7, 2024
1 parent df4a172 commit 9b47ae0
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions explorations/debug-network-requests-chrome.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,27 @@ While the Chrome team is trying to integrate FedCM into devtools, we suggest dev
1. Open chrome://net-export from the URL bar. Select “Include raw bytes” and
click “Start Logging to Disk”. Select a location to save the logs when prompted.
<p align="center">
<img width="467" src="https://github.com/fedidcg/FedCM/blob/main/explorations/static/net-export/net-export-entry.png?raw=true"/>
<img width="467" src="https://github.com/fedidcg/FedCM/blob/main/explorations/static/net-export/net-export-entry.png"/>
</p>
2. Open the page that calls the FedCM API. e.g. https://webid-fcm.glitch.me
<p align="center">
<img width="467" src="https://github.com/fedidcg/FedCM/blob/main/explorations/static/net-export/fedcm-1.png?raw=true"/>
<img width="467" src="https://github.com/fedidcg/FedCM/blob/main/explorations/static/net-export/fedcm-1.png"/>
</p>
3. Go through the FedCM flow to debug all network requests
<p align="center">
<img width="467" src="https://github.com/fedidcg/FedCM/blob/main/explorations/static/net-export/fedcm-2.png?raw=true"/>
<img width="467" src="https://github.com/fedidcg/FedCM/blob/main/explorations/static/net-export/fedcm-2.png"/>
</p>
4. Stop the logging on chrome://net-export
<p align="center">
<img width="467" src="https://github.com/fedidcg/FedCM/blob/main/explorations/static/net-export/net-export-stop.png?raw=true"/>
<img width="467" src="https://github.com/fedidcg/FedCM/blob/main/explorations/static/net-export/net-export-stop.png"/>
</p>
5. Load the logs into https://netlog-viewer.appspot.com/
<p align="center">
<img width="467" src="https://github.com/fedidcg/FedCM/blob/main/explorations/static/net-export/netlog-viewer-entry.png?raw=true"/>
<img width="467" src="https://github.com/fedidcg/FedCM/blob/main/explorations/static/net-export/netlog-viewer-entry.png"/>
</p>
6. Under `Events` from the left, filter the logs with `type:URL_REQUEST`
<p align="center">
<img width="467" src="https://github.com/fedidcg/FedCM/blob/main/explorations/static/net-export/netlog-viewer-example.png?raw=true"/>
<img width="467" src="https://github.com/fedidcg/FedCM/blob/main/explorations/static/net-export/netlog-viewer-example.png"/>
</p>
7. The network requests that were sent to different endpoints can be viewed
individually. They also include the response that the browser has received. If
Expand Down

0 comments on commit 9b47ae0

Please sign in to comment.