I'm running a html5 canvas webpage locally with chrome browser. For debugging purpose I'm using console.log trying to track down object pixel location in the animation which happens 60 frames per second. But the problem is that when I run the webpage it works fine until I open the javascript console and see my location being printed out so fast that the development console just freezes, the page still runs but I can't do anything to debug like switch between different tab in the console etc, I have to close the page and re-launch it and the problem happens again very soon.

I also used the build in tool to perform javascript CPU profile collection to see how much resource it's spending on logging, it turns out to be only 0.01% of run time which obviously shouldn't be the issue, however my guess is that even it's only spending a very small fraction of time to do this the console that's actually busy updating the number on the UI is the reason that freezes the page. (I should mention that I'm still able to interact with the page just fine but I can't do anything with the console even just closing it)

Is this normal on chrome browser? Any fix or suggestions? Thanks

I'm running a html5 canvas webpage locally with chrome browser. For debugging purpose I'm using console.log trying to track down object pixel location in the animation which happens 60 frames per second. But the problem is that when I run the webpage it works fine until I open the javascript console and see my location being printed out so fast that the development console just freezes, the page still runs but I can't do anything to debug like switch between different tab in the console etc, I have to close the page and re-launch it and the problem happens again very soon.

I also used the build in tool to perform javascript CPU profile collection to see how much resource it's spending on logging, it turns out to be only 0.01% of run time which obviously shouldn't be the issue, however my guess is that even it's only spending a very small fraction of time to do this the console that's actually busy updating the number on the UI is the reason that freezes the page. (I should mention that I'm still able to interact with the page just fine but I can't do anything with the console even just closing it)

Is this normal on chrome browser? Any fix or suggestions? Thanks

• javascript
• google-chrome
• logging
• console

• try running at slower than 60fps while you're debugging? – gengkev Commented Jul 22, 2012 at 18:42

2 Answers 2

Yes, I would avoid spamming the console. In my experience you can log a surprisingly large amount of data, for instance an array with tens of thousands of items, but you can't call the log function too often or the development tools will freeze while it's redrawing.

So with the above in mind, I would suggest grouping several of your log calls together in an object or array. For instance, if you have a loop that will run a LOT of times and you have 5-6 log calls inside, group those log calls together by adding the data to an array or an object with well names keys, and log that object at the end of the loop.

If you have to log more than once per 100ms for more than a few seconds, I would suggest grouping the log calls.

I would suggest is that when debugging, run something else that does not spam the console with 60 items per second. The same problem happens when you try to run this code: for (var i = 0; i < 99999;/*This will spam the console*/ i++) { console.log(i); } Spamming the console 60 times a second has the same effect, freezes the screen. Try having a second variable that prints in the console once every second, or even twice, so you can narrow it down and fix your bugs. This is probably the safest way there is if you do not want to crash your console.

I hope this helped! :)