1. 打开chrome devtools：
- 在地址栏输入`chrome://inspect`，然后按回车键。
- 或者，可以通过快捷键`f12`来打开。
2. 配置devtools：
- 点击“更多工具”按钮（位于右上角的三个点图标），选择“扩展程序”。
- 在弹出的页面中，搜索并安装你想要使用的chrome devtools扩展程序。
3. 查看元素：
- 通过点击页面上的任何元素，devtools会自动显示该元素的相关信息，如属性、事件监听器等。
- 若要查看特定元素的详细信息，可以在元素上右键单击，然后选择“检查元素”。
4. 调试代码：
- 使用“断点”（debugger）功能来暂停执行代码，以便你可以单步执行或检查变量的值。
- 要设置断点，只需在代码行前单击鼠标左键即可。
5. 查看网络请求：
- 使用“网络”（network）面板来查看网页的所有网络请求。
- 可以查看每个请求的url、状态码、响应头等信息。
6. 性能分析：
- 使用“性能”（performance）面板来分析网页的性能。
- 可以查看页面加载时间、渲染时间、内存使用情况等指标。
7. 控制台（console）：
- 使用“控制台”（console）面板来查看和操作控制台输出。
- 可以使用各种命令来测试不同的网页元素或进行调试。
8. 监视脚本：
- 使用“监视”（monitors）面板来监视网页上的脚本执行。
- 可以查看脚本的调用栈、堆栈跟踪等详细信息。
9. 自定义devtools：
- 通过安装第三方插件，可以自定义devtools的功能，如添加新的面板、调整界面布局等。
10. 学习资源：
- 访问chrome devtools的官方文档（https://developer.chrome.com/docs/devtools/）。
- 观看youtube教程视频（https://www.youtube.com/playlist?list=PLzJqYxvwZgQyAjkKFtnHmWpVaBhUdMlR）。
这些是一些基本的使用技巧，但chrome devtools提供了许多高级功能，可以根据需要进行探索和学习。