利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

以下是详细的攻略。

利用Chrome浏览器进行JS调试

如果我们的网页出现了一些问题，我们常常需要使用开发者工具来进行排除问题。现在我们来介绍如何在Chrome浏览器中进行JS调试。

1. 打开Chrome浏览器，在页面上右键点击鼠标，选择“检查”或按下快捷键“Ctrl + Shift + I”，打开开发者工具。

2. 选择“Sources”选项卡，在左侧面板中找到我们要调试的JS文件。

3. 在代码中插入“debugger”的语句来中断JS代码的执行，并打开Chrome浏览器的“Console”面板，重新加载页面。页面的渲染会在“debugger”语句处停止执行，然后我们就可以逐行执行JS代码了。

4. 要调试DOM元素，可以在HTML中添加“data-”属性，并在JS代码中使用document.querySelectorAll()或document.querySelector()方法选取DOM元素。

下面我们来看一些示例。

示例一：调试JS代码

假设我们有以下JS代码：

const sum = (a, b) => {
  const result = a + b;
  debugger;
  return result;
}

const total = sum(1, 2);
console.log(total);

我们要用Chrome浏览器来调试这段代码。

1. 在Chrome浏览器中打开调试面板。

2. 选择“Sources”选项卡，在左侧面板中找到我们要调试的JS文件，点击文件名称进行编辑。

3. 在sum函数的第4行插入“debugger”语句。

4. 切换到Console面板，重新加载页面，页面的渲染会在“debugger”语句处停止执行。

5. 现在我们可以逐行执行JS代码，查看执行过程中的变量值和结果了。

示例二：调试DOM元素

假如我们页面上有一个按钮，我们想要查看这个按钮的HTML和绑定的点击事件。

1. 在Chrome浏览器中打开调试面板。

2. 选择“Elements”选项卡，在左侧面板中找到我们要调试的DOM元素。

3. 在按钮元素上右键点击，选择“检查”，进入开发者工具的Elements选项卡。

4. 在HTML代码中选定按钮元素，右键点击选择“Edit as HTML”，就可以编辑HTML代码了。

5. 如果想查看绑定的点击事件，可以选中按钮元素，切换到“Event Listeners”选项卡，就可以查看元素绑定的所有事件了。

以上就是利用Chrome浏览器进行JS调试并找出元素绑定的点击事件的攻略了。