Question

这是一个我认为我们都不时会遇到的问题：你必须使用其他人的代码库来实现使用“非侵入式JavaScript”技术的HTML页面。您有一个HTML表单，并且您知道当您单击按钮或更改输入字段时，会调用某种JavaScript。您最喜欢的调试技术有哪些，可以找出调用的内容？

编辑以澄清问题：示例：这是我的HTML类型：

<select name="attr-1234" class="full primary">
  <option value="1">A</option>
  <option value="2">B</option>
</select>

查看HTML，没有事件处理程序。 JavaScript代码中的某个地方隐藏着其中一个代码：

$('[name^=attr]').select(handleSelection);
$('select[name^=attr]').select(handleSelection);
$('select').select(handleSelection);
$('.full').select(handleSelection);
$('select.full').select(handleSelection);
$('[class*=full]').select(handleSelection);
$('[name^=attr]').change(handleSelection);
$('[name^=attr]').on('select', handleSelection);
... etc. ...

我正在寻找人们找到的好方法，以找出在更改选择时将调用哪个函数（此处为handleSelection）。请记住，这是一个包含数百个JavaScript和HTML文件的成熟项目，因此逐个文件检查的效率不会非常高效。

例如，Chrome开发者工具提供了一个“事件监听器”，其中列出了许多事件。不幸的是，当你处理像jQuery UI这样的库时，这并不像它那样有用，因为所有的处理程序都在这些库中。那里有更好的工具吗？

Answer 1

我经常调试在每个分支中编写一些console.log（＆＃34;＆＃34;），＆＃34;＆＃34;我想要。例如：

function clicked (event){
     if (foo == "foo"){
         console.log("foo = foo!");
         //<--- your code
     } else {
         console.log("foo != foo!");
         //<----- your code
     }
}

我通常会在启动控制台上出现错误时执行此操作，以查看 * 错误

的位置

如何从HTML输入中找出执行的JavaScript？

1 个答案: