Current time: 11-15-2018, 06:13 AM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Chrome Dev Tools and Script Execution View
10-31-2018, 06:07 AM
Post: #1
Chrome Dev Tools and Script Execution View
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?

https://developers.google.com/web/fundam...lyzing-crp
Find all posts by this user
Quote this message in a reply
10-31-2018, 06:27 AM
Post: #2
RE: Chrome Dev Tools and Script Execution View
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.
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 2 Guest(s)