javascriptdebugginggoogle-chrome-devtools

Finding large processing time in JavaScript using Chrome DevTools


I'm using a third party statistics library which seems to have loads of issues. It's both large and compressed, so it's not particularly easy to debug. I'm using the Chrome DevTools and I was wondering what options there might be for ranking functions by the number of calls by their name, maybe? I thought the answer was the Profiler tab, but the profiles I captured are only documenting the JS files referencing "line 1" in long chains.

This thing is freezing my app and I'd rather avoid making changes to their code as much as possible, even if it's for the sake of debugging.

EDIT: I seem to remember a recent demo of chrome DevTools somewhere showing a timeline that depicted function blocks stacked vertically based on the time increment going horizontally called "flame charts" or something similar... That would be ideal, but I can't remember the link right now for the life of me. Not opposed to using Canary on this one at all if anyone knows what this tool is?


Solution

  • The latest video about DevTools is here http://youtu.be/x6qe_kVaBpg?t=19m44s

    It covers different topics about DevTools and includes a section about CPU profile too.

    So, you need to record a cpu profile and look into it.

    BottomUp view

    Also you can use FlameChart view on it.

    FlameChart view

    You can click on an item in BottomUp or TopDown or even a FlameChart bar and see the function body in the Sources panel.

    minified version

    If you sources are minified, as in the screenshot, then you can press a button in the status bar of Sources panel. It looks like two curly braces {}. Then DevTools will format the sources.

    PrettyPrinted version

    and that action will affect all the links to the source file in all other places like Timeline, CPUProfile etc. As example in the first snapshot you saw a function O.Pk that was at line 778 of minified version of the script. After pretty printing the source file the link to the function was changed automatically. Now it is pointing to the line 15871.

    changed links