2

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:

enter image description here

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?

1
  • Experiencing same problem, haven't found anything yet
    – Herz3h
    Commented Aug 24, 2020 at 14:21

0

You must log in to answer this question.

Browse other questions tagged .