html_cause-test-page.html (3276B)
1 <!-- Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ --> 3 <!doctype html> 4 5 <html> 6 <head> 7 <meta charset="utf-8"/> 8 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> 9 <meta http-equiv="Pragma" content="no-cache" /> 10 <meta http-equiv="Expires" content="0" /> 11 <title>Network Monitor test page</title> 12 <link rel="stylesheet" type="text/css" href="stylesheet_request" /> 13 </head> 14 15 <body> 16 <p>Request cause test</p> 17 <img src="img_request" /> 18 <img srcset="img_srcset_request" /> 19 <!-- ensure that the two next <img> are offscreen 20 so that the error listener is registered before we try loading them --> 21 <div style="height: 2000vh;"></div> 22 <img loading="lazy" src="lazy_img_request" /> 23 <img loading="lazy" srcset="lazy_img_srcset_request" /> 24 <script type="text/javascript"> 25 "use strict"; 26 27 function performXhrRequest() { 28 const xhr = new XMLHttpRequest(); 29 xhr.open("GET", "xhr_request", true); 30 return new Promise(function performXhrRequestCallback(resolve) { 31 xhr.onload = resolve; 32 xhr.send(); 33 }); 34 } 35 36 function performFetchRequest() { 37 return fetch("fetch_request"); 38 } 39 40 // Perform some requests with async stacks 41 function performPromiseFetchRequest() { 42 return Promise.resolve().then(function performPromiseFetchRequestCallback() { 43 return fetch("promise_fetch_request"); 44 }); 45 } 46 47 function performTimeoutFetchRequest() { 48 return new Promise(function performTimeoutFetchRequestCallback1(resolve) { 49 setTimeout(function performTimeoutFetchRequestCallback2() { 50 resolve(fetch("timeout_fetch_request")); 51 }, 0); 52 }); 53 } 54 55 function performFavicon() { 56 return new Promise(function (resolve) { 57 const link = document.createElement("link"); 58 link.rel = "icon"; 59 link.href = "favicon_request"; 60 document.querySelector("head").appendChild(link); 61 link.addEventListener("devtools:test:favicon", resolve); 62 }); 63 } 64 65 function performLazyLoadingImage() { 66 return new Promise(function (resolve) { 67 const lazyImgs = document.querySelectorAll("img[loading='lazy']"); 68 69 const promises = [ 70 new Promise(r => lazyImgs[0].addEventListener("error", r)), 71 new Promise(r => lazyImgs[1].addEventListener("error", r)), 72 ]; 73 74 // Given that the default display style of <img> is `inline` so 75 // it's sufficient to scroll to an <img>. 76 lazyImgs[0].scrollIntoView({ behavior: "instant" }); 77 resolve(Promise.all(promises)); 78 }); 79 } 80 81 function performBeaconRequest() { 82 navigator.sendBeacon("beacon_request"); 83 } 84 85 (async function() { 86 await performXhrRequest(); 87 await performFetchRequest(); 88 await performPromiseFetchRequest(); 89 await performTimeoutFetchRequest(); 90 await performFavicon(); 91 await performLazyLoadingImage(); 92 93 // Finally, send a beacon request 94 performBeaconRequest(); 95 })(); 96 </script> 97 </body> 98 </html>