1. 打开开发者工具：点击浏览器右上角的三个点图标，然后选择“检查”或“开发者工具”。
2. 设置断点：在开发者工具中，点击左侧的“断点”按钮，然后在需要断点的代码行上点击即可。
3. 查看控制台：点击顶部菜单栏的“控制台”，可以查看当前页面的所有控制台输出。
4. 查看元素：点击顶部菜单栏的“Elements”，可以查看当前页面的所有元素。
5. 查看网络：点击顶部菜单栏的“Network”，可以查看当前页面的网络请求和响应。
6. 查看资源：点击顶部菜单栏的“Resources”，可以查看当前页面的资源文件。
7. 查看CSS样式：点击顶部菜单栏的“Styles”，可以查看当前页面的CSS样式。
8. 查看JavaScript代码：点击顶部菜单栏的“Sources”，可以查看当前页面的JavaScript代码。
9. 查看HTML源代码：点击顶部菜单栏的“Sources”，然后选择“HTML Sources”，可以查看当前页面的HTML源代码。
10. 查看XHR请求：点击顶部菜单栏的“Network”，然后选择“XHR”，可以查看当前页面的XHR请求。
11. 查看DOM树：点击顶部菜单栏的“Elements”，然后选择“Tree”，可以查看当前页面的DOM树。
12. 查看CSS规则：点击顶部菜单栏的“Styles”，然后选择“Rules”，可以查看当前页面的CSS规则。
13. 查看JavaScript代码：点击顶部菜单栏的“Sources”，然后选择“JavaScript Sources”，可以查看当前页面的JavaScript代码。
14. 查看HTML源代码：点击顶部菜单栏的“Sources”，然后选择“HTML Sources”，可以查看当前页面的HTML源代码。
15. 查看XHR请求：点击顶部菜单栏的“Network”，然后选择“XHR”，可以查看当前页面的XHR请求。
以上就是一些常用的快捷操作教程，希望对你有所帮助。
