使用瀏覽器查找當前正在運行的javascript代碼

Question

是否可以在任何瀏覽器上使用控制檯查找當前事件的javascript代碼？例如，請參閱this JSFiddle。這是對應的代碼：

.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'); 

}); 

這裏我寫的代碼，以放大文本，並關閉div。現在是否有可能在我調整文本大小時看到負責調整文本大小的代碼？

更新：我知道如何檢查元素，改變風格和其他東西 。但在這裏，我要求知道如何檢測當前事件的javascript代碼或 函數。它不是關於console .log 函數的函數。我已經知道了。我在問，如何知道哪個 函數正在工作，當我點擊關閉按鈕時，如何在瀏覽器中看到 代碼。在這裏，我寫的代碼，我明白代碼 是。那麼如果其他一些寫代碼，我期待的瀏覽器 用於檢測什麼樣的代碼，什麼事件正在運行

Answer 1

您可以使用正確的檢查元素在Chrome點擊查看你的代碼。從檢查窗口中選擇源標籤。在Firefox中也是如此。在相應的事件中休息一下。在Firefox中使用Firebug會更好。

Answer 2

更新：附加示例。

要打開DevTools在Windows上打Ctrl + Shift + I然後標籤下面Console使用的例子：

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"); 
} 

還搭上由線路故障，您可以使用

try{ 

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

}catch(e){ 

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

} 

是有可能看到的代碼在我調整文本大小時調整文本大小？

例檢測按鈕點擊，重點和變化範圍

Check Fiddle

Answer 3

您可以運行情況的瀏覽器控制檯上的console.log()功能，其中它可以用於調試返回有用的信息。舉例來說，如果你加入，你的腳本，console.log()爲：

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

然後在瀏覽器中打開並激活督察（shift + cmd + i在Chrome的Mac上，例如），並單擊Console標籤：您應該看到v的值發生了變化。

檢查哪些代碼負責特定的任務可能會很棘手。您可以嘗試的一種方法是使用Chrome打開Console，單擊Sources選項卡，然後單擊小暫停圖標（暫停腳本執行）。然後，當任何javascript嘗試運行時，Chrome會暫停並向您顯示代碼。這種方法存在的問題是很多時候循環都在不停地運行。如果是這種情況，只要按暫停，Chrome會顯示該循環的javascript行，並且您沒有時間實際執行您感興趣找到代碼的操作。

如果您瞭解運行哪個腳本，則可以單擊Sources選項卡，瀏覽至具有該代碼的javascript文件，然後添加breakpoint。然後，您可以執行該操作，如果該操作涉及該代碼，則Chrome會暫停該breakpoint。在同一標籤（Sources）中，嘗試點擊行號，並設置「從不在此處暫停」。即使這種方法不能幫助你解決你可能正在檢查的每一個可能的代碼，但有時候它會。

同樣在Chrome上，使用控制檯搜索（在Chrome for Mac上打開控制檯然後cmd + alt + f）搜索該頁面上加載的所有資源。如果您知道您正在查找處理某個CSS類或ID的腳本，則可以搜索此ID或類，查看是否可以在javascript資源上找到該腳本，並添加breakpoint。當你達到那一點時，腳本會暫停，你將能夠在控制檯上運行命令。如果你的斷點是一個類方法，那麼你將處於該類方法上下文的範圍內。