'How to trace the initiator in Chrome?
Let's say that I have file based routing of a single-page application, and lets say that I loaded ProfileProjects.page.tsx route.
I want to understand why this particular route also loaded another module, e.g. react-easy-crop.
I can begin doing this by find react-easy-crop bundle in Network tab and looking at the Initiator. It tells me that it was loaded because of ProjectThumbnailPicker.tsx. So now... I need to know what loaded ProjectThumbnailPicker.tsx. Rinse and repeat, and eventually I will know which component in ProfileProjects.page.tsx resulted in loading this package.
I recorded a quick video explaining in more detail:
https://www.loom.com/share/c3b65dc0672240e599b50436c527c1c0
Is there a shortcut in Chrome to show the entire trace?, i.e. seeing initiator path all the way to the top level script.
Solution 1:[1]
Just discovered that there is "Initiator" tab that shows the entire chain!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Gajus |