Verwenden Sie den Browser, um den laufenden JavaScript-Code zu finden

Question

Ist es möglich, den Javascript-Code für aktuelle Ereignisse mit der Konsole in einem beliebigen Browser zu finden?

Zum Beispiel finden Sie unter this JSFiddle. Dies ist der entsprechende Code:

.close-icon { 
    border:1px solid transparent; 
    background-color: transparent; 
    display: inline-block; 
    vertical-align: middle; 
    outline: 0; 
    cursor: pointer; 
} 
.close-icon:after { 
    content: "X"; 
    display: block; 
    width: 15px; 
    height: 15px; 
    /*position: absolute;*/ 
    float:right; 
    background-color: #FA9595; 
    z-index:1; 
    right: 35px; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
    padding: 2px; 
    border-radius: 50%; 
    text-align: center; 
    color: white; 
    font-weight: normal; 
    font-size: 12px; 
    box-shadow: 0 0 2px #E50F0F; 
    cursor: pointer; 
} 



<input type="range" min="12" max="120" id="slider" /> 
<div class="text" contenteditable="true" style="cursor:grab;">hello1<button class="close-icon dbutton" type="reset"/></div> 
<div class="text text1" contenteditable="true" style="cursor:grab;">hello2<button class="close-icon dbutton1" type="reset"/></div> 
<div class="text text2" contenteditable="true" style="cursor:grab;">hello3<button class="close-icon dbutton2" type="reset"/></div> 
<div class="text text3" contenteditable="true" style="cursor:grab;">hello4<button class="close-icon dbutton3" type="reset"/></div> 

$("#slider").on("change",function(){ 
    var v=$(this).val(); 
    $('.text.active').css('font-size', v + 'px'); 
}); 

$('.text').on('focus',function(){ 
    $('.text').removeClass('active'); 
    $(this).addClass('active'); 
}); 

$(document).on("click",".close-icon",function(){ 

$(this).closest('div').remove(); 
//alert('hiii'); 

}); 

Hier schreibe ich den Code, um den Text zu vergrößern und die div zu schließen. Jetzt ist es möglich, den Code zu sehen, der für die Größenänderung des Textes verantwortlich ist, wenn ich den Text skaliere?

UPDATE: Ich weiß, wie Element zu überprüfen, ändern Sie den Stil und andere Dinge . Aber hier möchte ich wissen, wie man den JavaScript-Code oder Funktion für das aktuelle Ereignis erkennen. Hi, es geht nicht um Konsole .log Funktion. Ich weiß das schon. Ich frage, wie man weiß, welche Funktion funktioniert, wenn ich auf den Schließen-Button klicke, wie kann ich das Code im Browser sehen. Hier schreibe ich den Code, ich verstehe, wo der Code ist. Was ist, wenn ein anderes den Code schreiben, und ich bin auf der Suche Browser zum Erfassen, welchen Code und welches Ereignis

Answer 1

Sie Element auf Chrome Inspect können ausgeführt wird, indem die rechte Maustaste, um Ihren Code zu sehen. Wählen Sie im Inspektionsfenster die Registerkarte Quelle. So auch in Firefox. Legen Sie eine Pause in das entsprechende Ereignis. Die Verwendung von Firebug in Firefox wird besser sein.

Answer 2

Update: Beispiele beigefügt.

DevTools getroffen zu öffnen Ctrl + Shift + I auf Fenster dann auf die Registerkarte Console Anwendungsbeispiele unter:

console.log("test");//add this were ever you want to test 

//examples 

Element.onclick = function(){ 
    console.log("clicked"); 
} 

Element.onkeyup = function(){ 
console.log("keyup detection"); 
} 

window.onload = function(){ 
    console.log("page loaded"); 
} 

Auch für Zeile zu fangen Fehler, den Sie für

try{ 

    var invalid = "hello world';//<===== here is invalid string 

}catch(e){ 

    console.log(e.stack);//catched error details (line, file, error) 

} 

ist möglich, sie sehen den Code verwenden können, die Größe des Textes ändern, wenn ich die Größe des Textes verändere?

Beispiel Taste klicken erfassen, konzentrieren und

Check Fiddle

Answer 3

Sie können die console.log() Funktion auf der Browser-Konsole in Situationen ändern Bereich führen, wo sie nützliche Informationen für das Debuggen zurückkehren konnte. Wenn Sie zum Beispiel, fügen Sie, auf Ihrem Skript, console.log() wie:

$("#slider").on("change",function(){ 
    var v=$(this).val(); 
    console.log(v); 
    ... 
}); 

Dann öffnen Sie es im Browser und aktivieren Sie den Inspektor (shift + cmd + i auf Chrome auf dem Mac, zum Beispiel), und klicken Sie auf die Console Registerkarte: Sie sollten den Wert von v ändern sehen.

Die Überprüfung, welcher Code für bestimmte Aufgaben zuständig ist, kann schwierig sein. Eine Möglichkeit, die Sie versuchen können, besteht darin, in Chrome die Console zu öffnen, auf die Registerkarte Sources zu klicken und auf das kleine Pausensymbol (Pausenskriptausführung) zu klicken. Wenn dann javascript versucht wird, ausgeführt zu werden, wird Chrome angehalten und zeigt den Code an. Das Problem bei diesem Ansatz besteht darin, dass es oft eine Schleife gibt, die ständig läuft.Und wenn das der Fall ist, sobald Sie Pause drücken, zeigt Ihnen Chrome die Zeile javascript dieser Schleife an, und Sie haben keine Zeit, die Aktion auszuführen, an der Sie den Code finden möchten.

Wenn Sie wissen, welches Skript ausgeführt wird, können Sie auf die Registerkarte Sources klicken, die Datei javascript mit dem Code durchsuchen und eine breakpoint hinzufügen. Dann können Sie die Aktion ausführen, und wenn die Aktion diesen Codeabschnitt umfasst, pausiert Chrome bei breakpoint. Versuchen Sie auf derselben Registerkarte (Sources) auf die Zeilennummer zu klicken und setzen Sie "Nie hier pausieren". Auch wenn diese Methode Ihnen nicht mit jedem möglichen Code hilft, den Sie vielleicht inspizieren, wird es manchmal auch funktionieren.

Verwenden Sie in Chrome auch die Konsolensuche (offene Konsole und dann cmd + alt + f in Chrome für Mac), um alle auf dieser Seite geladenen Ressourcen zu durchsuchen. Wenn Sie wissen, dass Sie nach einem Skript suchen, das sich mit einer bestimmten CSS Klasse oder ID befasst, können Sie nach dieser ID oder Klasse suchen, nach einer javascript Ressource suchen und eine breakpoint hinzufügen. Wenn Sie an diesen Punkt gelangen, wird das Skript angehalten, und Sie können Befehle auf der Konsole ausführen. Wenn Ihr Unterbrechungspunkt beispielsweise in einer Klassenmethode enthalten wäre, wären Sie im Bereich dieses Klassenmethodenkontextes.