如何在Chrome控制台中单步执行功能

Question

我对JavaScript的了解非常基础，而且我对Chrome控制台有点熟悉。我在这里发帖是因为不确定使用的正确术语，但希望将这个问题保持简短和专注。

我有一个使用JavaScript的浏览器页面，因为某些元素会更改值。我基本上知道哪个.js文件对此负责，但我想：

a）知道元素发生变化时最初调用的函数 - 即Chrome控制台为TOLD。

b）放一个＆＃34;停止＆＃34;在该函数中的某个点，或者添加一行代码，或者确定本地执行上下文的值

（a）和（b）可能吗？单独使用Chrome控制台？全部添加console.log('status here is '+this.status)非常耗时。

Answer 1

确定上下文值（b）

要了解本地执行上下文的值，您可以将hanlder函数附加到html元素中的change事件，并将值记录到控制台输出（console.log(myValue)）。对于输入元素，例如，一种简单的方法是将onchange属性添加到传递处理函数的html元素中。

您还可以使用 F12开发人员工具 在处理函数中添加断点。在此处阅读更多相关信息：Google Chrome - Pause Your Code With Breakpoints

示例：

// This function will be called when you change the value and move the focus 
// to a different element or when you click enter
function myHandler(input){
  console.log(input.value);
}

<input value="123" onchange="myHandler(this);" />

您也可以使用onkeydown。有关更多活动，您可以查看：W3Schools - Dom Object Events

事件顺序（a）

关于事件顺序（a），您可以参考其他问题：

What is the event precedence in JavaScript?