google-chrome-devtoolsfrontenddevtools
What does the waterfall diagram in the given screenshot taken with chrome dev tool means?
Below given is the screenshot was taken while running my application with the dev tool in chrome. Please help me to understand the waterfall diagram. What the green and blue color refers to. My application renders content after a long delay, so I used dev tool to understand my application behaviour. Can I be able to understand the delay that my application make with this diagram?
Solution
Hover over a resource's waterfall to view more information about it. The popup gives you a detailed explanation of each phase. Click the request to open up that same view in a dedicated tab. See View the timing breakdown of a request.