Edge Developer Tools - View Network Communications

Q

How to view network communications with Edge Developer Tools when loading a Web page?

✍: FYIcenter.com

A

When you load a Web page in the Edge browser, your computer actually make one or more network communications to fetch data from the remote Web server to build the page.

You can use Edge Developer Tools to view network communications performed by your computer when loading a Web page as shown below.

1. Run Edge and go to https://facebook.com.

2. Press F12 key or click "... > Developer Tools". You see the Developer Tools screen displayed.

3. Click "Network" tab. You see a list of network communications performed to fetch required data to build the Facebook home page. Each network communication is represented a URL:

https://www.facebook.com/ajax/bz
https://www.facebook.com/
https://static.xx.fbcdn.net/rsrc.php/v3/yH/l/0,cross/ICh9KUmBoGa.css
https://static.xx.fbcdn.net/rsrc.php/v3/yJ/l/0,cross/Xq_ek25qi2x.css
https://scontent-lga3-1.xx.fbcdn.net/v/t39.2365-6/32964924_18836290198...
https://static.xx.fbcdn.net/rsrc.php/v3/yw/r/_2npUSCf6mV.gif
https://facebook.com/security/hsts-pixel.gif?c=3.2.5
https://fbcdn.net/security/hsts-pixel.gif?c=2.5
https://fbsbx.com/security/hsts-pixel.gif?c=5
https://cx.atdmt.com/?f=AYwJJWVNV7QVkEWyluuDvpuYp0XQAhYcHyV1zWf6fPs2Wm...
https://fbsbx.com/captcha/recaptcha/iframe/?referer=https%3A%2F%2Fwww....
https://www.facebook.com/sem_campaigns/sem_pixel_test/?google_pixel_ca...
https://googleads.g.doubleclick.net/pagead/viewthroughconversion/10326...
https://www.google.com/pagead/1p-user-list/1032622309/?value=1.00...
https://www.google.com/recaptcha/api.js
https://www.gstatic.com/recaptcha/api2/v1562567553145/recaptcha__en.js
... 77 lines ...

4. You don't see any communications listed, click on the "Record " icon and press "Ctrl-R" to reload the page.

5. You can also click the "Delete" icon to remove the communication list.

Edge Developer Tools - View Network Communications

Note that the Facebook home page requires 77 network communications to fetch data 77 times from the Facebook servers, Google servers, DoubleClick servers, etc.

 

Edge Developer Tools - Network Communication Details

Edge Developer Tools - Modify CSS Style Properties

Edge Developer Tools

⇑⇑ Edge Web Browser Tutorials

2019-07-30, 2621🔥, 0💬