IE6 Zeigt keinen JavaScript Tooltip an ... wie fängt man an, dies zu debuggen?

Question

Ich benutze ein Tooltip-Plugin (im Haus von jemandem entwickelt, der im Urlaub ist), der überall aber in IE6 funktioniert. Natürlich wird es auf einer Website von Leuten benutzt, die nur IE6 benutzen, also muss ich einen Weg finden, es anzuzeigen.

Wie würdest du überhaupt so etwas debuggen? Ich habe für das Problem gegoogled, um zu sehen, was andere javascript tooltip plugins getan haben, um damit umzugehen, aber kann nichts finden, das mein Problem umgibt oder löst. Also würde ich es gerne selbst debuggen aber ich weiß wirklich nicht wo ich anfangen soll!

Wie würden Sie anfangen, diese Nuss zu knacken?

Einige Code:

Im html wir folgende einfügen (mit display: none in der CSS-Set) ...

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 <a href="javascript:void(0)" class="note" noteData="' + note + '" mId="' + mId + '" visibleToM="d"><em>(notes)</em></a> to ' + actionCap + '</div> 
      <img class="point" src="img/hovertip.gif" width="18" height="14" /> 
     </div> 
    </div> 
</div>'; 

Dann das Plugin, dies zu diplay setzt: Block auf schweben über eine Ankerverbindung.

Also ... wo würden Sie beginnen, ein IE6 Javascript Problem zu debuggen? Ich habe IE6 in einer VM laufen, so dass ich damit arbeiten kann ... kann es einfach nicht bekommen, mir etwas darüber zu erzählen, was passieren könnte.

Answer 1

Wird der HTML-Code tatsächlich korrekt in das DOM eingefügt? Wenn es einen Parsing-Fehler gibt, werden die DOM-Methoden in IE ersticken (kann ungültiges HTML in IE6 nicht einfügen). Dies ist Schritt 1. Stellen Sie sicher, dass das Markup tatsächlich vorhanden ist (Quelltext ist in Ordnung).

Dann sehen Sie, ob Ihr Ereignis ausgelöst wird: Setzen Sie eine Warnung in den (vermutlich) Klick-Handler. Sehen Sie nach, ob Ihre CSS-Änderungsfunktion tatsächlich ausgelöst wird.

Dann sehen Sie, ob Ihre CSS-ändernde Funktion eine Handle auf das Objekt hat. Versuchen Sie etwas wie alert(this.tagName) (oder e.tagName oder wie auch immer Sie vielleicht ein Handle auf dem Element haben, um anzuzeigen/zu verbergen).

Lassen Sie uns wissen, wie diese gehen.

Answer 2

Installieren Sie den IE Developer Toolbar, und installieren Sie Visual Web Developer Express (die einen echten Debugger hat)

Answer 3

In diesem Fall würde ich die IE Developer Toolbar verwenden, um festzustellen, ob die HTML richtig auf die beigefügten wurde Dokument. Wenn dies der Fall ist, wissen wir, dass das Problem nicht in der Aussage liegt, die Sie in Ihre Frage eingefügt haben. Wenn es nicht in Ihrem Dokument ist (in diesem Fall sind Sie wahrscheinlich einen Skript Fehler zu erhalten), würde ich versuchen, Ihre Tooltip HTML-String

var noteContainer = '<div style="float:left;" class="ttip-container"></div>'; 

Test-Ausnehmen, wenn das richtig angehängt wird. Wenn dies der Fall ist, fügen Sie schrittweise weitere Inhalte des Tooltips hinzu, bis Sie den Fehler erhalten. An diesem Punkt werden Sie eine viel bessere Vorstellung davon haben, was den IE6-Parsing-Fehler verursacht.

Im Allgemeinen ist "Old School" Debugging in IE6-7 mit alert() immer noch in vielen Situationen wirksam.

Visual Studio und Visual Web Developer Express sind große Möglichkeiten, aber sie sind ein wenig schwer auf der Systemressourcenseite und ärgerlich sein könnte in einer virtuellen Maschine zu arbeiten.

Answer 4

IE zu arbeiten mit JS, das in jedem anderen Browser funktioniert, ist ein großer Schmerz, so meine Sympathien dafür.

Was ich in einem solchen Fall tun würde, ist die Quelle zu öffnen, die den Tooltip auf der Seite generiert und anzeigt. Werfen Sie einige Warnungen dorthin oder ändern Sie document.title an verschiedenen Stellen im Code. Sehen Sie, ob es sogar zu den Teilen kommt, wo ein Tooltip erscheinen sollte.

Wenn es ist es um die „Rendering“ Stufen des Codes zu machen, Ihren Debug-Setup zu ändern, Ihnen zu sagen, was innerhalb des Tooltip Elements ist, was die Größe des Elements ist, usw. Wie viele Informationen über den tooptip Behälter als du kannst sammeln. Etwas darin könnte herausragen, wie ein Element mit 0 Breite/Höhe oder vollständig fehlenden Daten.

Grundsätzlich würde ich versuchen, es auf ein "Daten ziehen" oder "Rendering" Problem einzugrenzen.