1

The project I'm working on involves a "planning" screen, which is entirely made with backbone.js (the other pages of the app are not).

My issue is that from times to times, chrome freezes and the web view stop responding to any interaction. Sometimes, I can manage to quit chrome itself, but usually the controls does not answer either.

I'm pretty convinced this is related to the js code. It seems to me that when a script takes too much time, or loops indefinitely, Chrome can detect this and interrupt the script. However, since this is not the case, I'm thinking that too many js objects stay in memory.

Whatever the cause is, I would like to know which chrome dev tools can help me here. While I'm not a beginner in js, asides setting breakpoints and calling console.log, I have no idea how to debug JS apps. I'm not opposed to use another browser if the dev tools are more suited.

Thanks a lot for your time !

FTR : This is a rails 3.2.8 app, using mongodb, & Backbone.js 0.9.2. The js code is written in coffeescript. This issue happened on my macbook air 2012 running mountain lion, as well as on the client machine which runs on windows 7. The issue appeared at least on chrome 22 & 23.

ksol
  • 11,835
  • 5
  • 37
  • 64

4 Answers4

1

Using the Javascript CPU profiler, I was able to find the group of functions that seems to be responsible for the freezing.

I'm still open to any advice/ressource on debugging javascript code.

ksol
  • 11,835
  • 5
  • 37
  • 64
0

Make a console.log in the loop and check if its the same point freezing on all chrome versions. There is a limit see Browser Javascript Stack size limit.

Maybe add some code? Because there could be some memory leaks especially with event handlers!

Community
  • 1
  • 1
tritter
  • 113
  • 1
  • 6
0

What I would do is the long and weary approach to getting your hands dirty with console.log. --- in this case. In your case, and THX for the hint by the way (finding the offender with the CPU profiler, I'll try that next time round), I guess the offenders might be some functions "callbacking" themselves .. probably via some sort of event-handling/bubbling/callback-combination.

What happens then usually is that it just doesn't recognize the endless-loop, because the callback-stack is kinda "broken". Therefor it will never throw a browser-error.

If you have any luck, it doesn't kill the browser quick enough to kill the console. I did have that at times, the console killed (remaining silent), the coffeescript files not even loaded in the debugger (I use a JIT-coffee-to-js-translator as in JS-MVC) ... the page frozen or not doing anything ...

So, if indeed you are lucky and the debugger spits out your console.logs you can thereby guess where your unwanted loop is hiding. Just by looking at the repeated order of the output statements.

Joehannes
  • 301
  • 2
  • 9
0

of course you know you can set breakpoints right? even conditional breakpoints

I'm currently struggling a bit untangling a similar sounding loop - i guess in case of emergency some alert() calls in your code would at least slow the loop down

or maybe some wait calls (bad idea)

my loop is running so fast I loose my console log!

Community
  • 1
  • 1
ErichBSchulz
  • 15,047
  • 5
  • 57
  • 61