I've been using firebug for years now but never to its full potential. i've never really done a great deal of javascript debugging with it.
Heres my problem:
I have an element on my page that is disappearing on mouseOver if the page had just one or two custom js files this would be pretty easy to debug. However the site has loads. (not my work) Can i use fire bug to track down the scrip that is causing my element to disappear?
i.e configure firebug to watch my element > refresh > mouseOver > See what script file and what line the event is on?
Thanks Guys.
Find the element in the HTML (using inspection), right click on the node and select Break On > Attribute Change.
After that put the mouse over and you'll get the trace to the place that modifies the node
PS: I better like Chrome debugger for such kind of work - it has better (from my personal opinion) stack trace info.
Related
I'm not that familiar with IE-10 and I'm trying to troubleshoot some code using the F12 tools. I can't find a way to debug ( i.e. set break points, etc. ) in a script that is Ajaxed in, and then append to the DOM.
I can download it more conventionally using <script> but not changing things would be a bit easier. Is there a way to do this?
The simplest way I can think of would be the temporarily add a debugger; command at the top of the dynamically added script file. That will cause it to drop into the debugger as soon as that script starts to execute. Once it drops into the debugger, you can set breakpoints in the now-loaded script that hasn't yet executed.
I"m wondering if anyone can give me some insight into a really strange IE9 issue I've been struggling with.
I'm finishing up production of a site for work - it works well in ff/chrome/ie7/ie8 with no script errors.
On IE9 the last step of the application causes the entire tab to whitescreen with no script errors or warnings. (changing the document mode to ie8 will fix the problem but is obviously unsuitable for production)
Unfortunately the site pretty complex with a ton of ajax, and in-page scripts so I can't really post the relevant code easily. I'm more trying to figure out how to diagnose this.
I've checked the IE error logs and they are empty. Web developer tools tells me nothing. The site is not using any plugins (Flash/Silverlight, Ect. ) just javascript w/jQuery.
There is a PDF being displayed in an iframe around the step where it fails - but a nearly identical pdf is displayed in the previous step (using the same method) without problem. The code fails around a call to the jquery UI window but I can't seem to get the exact line.
If anyone has a clue how to try to diagnose this further I'd really appreciate it. I can keep hunting for the bug but I've never seen this kind of behavior before and just am not sure what I am looking for.
Thanks for all the input on this. Sorry I got completely overwhelmed by a few projects at once so I wasn't able to post updates on the debugging steps.
It took forever but I finally realized that everything was crashing when I closed the dialog containing the first PDF.
One of my helper functions was opening the dialog and automatically destroying the contents on close. Normally this works fine as I'm either removing a div containing the page fragment, or the iframe.
In this situation I had a page fragment loaded into the dialog which contained some buttons and the pdf iframe. I called the .remove() method on the parent element containing the iframe rather than the iframe itself. For some reason this seems to work fine in every other browser - but in IE9 it pretty much kills the page rendering without any warning or message.
I strongly suspect that the culprit is the adobe plugin but I'm not entirely sure.
Here is the fix-
Html:
<div id="container">
<iframe src="loremipsum.pdf"></iframe>
</div>
Javascript:
//Ruins my entire week
$("#container").remove();
//Works as the pdf is removed directly
$("#container").find("iframe").remove().end().remove();
I ran into the same issue on IE11 while trying to remove an iframe in a div with AngularJS. Removing the iframe first would just cause the same issue, so I navigated the iframe src to a new page (about:blank) first, then removed the div which worked. Hopefully this helps someone with a similar problem.
Pseudo-code below:
$ctrl.iframeUrl = 'about:blank'; // change the iframe url here
$timeout(function(){
$ctrl.removeIframe(); // remove the iframe here
});
As a thing to try - see what's in the IE9 DOM viewer after it whitescreens. There's a decent chance that most of the stuff is there and just not rendering properly (or having something else rendered over it). At the very least, knowing whether it's losing a ton of stuff out of the DOM or not should give you some useful data.
I am using a tooltip plugin (developed in house by someone who is on vacation) that works everywhere but in IE6. Naturally, it is being used on a site by people that use only IE6 so I need to find a way to get it displaying.
How would you even start to debug such a thing? I've Googled for the problem to see what other javascript tooltip plugins have done to deal with this but cannt find anything that pertains or solves my problem. So, I would love to debug it myself but I really don't know where to begin!
How would you start trying to crack this nut?
Some code:
In the html we insert the following (with display:none set in the css)...
var noteContainer =
'<div style="float:left;" class="ttip-container">
<div class="ttip-box">
(<a class="ttip_heading" href="javascript:void(0)">notes</a>)
<div class="ttip" style="background-color:#ffffff;">
<h3>Notes</h3>
<div class="subhead">' + noteMessage + '</div>
<div class="subhead_bottom">Click <em>(notes)</em> to ' + actionCap + '</div>
<img class="point" src="img/hovertip.gif" width="18" height="14" />
</div>
</div>
</div>';
Then the plugin sets this to diplay:block on hover over an anchor link.
So... where would you start debugging an IE6 javascript issue? I have IE6 running in a VM so I can work with it... just can't get it to tell me anything about what might be going on.
Install the IE developer toolbar, and install Visual Web Developer Express (which has a real debugger)
Is the HTML actually being inserted into the DOM properly? If there's a parsing error the DOM methods in IE will choke (can't insert invalid HTML in IE6). This is step 1. Make sure the markup is actually there (view source is fine).
Then see if your event is firing: put an alert inside the (presumably) click handler. See if your css-changing function is actually firing.
Then see if your css-changing function has a handle on the object. Try something like alert(this.tagName) (or e.tagName, or however else you might have a handle on the element to show/hide).
Let us know how those go.
In this case, I would use the IE Developer Toolbar to see if the HTML was properly appended to the document. If it is, then we know that the problem is not with the statement you pasted into your question. If it's not in your document (in which case you're probably receiving a script error), I would try gutting your tooltip's HTML string to
var noteContainer = '<div style="float:left;" class="ttip-container"></div>';
Test if that's appended correctly. If so, progressively add more of the tooltip content until you get your error. At that point you'll have a much better idea of what is causing IE6's parsing error.
In general, 'Old school' debugging in IE6-7 using alert() is still effective in many situations.
Visual Studio and Visual Web Developer Express are great options, but they're a little heavy on the system resource side, and could be annoying to work with in a virtual machine.
Getting IE to work with JS that works in every other browser is a major pain, so my sympathies for that.
What I would do in a case like this is crack open the source that's actually generating and displaying the tooltip on the page. Throw some alerts in there or change document.title at different points in the code. See if it's even making it to the portions where a tooltip should be appearing.
If it is making it to the "rendering" stages of the code, change your debug setup to tell you what's inside the tooltip element, what the element's size is, etc. As much information about the tooptip container as you can gather. Something in there might stick out, like an element with 0 width/height or completely missing data.
Basically, I'd try to narrow it down to either a "data pulling" or "rendering" problem.
I have a webpage that is using jQuery to hide divs on the page load and show them later based on user interactions.
In my $(document).ready() I execute a bunch of code to hide these divs and to bind a function to the click() handler from jQuery for the regions that trigger showing these divs. It also grabs some values out of the HTML to be used by scripts later. The latter is what's causing an issue.
This code works fine in Firefox and Chrome/Chromium (we're still working on the CSS for IE, but the JS works as far as I can tell). In Safari, it works flawlessly about 70% of the time. Every few page loads however, a line in my $(document).ready() gives me an error and stops the JS from executing, also halting the drawing of HTML for the rest of the page.
the line is:
var itemCount = document.getElementById('itemCount').innerHTML;
The debug console in Safari says "Null Value". The thing is, I see the following in my HTML (from the "view source" of the page after it failed to load right):
<div id="itemCount" style="display:inline">0</div>
and it is the only item with this id (obviously.)
I'm thinking that somehow the JS is getting run before the document is actually ready, and was thinking I'd try testing to see if document.getElementById('itemCount') returns null and wait for a bit if it does, but I don't know if this would work, or if there is a less ugly solution.
Let me know if I'm missing something obvious, or being dumb some other way.
From the way your code is written, I think there must be some other error on the page that is causing this. Your first code block should be:
var itemCount = $('#itemCount').html();
...and the second:
<span id="itemCount">0</span>
A <div> set to be displayed inline is a <span>. A <span> set to be a block-level element is a <div>. That's the only reason there are the two tags. They're otherwise identical. Use the right one for the task.
Not that I expect either of these changes to change your symptom. I just suspect you have other...questionable things on your page, and that's what's really causing the problem. Wild guess: move the <script> block containing the ready() handler to the bottom of the document's <body>.
If you're not already using Safari 4, by all means do so. Turn on the Develop menu in the advanced preferences, then say Develop > Show Web Inspector before loading your page. If there are errors, it will do a better job of showing you why than Safari 3.
Seems to be an old bug. See ticket 1319 and ticket 4187.
See this potential workaround:
After some experimenting and deleting 99% of this post :) - adding an empty style tag dinamically magically fixes the problem:
(function(){
if (!/WebKit/i.test(navigator.userAgent)) return;
var el = document.createElement("style");
el.type = "text/css";
el.media = "screen, projection";
document.getElementsByTagName("head")[0].appendChild(el);
el.appendChild(document.createTextNode("_safari {}"));
})();
Ok here's the problem. I have a page that works in FF3 and Safari4 no problem. It's IE8 that's causing the issue, go figure. I remember in the Netscape days when it was the opposite.
Anyways,
So i'm building a website for a friend - i have three pages. the first two work fine on their own, but when they are combined in a frameset in the third (main.html) in IE8 all hell breaks loose. here are the pages:
www.wither.org/Karoline/navigation.html
www.wither.org/Karoline/portfolio.html
http://www.wither.org/Karoline/main.html
& my CSS if you want it: www.wither.org/Karoline/css/styles.css
if anyone can figure out how to fix this, i'd be eternally grateful. It's completely baffling to me and i've tried all kinds of options. i upgraded jquery to the latest version but then my scroller didn't work and i can't dive too much into the javascript code right now.
Please if you could help out, it would mean a lot to me. this has to go live sometime tomorrow.
There is a JS error when executing the following line of code document.getElementById("loading").style.display = 'none';
in the portfolio page.
Apparently, the element with id 'loading' is not being found. However, if I continue execution of the JavaScript on the page (from within the debugger), there are no issues, and the behavior is the same as in Firefox. This is indicative of a concurrency issue - the element 'loading' is not present in the DOM yet, but the script is attempting to change the element's style.
In order to fix this issue, you will have to ensure that the 'loading' element is present in the DOM before its style is being changed. In fact, you could delay the execution of the onload event handler (using window.setTimeout), until a point where the element is present in the DOM.
What's the actual javascript error?
And IE does have an issue in regards to invalid/broken markup inside of frames, I would try
a) commenting out each script and see which causes the js error
b) if commenting out all the js did nothing it might be related to the invalid markup inside of a frame issue, in which case I'd ditch frames alltogether.
yeah....
so thanks so much for your help. problem solved and i figured the other CSS error. should have picked up on that one earlier.
so site is working and if you want to see what happened with your help,
http://www.wither.org/Karoline
it works perfectly cross platform. made the deadline with hours to spare. thanks SO much. can't believe how well this worked.