使用浏览器查找当前运行的 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 代码或 当前事件的功能。嗨，这与控制台.log无关 功能 。我已经知道了。我在问如何知道哪个 当我单击关闭按钮时功能正在工作，我怎么能看到 浏览器中的代码。我在这里写代码，我明白代码在哪里 是 。如果其他人编写代码并且我正在寻找浏览器怎么办 用于检测正在运行的代码和事件

Answer 1

您可以在浏览器控制台上运行console.log() 函数，以便它可以返回有用的信息进行调试。例如，如果您在脚本中添加 console.log() 为：

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

然后在浏览器中打开它并激活检查器（例如，Mac 上的 Chrome 上的shift + cmd + i），然后单击Console 选项卡：您应该会看到v 的值发生变化。

检查哪些代码负责特定任务可能很棘手。您可以尝试的一种方法是使用 Chrome 打开Console，单击Sources 选项卡，然后单击小暂停图标（暂停脚本执行）。然后，当任何javascript 尝试运行时，Chrome 会暂停并向您显示代码。这种方法的问题是很多时候有一个循环不断运行。如果是这种情况，只要您按下暂停，Chrome 就会向您显示该循环的 javascript 行，您将没有时间实际执行您有兴趣查找代码的操作。

如果您知道哪个脚本正在运行，您可以单击Sources 选项卡，浏览到包含代码的javascript 文件，然后添加breakpoint。然后您可以执行该操作，如果该操作涉及该代码段，Chrome 将在该breakpoint 处暂停。在同一选项卡（Sources）中，尝试单击行号，并设置“从不暂停此处”。尽管此方法无法帮助您检查可能要检查的所有代码，但有时会。

同样在 Chrome 上，使用控制台搜索（在 Mac 版 Chrome 上打开控制台然后cmd + alt + f）搜索该页面上加载的所有资源。如果您知道您正在寻找处理某个 CSS 类或 id 的脚本，您可以搜索此 id 或类，看看是否可以在 javascript 资源上找到它，然后添加 breakpoint .当您到达该点时，脚本将暂停，您将能够在控制台上运行命令。例如，如果您的断点在类方法中，那么您将在该类方法上下文的范围内。

Answer 2

您可以通过右键单击在 Chrome 上使用 Inspect Element 来查看您的代码。从检查窗口中选择源选项卡。在 Firefox 中也是如此。在相应的事件中放置一个中断。在 Firefox 中使用 Firebug 会更好。

Answer 3

更新：附上示例。

要打开 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