3

So Im tinkering around making an old school game for fun using the canvas. Firefox is slow, but chrome dosent have firebug, which I find almost a requirement when developing with javascript. So 1st question : how are people developing these complex games without the aid of firebug?

Second question. What are some performance tips that can help the draw functions (or just javascript in general) execute faster? It seems to me that this is the area that is the bottleneck (for firefox at least).

Final question. From experimenting with profiling in firebug, I can see performance gains from what some would call 'bad practices', such as : I have organized code into a list of functions that each do one thing. This runs slower than if I just dump all the code between the beginPath() and closePath(), but doing it that way leads to spaghetti code and is difficult to follow. How do you manage the balance?

jason
  • 4,721
  • 8
  • 37
  • 45
  • 5
    Chrome and Safari have the Webkit Inspector, which is very much like Firebug. – Paul Kehrer Nov 17 '10 at 21:47
  • 2
    Actually Chrome has Firebug Lite : http://getfirebug.com/releases/lite/chrome/ – yoda Nov 17 '10 at 21:48
  • 1
    Firefox 4's JavaScript engine is a lot faster than Firefox 3.6's, and a beta version is available. – PleaseStand Nov 17 '10 at 23:14
  • Best practices for perf and more here http://stackoverflow.com/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices/10384269#comment13564125_10384269 – jaredwilli May 14 '12 at 19:17

2 Answers2

4

I am using 100% Chrome for development and then testing other browsers later.

Chrome has a built in inspector that is (in my opinion) better than firebug. Much easier stack inspection, stepping, and object inspection.

Right click on a page and click "Inspect element." (or press CTRL SHIFT + I)

Then click the "Scripts" tab. You'll see the call stack, scope variables, breakpoints, callstack, etc on the right. Hovering over variables not only lets you see their value but lets you explore their nested values as well.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
3

For your final question - there's nothing wrong with optimisation - the only thing that's bad is premature optimisation. If you've found there's a problem and the only way to solve it is to make your code less readable then you have to make a trade-off between readability/maintainability and performance. If performance is the number one factor then by all means turn your beautifully factored code into ugly spaghetti code. But only after you've exhausted the other options.

Skilldrick
  • 69,215
  • 34
  • 177
  • 229