Navigateur Inspecteur comment savoir si une image ou d'autres ressources appartiennent à quel fichier css ou js qui n'a pas pu être chargé?

Question

Je peux voir des images dans ma page web qui ne sont pas en train de charger la raison est le mauvais chemin dans le fichier css ou js mais comment savoir quel fichier js ou css essaie de charger cette ressource. J'ai essayé trop dans l'inspecteur du navigateur pour trouver un moyen, mais je ne peux pas comprendre, donc je dois rechercher chaque fichier js et css pour le nom de la ressource. Est-il possible de connaître le fichier js ou css exact qui essaie de charger la ressource échouée. Merci

Answer 1

Firefox et les outils de développement Chrome fournissent un moyen de voir ce qui a initié la demande d'une ressource dans leurs panneaux Réseau.

Chrome DevTools

Le panneau Réseau au sein des DevTools Chrome fournit des informations sur l'origine d'une demande dans un Initiator column. Toutes les entrées à l'exception de celles qui indiquent "Autre" pointent vers la ligne du code JavaScript, CSS ou document qui a provoqué la demande.
Pour les appels JavaScript, il affiche la trace de la pile qui a conduit à la requête sur le vol stationnaire.

Il vous permet même de highlight the initiators and dependencies en maintenant Maj et entrées en vol stationnaire au sein de la liste.

Firefox DevTools

Le réseau Firefox DevTools moniteur a une Cause column indiquant si une demande est venue de JavaScript, le document, CSS, ou d'une autre source.

Pour les appels JavaScript, il fournit la trace de pile dans une barre latérale Stack Trace lors de la sélection de l'entrée.

Malheureusement, pour des causes autres que JavaScript, il ne fournit pas beaucoup d'informations utiles ou des liens vers des fichiers source encore (comme Firefox de 55). Par conséquent, j'ai filed several enhancement requests pour améliorer cette fonctionnalité.