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代码或当前事件的功能.Hi，它不是关于console .log的功能。我已经知道了。我在问如何知道哪个当我点击关闭按钮时功能正常，我怎么能看到它浏览器中的代码。在这里我写代码，我明白代码在哪里是。如果其他人写代码而我正在寻找浏览器呢？用于检测正在运行的代码和事件

Answer 1

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

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

然后在浏览器中打开它并激活检查器（例如，在Mac上的Chrome上shift + cmd + i），然后点击Console标签：您应该会看到{{1}的值改变。

检查哪些代码负责特定任务可能会很棘手。您可以尝试的一种方法是，使用Chrome打开v，单击Console标签，然后单击小暂停图标（暂停脚本执行）。然后，当任何Sources尝试投放时，Chrome会暂停并显示代码。这种方法的问题是很多时候有一个循环不断运行。如果出现这种情况，只要您按下暂停键，Chrome就会显示该循环的javascript行，并且您没有时间真正执行您的操作＆＃39} ;有兴趣找到代码。

如果您知道哪个脚本正在运行，可以单击javascript选项卡，浏览到包含该代码的Sources文件，然后添加javascript。然后您可以执行操作，如果操作涉及该段代码，则Chrome会暂停breakpoint。在同一个标签（breakpoint）中，尝试点击行号，然后设置＆＃34;永不停顿在这里＆＃34;。尽管这种方法不会帮助你解决你可能正在检查的每一个可能的代码，但有时会这样做。

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

Answer 2

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

Answer 3

更新：附带示例。

要在Windows上打开DevTools点击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

使用浏览器查找当前运行的javascript代码

3 个答案: