Chrome开发工具(亦称DevTools)是任何前端开发人员工具包的重要组成部分。掌握这个有用的浏览器内工具将大大提高您的编码工作流程。DevTools有很多特性，为了充分利用这些特性，明智的做法是花一些时间来了解这个工具的来来去去，以便释放它真正的潜力。
幸运的是，在DevTools上有许多免费的教程、指南和资源。无论你是DevTools的新手还是中级用户，这些教程和资源都会让你对这个功能强大的开发工具有更深入的了解。
发现DevTools
发现DevTools是一个免费的基于网络的课程在代码学校，将向您介绍Chrome开发工具。
在这个在线教程/课程中有七个章节和17个视频。
DevTools技巧
这个网站是一个有用的Chrome开发工具教程，技巧和技巧的集合，由全栈web开发人员Jeferson Koslowski策划。
官方Chrome开发工具文档
对于那些以前没有听说过DevTools的人，或者对于那些想要完全掌握基础知识的开发人员来说，谷歌Chrome开发者网站上的官方文档是一个很好的开始。
Chrome DevTools备忘单
的Chrome DevTools备忘单是一个包含大量信息的单页资源，非常方便作为参考。
谷歌Chrome开发工具视频系列
这五部分视频播放列表来自谷歌Chrome YouTube频道是一套关于DevTools的简短介绍视频教程。这些视频发布于2009-2010年——从那时起DevTools的许多方面都发生了变化——但它们仍然会为您提供有关该工具的良好信息。
谷歌Chrome开发工具:入门
https://youtube.com/watch?v=7cqh7MGLgaM%3Frel%3D0%26showinfo%3D0
谷歌Chrome开发工具:分析和优化
https://youtube.com/watch?v=OxW1dCjOstE%3Frel%3D0%26showinfo%3D0
谷歌Chrome开发工具:调试JavaScript
https://youtube.com/watch?v=c_oiQYirKuY%3Frel%3D0%26showinfo%3D0
谷歌Chrome开发工具:检查元素和资源
https://youtube.com/watch?v=Mhb4n0yGYT4%3Frel%3D0%26showinfo%3D0
谷歌Chrome开发工具:时间轴面板
https://youtube.com/watch?v=RhaWYQ44WEc%3Frel%3D0%26showinfo%3D0
Chrome开发工具的秘密
这个40分钟的视频教程由帕特里克Dubroy揭示了一些鲜为人知的DevTools特性。
等等，Chrome开发工具可以做到这一点?
https://youtube.com/watch?v=BaneWEqNcpE%3Frel%3D0%26showinfo%3D0这个由谷歌网络性能工程师Ilya Grigorik制作的33分钟视频将告诉你如何有效地使用Chrome开发工具来分析网络性能，在脚本中找到内存泄漏等等。
更多的DevTools教程和资源
以下是其他DevTools教程列表，用于完成特定的web开发任务:
- 使用DevTools的设备模式进行响应式Web设计(blog.chromium.org)
- Chrome DevTools for Mobile(html5rocks.com)
- 破解Chrome DevTools(medium.com)
- Chrome开发工具的速度(html5rocks.com)
- Chrome DevTools中的仿真(youtube.com)
- Chrome DevTools:网络和控制台(code.tutsplus.com)
- 使用Chrome DevTools改进Web应用程序性能(addyosmani.com)
