Wie kann ich in Chrome debuggen, um herauszufinden, warum dieser Code nicht funktioniert?

Question

Wie kann ich die JavaScript-Konsole verwenden, um zu sehen, warum dieser Code:

// Empty info
if ($('.perma-info').text() == '') {
    $('.perma-info').remove();
}

Funktioniert nicht auf dieser Seite: http://dev-indiehaz.tumblr.com/post/22897976111/vans-vw

Ich möchte, dass ich das Element entfernen kann, wenn es leer ist.

Answer 1

Sie könnten damit beginnen:

console.log($('.perma-info'));

und dann beobachten Sie die Konsole. 2 Möglichkeiten: Sie erhalten eine leere Ergebnismenge, in diesem Fall sollten Sie natürlich Ihren Selektor überprüfen, da es wahrscheinlich kein Element mit der class="perma-info" in Ihrem DOM oder Sie erhalten ein Ergebnis, in welchem Fall Sie weitermachen:

console.log($('.perma-info').text());

und beobachten Sie dann die Konsole. Wenn Sie einen leeren Text erhalten, sollte die if-Bedingung funktionieren. Wenn sie einen Wert ausgibt, dann hatte das DOM-Element, das abgeglichen wurde, einen Text.

Viel Spaß beim Debuggen.

Answer 2

Presse F12 und setzen Sie einen Haltepunkt.

Answer 3

1. Öffnen Sie Ihr Google Chrome-Entwicklungstool und klicken Sie auf Skripte
2. Wählen Sie die richtige Skriptdatei und setzen Sie die gewünschten Haltepunkte (vorzugsweise in der if-Anweisung)
3. Starten Sie das Skript!
4. Devtool wird am Haltepunkt anhalten. Sie können globale und lokale Variablen sehen. Sie sollten den Text-Wert in einer Variablen speichern, um den tatsächlichen Inhalt der Variablen zu sehen.

Answer 4

Befolgen Sie die Anweisungen anderer, um zum Entwicklungswerkzeug zu gelangen, aber ich glaube, in Ihrem li ist ein Leerzeichen. Ich benutze Firebug auf Firefox und ich sah ein Leerzeichen.

Versuchen Sie

if ( $.trim($('.perma-info').text()) == '') {
    $('.perma-info').remove();
}