1、前言
本文记录的是做者在工做上面对chrome的一些使用和状况的分析分享，内容仅表明我的的观点。转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合做html
2、浏览器模块介绍
因为chrome浏览器一直在不断的进行更新迭代，会不断的新增功能，有一些老的功能会被摒弃掉，因此咱们介绍这个功能的时候是以这个系列文章发布时候的最新版为主（2018-01-05 ）web
1. 用来选择所须要的HTML元素，经过HTML元素定位到Elements中的对应代码chrome
2. 用来在手机模式和电脑模式之间作切换的canvas
3-11分别表明的就是chrome中的主要功能模块浏览器
3- Elements主要用来查看最终渲染状况，CSS样式的修改和绑定事件的定位安全
4- Console调试台，主要是用来打印输出内容，获取报错信息，页面调试内容（仅用于对在window对象中存在的对象或者变量，函数才可使用）cookie
5- Source源码界面，里面呈现的代码都是原文件的代码，主要的用途是用来对代码进行断点调试和代码测试网络
6- netWork 主要是查看网络环境包括报头和返回数据等参数session
7- Performance 主要是用来查看JS计算性能相关的，通常若是是单纯的页面不包含canvas，大数据渲染等等的，通常是不须要使用到的app
8- Memory 记录内存的状况
9- Application 记录本地存储的相关信息（cookie,sessionStorage,LocalStorage等）的存储信息
10- 页面安全方面的信息
11- 因为“中国特殊国情的问题”，须要使用FQ才可使用，具体是用来作手机web app优化的
2.1 基础模块介绍说明
这里面咱们会一一的讲解每一个模块的大体用法，至于怎样在项目中实际使用会在最后一篇系列文章中说明。
2.1.1 Elements模块
在这个模块中主要能够分红A,B两部分，A部分显示的是渲染出来页面的最终代码，包括JS渲染在内，B部分就是对审查节点元素的CSS，或者绑定的JS进行查看
B部分各个功能分别是：
1- 添加样式和添加类，模拟元素的hover等属性的操做
2- 模型最后的计算状况与应用到的样式，在上面能够很容易直观修改盒子模型的参数
3- 获取选择元素的对应绑定事件的执行为之和触发的事件状况
4- 断点审查状况,这个属性不经常使用
5- 对应选中的元素调用到JS底层的对象状况，这个属性基本没有使用
2.1.2 Console模块
下面咱们对Console中常见的命令进行分析。
经常使用的打印命令：
Console.log 用于打印普通讯息
Console.error 用于打印错误信息
Console.warn 用于打印警示信息
Console.info 同于打印提示信息
Console.log还有其余的一些用法，能够给console.log添加多个参数，相似的格式是这样的。
console.log(string,CSS style string,append string,append string,…………)
其中咱们必须在console.log中的第一个参数里面加上%c，这个插入的符号表示的是第二个参数的样式做用在%c的后面。
示例代码：
console.log("%c这是一个测试","font-size:18px;color:red;","english ","this is a test","this is param2");
运行结果以下：
其余经常使用的console命令
console.dir 用户输出节点对象
console.time&console.timeEnd 用于计算两端代码段计算的时间，主要是在用于性能计算方面的
更多的console的用法详见
2.1.3 Source模块
source模块中主要能够分红三个部分：
A部分主要的做用就是用来选择查看文件和添加一些测试脚本功能
B部分，至关因而一个视图的功能，用来审查代码用的，
C部分就是用来打印和跟踪元素
A-1 查看当前域名下面的文件状况，top表示的就是最顶层，下面的文件夹依次表明的是主域相同，域名不一样的各个站点，再下面就是各个站点的详细的目录结构
A-2 Content Scripts主要是用来查看本地浏览器上面安装的chrome插件的目录结构等状况与断点调试的
A-3 用来插入调试脚本的
C-1 表示的是运行到下一个断点，若是就只有一个断点或者不存在下一个断点的状况，那么程序直接运行
C-2 运行下一句，不运行到函数的内部，至关因而F10的做用
C-3 运行到函数里面 至关因而F11
C-4 跳出函数运行，至关因而F11+Ctrl
C-5 用户取消和开启所有的断点功能
C-6 功能不明确，可是不多使用
2.1.4 Application模块
主要是用来经过查看存储的内容的，里面比较经常使用的localStorage，sessionStorage，cookies
具体的使用能够参照我写的文章：
其余的内容就请自行百度，这里就很少作介绍
基础的模块内容已经讲解完成了，由于这是一个系列的文章，因此接下来的文章以下
chrome调试工具高级不完整使用指南（优化篇）
chrome调试工具高级不完整使用指南（实战一）
chrome调试工具高级不完整使用指南（实战二）
chrome调试工具高级不完整使用指南（实战三）