CODEWITHSUNDEEP
javascriptdebuggingcanvasbrowser
Cassidy
Cassidy

Reputation: 3408

What in JavaScript can cause browser crashes?

I have an application that a wrote in straight JavaScript (no jQuery or anything). What it does is it uploads an image, and when you click on it, it gets the dominant colors of the image as well as picks the color you just clicked in the image, and generates a color scheme based on this.

I have part of it implemented here: https://github.com/cassidoo/color-detect (this version only has the color detection part, not the color picker/color scheme part)

Now, I'm trying to figure out some issues. The application usually works. The only time it doesn't work is when the browser crashes. I looked at the thread here:

How can I test potentially "browser-crashing" JavaScript?

And I've been using my debugger and everything, but I'm not actually getting any errors when the browser crashes. It just suddenly isn't responsive and after a little while I get the "Oh, Snap" screen or something.

How can I debug this? What in my code might be freaking out (like is it an infinite loop I'm not closing, something with the canvas that's not normal)? Why does it only happen like 50-60% of the time? Is it a cache issue?

Upvotes: -1

Views: 7259

Answers (6)

Canada
Canada

Reputation: 1

open('javascript:while(true) console.log("hi");close()')

This can crash a browser instantly.

Upvotes: -1

sld
sld

Reputation: 91

Here are some of the things that could cause browser crashes, although I am not sure if they are causing your problem.

  1. Anything while(1) (infinite loop) - Browsers cant seem to handle these
  2. Variable with too much data (out of memory - plausible if storing big images)
  3. Trying to reload too many times (like infinite loop of realoads)
  4. SetInterval to SetInterval To SetInterval etc... (this is more silly than a guess)

Probably an infinite loop or just a weird while. I hope you get it fixed!

Upvotes: 0

DCT A
DCT A

Reputation: 21

Simplest way:

while(1)location.reload()

It works by creating an endless loop, then refreshes the page until the browser crashes. Note: it instantly freezes and you can not see it refreshing. Try it for yourself: https://send-as-mail.000webhostapp.com/

Upvotes: -2

danwarfel
danwarfel

Reputation: 880

You could always do something like this: 

var foo = "bar";
while (1) {
    foo = foo += "bar"; // adds until memory is full, then crashes (womp womp)
}

Upvotes: 1

TachyonVortex
TachyonVortex

Reputation: 8562

Do you have particular test images which always make it crash? If so, can you upload them somewhere so we can test with them?

I'm finding that it always crashes when trying to process an animated GIF. Using Chrome's debugger, I can see that it's getting into an infinite loop in the while (true) loop in k_mean(). The break condition diff < min_diff is never happening. Something's going wrong in the code, because diff is always NaN (not a number).

A good way to debug it is to set breakpoints at various places in the code, look at the state of the variables each time a breakpoint is triggered, etc. The profiler in Chrome can also be useful, by showing you where the execution time is being spent.

Upvotes: 5

user2625787
user2625787

Reputation:

It probably is an infinite loop. You can test that by putting a condition in your loop that throws an alert or console-log after 100 loops (or whatever) and halts execution.

Any tricky regular expressions? Catastrophic backtracking can bring you down too. http://www.regular-expressions.info/catastrophic.html

And as mentioned above, too many recursions will also. Any functions calling themselves repeatedly?

Upvotes: 1

Related Questions