写在前面：
在简书看了一篇很全面的博客https://www.jianshu.com/p/b25c5b88baf5，内容文字几乎都是原作的，图片是我自己加的，也顺带回顾下暑期实习。
上个学期四五月份开始零基础学习前端，当时对于谷歌浏览器的控制台没什么概念，有幸暑假在公司实习两个月，分享一下我使用谷歌浏览器的调试心得。
调试工具：
一、箭头按钮和设备图标
箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，箭头按钮会变成选择状态。
点击后可以在页面上选中自己想要的元素，如下图：
设备图标：点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择。如下图可见：
二、Elements
用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息。
下图我们可以看到当我鼠标选择id为main的div元素时，右侧的css样式对应的会展示出此id的样式信息，此时可以在右侧进行一个修改，修改即可在页面上生效。因为每在编辑器中修改一次代码就刷新页面实在是太低效了，而且很不方便。
盒模型的图形信息
三、Console
用于打印和输出相关的命令信息，其实console控制台除了我们熟知的报错，打印console.log信息外，还有很多相关的功能，下面简单介绍几个：
（1）一些对页面数据的指令操作，比如打断点正好执行到获取的数据上，由于数据都是层层嵌套的对象，这个时候查看里面的key/value不是很方便，即可用这个指令开查看，obj的json string 格式的key/value，我们对于数据里面有哪些字段和属性即可一目了然。
（2）除了console.log还有其他相关的指令可用（console.error，console.warn等）
三、Sources
js资源页面：这个页面内我们可以找到当然浏览器页面中的js 源文件，方便我们查看和调试。可以看一些大站的js代码，虽然基本都看不懂，但是最起码可以看看人家的代码风格，人家的命名方式。所有的代码都是压缩之后的代码，我们可以点击下面的{}大括号按钮将代码转成可读格式。
Sinppets：当我们想在控制台随意写一些测试代码，或者想测试一下刚刚写的方法是否会出现期待的样子，但是控制台一打回车本想换行但是却执行刚写的半截代码（其实在控制台里编写代码换行也是可以的，按shift+enter键就可以换行啦，不过还是有点麻烦，mac和windows系统都适用），所以推荐使用Sources下面的左侧的Sinppets代码片段按钮，这时候点击创建一个新的片段文件，写完测试代码后把鼠标放在新建文件上run或者点击右边的
，再结合控制台查看相关信息（新建了一个名叫：test的片段代码，在你的项目环境页面内，该片段可执行项目内的方法）
Content scripts： Chrome 的一种扩展程序，它是按照扩展的ID来组织的，这些文件也是嵌入在页面中的资源，这类文件可以读写和操作我们的资源，需要调试这些扩展文件，则可以在这个目录下打开相关文件调试，但是几乎我们的项目还没有相关的扩展文件，所以啥也看不到，平时也不需要关心这块。
断点调试：
（1）如何打断点
找到要调试的文件，然后在内容源代码左侧的代码标记行处点击即可打上一个断点。
（2）断点与js代码修改
看下面这张图，我在一个名为toggleTab的方法下打了两个断点，当开始执行我们的点击切换tab行为后，代码会在执行的断点出停下来，并把相关的数据展示一部分，此时可以在已经执行过得代码处，把鼠标放上去，即可查看相关的具体数据信息，同时我们可以使用右侧的功能键进行调试，右侧最上面一排分别是：暂停/继续、单步执行(F10快捷键)、单步跳入此执行块(F11快捷键)、单步跳出此执行块、禁用/启用所有断点。下面是各种具体的功能区
在当前的代码执行区域，在调试中如果发现需要修改的地方，也是可以立即修改的，修改后保存即可生效。
四、Network
网络请求标签页，可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看。
还可以看到一些请求头以及具体的信息：
写在后面：
笨博客只介绍了这几个比较常用的，实际上还有几个不太频繁使用的，例如Memory、Audits等，可以要用到的时候再查阅资料。