身为一个网页开发者，肯定对Chrome DevTools 不陌生，虽然每天都会用到，可能都是不断重复使用某些功能而已，如果现在让读者为自己打个「对Chrome DevTools 的了解程度」，会给自己几分呢？
Chrome DevTools 简介
大家熟知的Chrome DevTools 主要由几个面板(Panel) 组成，例如Elements、Console、Sources 等等，另外在DevTools 开启时按下ESC 可以打开drawer，里面也藏了不少好用的功能，最常用到的情境就是想在开启Network、Sources 面板的同时使用Console 输入一些JavaScript 来观察、修改变数。
如果想要查看DOM和CSS信息，只要在该元素上按下右键点选Inspect或是使用快捷键Command+Option+C来选取元素，网页右方就会跳出DevTools。
查看Log只要按下Command+Option+J就会直接开启Console面板，同时也是一个很好用的JavaScript REPL工具，笔者就常常在里面试一些JavaScript的行为：
另外也可以透过调整Settings 内的Panel layout 来让多个窗格（Pane）的面板更容易观看，预设的Auto 在大部分情况都没问题，不过使用长型屏幕的时候就适合调整为horizontal，避免Element 面板被挤成左右两边。
看完这些小技巧之后，是不是也跃跃欲试了呢？
只会Chrome DevTools 够吗？
笔者的答案是：够！Chrome DevTools 真的非常强大，许多时常在Chrome 和编辑器中来回切换Try Error 的Debug 过程，其实都可以直接在Chrome DevTools 里面快速完成，长期下来花费的时间是非常可观的，尤其在程式码非常多时，如果用到Webpack 等打包工具可能又会增加许多干等的时间。
而写程式的Debug习惯也是累积而成的，为了想要快速解决问题，会不断使用自己熟知的方式，直到哪天不管用了才会学习新招，笔者从console.log大法转换至其他方式时也经历了不小的阵痛，需要努力遏制想要输入console.log的习惯。
Chrome DevTools 文件
若读者已经看过Chrome DevTools文件，可能已经熟悉这系列文章中关于Chrome DevTools的讲解，然而官方文件虽然不断在更新，DevTools的更新速度实在太快，某些功能和文件已有不少差异，有时甚至只附上What’s New In DevTools的连结。
另外大部分的新功能都会在Chrome Canary先行测试，虽然官方大力推荐，但笔者之前尝试使用时总会遇到一些怪怪的问题，不得不换回原本的Chrome。
而本系列文章将以目前最新版本的Chrome 为主题，除了讲解各个功能的用法外，读过文件的开发者们也能够藉由本系列文章的内容来同步自己目前对Chrome DevTools 的了解。
本文撰写时使用的Chrome 版本为85.0.4183.102。
工欲善其事，必先利其器
Chrome DevTools 的功能面板有很多个，就连设定页面也是玲琅满目，不过如果花时间去详细了解各个细节，会发现在开发、Debug 的效率有显著的提升，接下来的文章中笔者将会从Elements 开始，带大家走过各个面板、Drawer 以及Settings，那些「你所不知道的前端Debug 技巧」。