因为我以前是写java(Android)的，有些时候我们这些“初来乍到”的新人其实考虑的方面并不能考虑到方方面面，有些时候一点小bug，如果就硬生生的看代码，其实很难能观察到其中蕴含的bug。外加上我们这些刚出社会一到两年的程序员并没有机会去接触到一个全新的项目，我们更多都是在前任的基础上进行修修补补。在这种情况下调试的功能就显得尤为重要了。
 本文准备从以下几个方面来阐述，我开发中使用调试来增加开发效率，本文基于Chrome浏览器，我相信技术是触类旁通的，就像我习惯了Android调试 转向前端调试的时候也并没有觉得太多的不适应：
 1、chrome程序开发面板的组成
 2、查看element的构成
 3、日志打印调试
 4、断点调试
 5、vue调试介绍与工具的使用

---

一、 chrome程序开发面板的组成

• 打开调试面板：

打开调试面板

快捷键option+command+i(windows:f12)

• Elements介绍

简书的首页

如图所示，如果你想观看某些页面的属性你可以打开调试面板，然后使用➡️直接捕捉到页面内该组建的css样式。这对我们这些新学者是一个很友好的，我们可以通过别人的一些高级写法来完善自己的知识体系

修改css显示效果

如上图所示，我们可以直接对页面的内容进行修改，然后就可以直接将修改后的效果直接展示在页面上，并且最下角的位置也会展示出该组建所处视图树的位置。总所周知，很多情况下，都会出现一种情况：html里面写了某个组建，但是在实际效果上并没有显示出来，当然此时可以用这个方法可以进行简单的查看，看为什么没显示出来，这一点和Androi
d studio=>tools=>android=>layout inspector差不多用起来还是比较方面的

layout inspetor

• console模块

• source模版

这个模块主要展示请求后的一些资源数据，下面的断点调试也是基于这个模块来做的。下面主要介绍一下我经常用的一些东西。

image.png

• network模块

network
注解：
1、 停止/清楚请求数据
2、 选择在这些区域段的请求数据
3、 依次是 返回码、请求类型、数据交换规则、请求域名、地址、请求数据类型、大小、请求时间
4、 请求数据
5、 请求数据的一些基本信息，例如共有72个请求等
image.png
这个页面主要是开发人员查看一些主要的网络请求的
1、Headers包含请求头信息、响应头信息和上传参数等信息
2、 Preview主要是展示预览的效果。如果是文件可以查看这个文件；如果是图片可以预览这个图片；如果是从服务器返回来的JSON数据，可以查看格式话后的JSON
3、 Response主要展示效应结果
4、 Cookies请求和响应的Cookie
5、 Timing具体的响应时间
当然这里面还有很多过滤的条件，或者有很多我很多没有发现的功能，这里就不多做赘述了。

• performance模块

performance主要是可以多角度实时查看页面性能的开发者工具。

• memory模块

这个模块可以查看CPU执行时间与内存占用，我暂时的水平没有用到这个工具，但是对于一个java开发者对于这种内存方面的东西还是很敏感的，有时间研究一波

• application 模块

该模块主要是记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。

• security模块

  这个模块主要是为了检测网站的安全性的，例如证书什么的。如果有兴趣，请持续关注在这周或者下周会写一篇https的文章，这里就不加赘述了。

• audits 模块

这个模块的功能是对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。
最后说两句，我现在写到这里其实自己对这个chrome的很多东西其实都挺感兴趣的，但是这篇文章主要是想讲述调试的，另外我临时决定在接下来的一个月里面有时间会单独写一篇文章主要对页面性能做一个整体分析，欢迎各位看官持续关注

二、chrome调试技巧

三、 vue调试基础与调试工具

暂时没结束，先发出来催促自己快点写完