title: How can I get more specific information when profiling javascript in the browser?
body: <p>I'm debugging some UI code I wrote and here's the performance report (you can click on this to see a bigger screenshot):</p>
  
  <p><a href="https://i.stack.imgur.com/FYUKe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FYUKe.png" alt="profile report"></a></p>
  
  <p>To summarize, <code>drawContainer</code> is slow, but it's being called recursively and it's not always slow.  The report does not give me any insight into the state that's being passed in so I have no idea which situation makes it slow.</p>
  
  <hr>
  
  <p>You can see it's being called higher on the stack without significant performance issues.  To me that implies that <code>drawContainer</code> <em>can</em> be slow but it isn't always slow.  I can't figure out how to get any more information from the Firefox profiler than this but I also can't see how to debug the performance issue with so little information.</p>
  
  <p>Is there a technique I can use to figure out what state is being passed into this function <strong>when</strong> it's slow without</p>
  
  <ol>
  <li>Majorly interfering with the performance report?  EG: I assume if I put <code>console.log</code> everywhere, it would slow down this function a lot and I'd get false positives.</li>
  <li>Getting information overload?  EG: If I put <code>console.log</code> in here it'll print out thousands of lines and only a few of those lines would be relevant.</li>
  </ol>
  
  <p>I don't <em>need</em> to solve this in firefox, that's just the browser I'm using.  By that I mean if chrome has better tools for this I'd be willing to switch.  </p>