I want to know when a resource is executing JavaScript. In WPT it appears easy to see when the script is executing by the horizontal line in the waterfall. How is this done in Dev Tools? I suspect that when you run the performance test in Chrome, the yellow scripting bar indicates execution?
I’m trying to determine if a script is synchronous or asynch and it seems that if the script executes after DOMCONTENTLoaded then it is DEFER. Is there an easy way to determine this in Dev tools? I suspect that per this article, any script that loads after the DOMCONTENTLoaded is synchronous?
For sync vs async, the easiest way to tell is to find the script on the dom (inspect the page) and see if the async or defer attributes are set. Any script not on the DOM is going to be async by definition.
A sync script can also have later executions that happen because of events that the script has attached handlers to (like DOM Content Loaded, onload, etc) or timers that it is running.
In dev tools there is the performance tab that has a flame chart of all of the script execution. There isn’t a UI equivalent to the pink lines in the WPT UI that show you the executions from a script persepective though.