jhsachs Posted July 28, 2012 Share Posted July 28, 2012 I'm using Firebug with Firefox 10 under Windows 7. I'm trying to debug a simple JavaScript function that is called by the <body> tag's onResize event. I set a breakpoint at the first statement of the function and resized the window. I wanted Firebug to halt the function at the breakpoint. Instead, the entire system froze. I couldn't get Firefox or Firebug to respond. I was able to switch tasks by pressing Ctrl+Tab or Alt+Tab, but the cursor would not enter the task bar. The mouse pointer was fixed as a double-headed arrow (vertical or horizontal depending on how I tried to resize the window). I suspect this happened because Windows queued up multiple onResize events and Firebug halted the function while it was processing the first one, but I don't understand why that causes a problem -- or, more important, how to work around it. Any suggestions? Quote Link to comment https://forums.phpfreaks.com/topic/266369-firefoxfirebug-freeze-when-debugging-an-onresize-function/ Share on other sites More sharing options...
scootstah Posted July 28, 2012 Share Posted July 28, 2012 It could be an infinite loop. Does it only freeze when using Firebug with breakpoints? I can't really do anything other than guess without seeing any code. For the record, Firefox 14.0.1 is the most recent version. Quote Link to comment https://forums.phpfreaks.com/topic/266369-firefoxfirebug-freeze-when-debugging-an-onresize-function/#findComment-1365004 Share on other sites More sharing options...
jhsachs Posted July 28, 2012 Author Share Posted July 28, 2012 It could be an infinite loop. Does it only freeze when using Firebug with breakpoints? Yes. Of course, when I don't set a breakpoint it doesn't do anything useful, and without the breakpoint I can't figure out why. Here's a simplified version of the code, which behaves the same way as the original. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>A scrolling div</title> <link rel="stylesheet" href="FixedParts.css" type="text/css" /> <script type="text/javascript"> function resizeMainDiv() { alert ('start'); var mainDiv = getElementById('mainDiv'); alert ('mainDiv='+mainDiv); var divHeight = document.height - mainDiv.y; mainDiv.height = divHeight; } </script> </head> <body bgcolor="#ffffff" onResize='resizeMainDiv()'> <div id='MainDiv'> text </div> </body> </html> For the record, Firefox 14.0.1 is the most recent version. True, tonight... but next week it may not be! Seriously, I've been burned by upgrades often enough that I don't want anything to do with software that changes every time I turn my back. I'll upgrade the next time a new release contains a feature I want, or differs enough to create compatibility issues. Change for the sake of change doesn't appeal to me. Quote Link to comment https://forums.phpfreaks.com/topic/266369-firefoxfirebug-freeze-when-debugging-an-onresize-function/#findComment-1365016 Share on other sites More sharing options...
scootstah Posted July 28, 2012 Share Posted July 28, 2012 Try removing the alert's, or replacing them with console.log() Quote Link to comment https://forums.phpfreaks.com/topic/266369-firefoxfirebug-freeze-when-debugging-an-onresize-function/#findComment-1365023 Share on other sites More sharing options...
jhsachs Posted July 28, 2012 Author Share Posted July 28, 2012 I'll look into console.log, which I'm not familiar with. It's always good to learn more about one's tools. But taking the alerts out is not going to help, because I put them in a (non-successful) attempt to diagnose the problem after I encountered it. Quote Link to comment https://forums.phpfreaks.com/topic/266369-firefoxfirebug-freeze-when-debugging-an-onresize-function/#findComment-1365044 Share on other sites More sharing options...
scootstah Posted July 28, 2012 Share Posted July 28, 2012 So, I tested your script and got the same results: if I set a break point, Firefox locks up and I get the horizontal-resize cursor. I did a bit of Googling and it seems to be a known problem with using breakpoints on "onResize". From my limited research it appears to be an issue in the way Windows handles resizing, or something. Basically, you can't use breakpoints. I did however find two errors in your script, on this line: var mainDiv = getElementById('mainDiv'); Your div has an ID of "MainDiv", not "mainDiv", and you need to put document. before the getElementById() method. So in the end it should be: var mainDiv = document.getElementById('MainDiv'); Quote Link to comment https://forums.phpfreaks.com/topic/266369-firefoxfirebug-freeze-when-debugging-an-onresize-function/#findComment-1365055 Share on other sites More sharing options...
jhsachs Posted July 29, 2012 Author Share Posted July 29, 2012 There was a bit more to it than that, but you got me pointed in the right direction. console.log is indeed useful. Here my debugged code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>A scrolling div</title> <link rel="stylesheet" href="FixedParts.css" type="text/css" /> <script type="text/javascript"> /** * Return the absolute x and y offsets of an object. * @return: [x_offset,y_offset] */ function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { // Add each new object's offsetLeft and offsetTop to curleft and curtop. do { curleft += obj.offsetLeft; curtop += obj.offsetTop; console.log( ' '+obj.nodeName+'='+obj.offsetTop+','+curtop ); // The loopends when we process the root object (with no parent). } while ( (obj=obj.offsetParent) ); return [curleft,curtop]; } } /** * Resize <div id='mainDiv'> when <body>'s resize event occurs. */ function resizeMainDiv() { var bodyHeight = document.body.offsetHeight; console.log('bodyHeight='+bodyHeight); var mainDiv = document.getElementById('mainDiv'); var mainDiv_xy = findPos(mainDiv); console.log('mainDiv_xy='+mainDiv_xy); var divHeight = bodyHeight - mainDiv_xy[1]; console.log('divHeight='+divHeight); mainDiv.style.height = divHeight+'px'; } </script> </head> <body bgcolor="#ffffff" onLoad='resizeMainDiv()' onResize='resizeMainDiv()'> <div id="mainContainer"> <div id="masthead"> <table width="820"> <tr> <td width="180" align="center"><strong>This is the heading!</strong></td> </tr> </table> <table width="100%"> <tr> <td> <ul class="glossymenu"> <li class="current">S o m e T a b s G o H e r e</li> </ul> </td> </tr> </table> </div> <table> <tr> <td> <div id="leftSidebar"> <div id="sectionLinks" bgcolor="white"> <div> <table width="156"> <tr><td align="center"> Some<br/> more<br/> links<br/> and<br/> some<br/> ads<br/> go<br/> here. </td></tr> </table> </div> </div> </div> </td> <td> <div class="bodyOuter"> <div class="bodyInner" id="mainDiv"> <h1 id="pageName" class="headers">This is where the text goes.</h1> <p><strong>There's</strong> lots and lots and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots </strong>and lots and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and </strong>lots and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots </strong>and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and </strong>lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots </strong>and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots and </strong>lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots and lots </strong>and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots and lots and </strong>lots and lots of text so it's so long it scrolls.</p> <br/> <p><strong>There's</strong> lots and lots and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots </strong>and lots and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and </strong>lots and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots </strong>and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and </strong>lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots </strong>and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots and </strong>lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots and lots </strong>and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots and lots and </strong>lots and lots of text so it's so long it scrolls.</p> <br/> <p><strong>There's</strong> lots and lots and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots </strong>and lots and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and </strong>lots and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots </strong>and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and </strong>lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots </strong>and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots and </strong>lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots and lots </strong>and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots and lots and </strong>lots and lots of text so it's so long it scrolls.</p> <br/> <p><strong>There's</strong> lots and lots and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots </strong>and lots and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and </strong>lots and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots </strong>and lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and </strong>lots and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots </strong>and lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots and </strong>lots and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots and lots </strong>and lots and lots of text so it's so long it scrolls.</p> <p><strong>There's lots and lots and lots and lots and </strong>lots and lots of text so it's so long it scrolls.</p> <br/> <div align="center">There's some stuff after the text, but it's not very interesting.</div> <br/><br/> </div> </div> </td> </tr> </table> </div> </body> </html> I owe the findPos function to the nice folks at http://www.quirksmode.org/js/findpos.html. Quote Link to comment https://forums.phpfreaks.com/topic/266369-firefoxfirebug-freeze-when-debugging-an-onresize-function/#findComment-1365181 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.