1. 打开开发者工具：在Google Chrome浏览器的右上角，点击三个垂直点，然后选择“检查”或“开发者工具”。
2. 设置断点：在开发者工具中，点击左侧的“断点”按钮，然后在要调试的元素上点击。这样，当该元素执行到断点时，控制台会显示相关信息。
3. 单步调试：在开发者工具中，点击“调试”选项卡，然后选择“逐帧调试”。这样，每次代码执行到指定位置时，都会暂停并显示当前帧的代码和状态。
4. 查看变量值：在开发者工具中，点击“变量”选项卡，然后选择要查看的变量。这样，可以查看该变量的值以及其变化过程。
5. 查看函数调用栈：在开发者工具中，点击“堆栈”选项卡，然后选择“函数调用栈”。这样，可以查看函数调用的顺序和参数信息。
6. 查看事件处理程序：在开发者工具中，点击“事件处理程序”选项卡，然后选择要查看的事件处理程序。这样，可以查看事件处理程序的实现细节。
7. 查看CSS样式：在开发者工具中，点击“CSS”选项卡，然后选择要查看的CSS样式。这样，可以查看元素的样式属性及其值。
8. 查看HTML标签：在开发者工具中，点击“HTML”选项卡，然后选择要查看的HTML标签。这样，可以查看元素的HTML属性及其值。
9. 查看JavaScript代码：在开发者工具中，点击“源代码”选项卡，然后选择要查看的JavaScript代码。这样，可以查看元素的JavaScript属性及其值。
10. 查看DOM树：在开发者工具中，点击“Elements”选项卡，然后选择要查看的DOM元素。这样，可以查看元素的子节点、父节点等信息。