1. 打开开发者工具：在Chrome浏览器中，点击右上角的三个点图标，然后选择“检查”或“开发者工具”。
2. 设置断点：在开发者工具中，点击左侧的“断点”按钮，然后在要停止执行代码的行数上点击。这将在该行代码处暂停执行。
3. 查看控制台：在开发者工具中，点击顶部的“控制台”按钮，然后输入要查看的控制台输出。例如，要查看变量的值，可以在控制台中输入`console.log(variableName)`。
4. 查看元素：在开发者工具中，点击左侧的“Elements”按钮，然后选择要查看的元素。例如，要查看页面上的所有链接，可以点击“Links”选项卡。
5. 查看网络请求：在开发者工具中，点击左侧的“Network”按钮，然后选择要查看的网络请求。例如，要查看页面加载时的网络请求，可以点击“Network”选项卡。
6. 修改源代码：在开发者工具中，点击左侧的“Sources”按钮，然后选择要修改的源代码文件。例如，要修改HTML文件，可以点击“HTML”选项卡。
7. 使用JavaScript调试：在开发者工具中，点击左侧的“Console”按钮，然后输入要执行的JavaScript代码。例如，要测试一个函数是否按预期工作，可以输入`myFunction()`并按下回车键。
8. 使用CSS调试：在开发者工具中，点击左侧的“Styles”按钮，然后输入要查看的CSS样式。例如，要查看一个元素的样式，可以输入`element.style`。
9. 使用JavaScript调试：在开发者工具中，点击左侧的“Console”按钮，然后输入要执行的JavaScript代码。例如，要测试一个函数是否按预期工作，可以输入`myFunction()`并按下回车键。
10. 保存和导出：在开发者工具中，点击左上角的“File”菜单，然后选择“Save All”或“Save File”。这将保存所有更改到本地文件。如果需要将更改导出为HTML文件，可以点击“Export”按钮，然后选择所需的格式。