I like the way Chrome DevTools helps you find where an asset is being requested in your code via the Network > Initiator column. It works well most of the time, but I'm using a recent version of FontAwesome and trying to debug the delivery of production assets. As the following screenshot shows, in this case the link is just pointing to the main HTML page and there isn't actually a reference in that to the WOFF file:
In this case, the link should really be back to the line in FontAwesome's all.css file which calls the WOFF files using @font-face:
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
src: url("../webfonts/fa-solid-900.eot");
src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
Is this just a limitation of the latest DevTools or is there some other setting / file / code that would enable this link to be more useful?