1.chrome开发者工具
在chrome浏览器中，按ctrl+shift+i 就可以开启开发者工具，默认是显示在右侧边，如下图所示。
其中：
箭头图标：选择之后，可以在页面上点选你关注的页面元素，会自动跳转到元素对应的代码;
手机图标：选择之后，会以手机的ua(useragent)以及手机屏幕尺寸去模拟访问网页;
memory：当前页面的内存占用情况，可用于大页面的性能调优;
security：当前页面的安全情况，如果是https链接，会显示证书等信息;
elements：当前页面的元素情况(包含后期js操作后的元素)，和页面的源代码有区别的;是用来查看和学习借鉴别人网页的好工具。
network：网络传输情况，可以包括请求和响应的header和时间等信息，可以用来大页面的性能调优以及模拟限速。
console：主要是一些报错信息和程序员打印出来的信息，算是js版的system.out，比alert实用多了。
source：显示了页面的所有文件从哪些远端服务器传输的，可以方便预览图片和js等文件内容。
performance：性能分布，是页面性能调优的工具;
application：主要包括本地存储，session存储，cookie，页面框架结构等。
audits：页面性能审计，会给一些提高网络性能和页面性能的建议;
more tool：包含js性能分析、页面分层、自定义终端设备ua、模拟传感器等功能。
2、常用功能
2.1 elements
a：触发有两种方式，第 一简单的在页面的元素上右键，选择最下面的“检查”，即可打开开发者工具，并自动定位到该元素;还有就是在开发者工具打开的状态下，使用左上角的箭头按钮，点选页面元素。
b：可以查看的内容：页面的html代码和样式，包括元素样式(与上级元素)的继承关系。
c：可以进行的操作：
可以在元素代码里面添加、删除或者修改，页面会立即生效;
可以在元素的style里面添加、删除或者修改样式，页面会直接生效;
可以选择复制页面元素的代码，再顺便把style里面的样式也复制一下。
d：应用场景：
看见别人页面中的好东西，想借鉴一下;
页面布局调试和样式调试;
举例：在百度地图页面，如果想要知道某个区域对应的地图瓦片的x、y序号怎么办? 这个工具会恨简单地帮到你：
2.2 network
比如我也想做一个搜狗类似风格的网页，简单的很
开一个新的tab，开启开发者工具，url中输入;
在network tab里你会看到浏览器所有的网络请求序列，以请求的时间为序列。有两种方法保存文件：第 一个是右键列表，选择open in new tab，再保存;或者在右侧的preview预览后保存。
你需要保存的静态文件包括html，js，css和png/jpg/gif等图片。
把所有的文件组织在一起，把html页面中的引用路径修正一下，比如原来的域名路径修改成相对路径。
放在本地服务器中显示并调试，修改并增加你自己的内容。
a：关于网络请求：
header中有请求的路径和方法，http状态 (200或者302，404等)，服务器ip地址，请求的header，response的header，请求参数，form数据。
b：关于preview
preview中包含响应的预览，如果是静态内容(如图片，js或css)，则直接预览;如果是动态请求，则显示的是服务器响应内容，这在一些异步提交应用的调试中非常实用，你可以直接看到服务器响应内容，告别alert吧。
c：关于timing
timing是单个请求的详细时间，如果你的页面有性能问题，你可以查看每个元素的时间。
d：应用场景：
看见别人页面上的好东西，想复制;
请求的参数调试;
响应的结果调试;
页面加载时间慢，调试;
插播一个关于gzip的知识点：
http网络传输过程中，是可以使用压缩编码的，所有的client在发送http请求的时候，会把自己支持的压缩算法写到request的header中，比如accept-encoding: gzip, deflate, sdch, br; 如果请求中没有这个header，服务器就只能原始内容传输了。其中gzip, deflate都是无损的压缩算法。
服务器在响应的时候，在response的header中也会告诉client，自己传输的内容使用的是哪种编码，如
content-encoding: gzip。
所有浏览器默认都是支持gzip的，常见的服务器(iis/tomcat)都支持配置成gzip的;因此如果你的js/css/html页面比较多，或者你服务器的出口带宽比较紧张，你可以考虑开启服务器的gzip。
2.3 console
a：关非http200错误
404是http请求中比较常见的错误，比如url不正确，css/js链接路径不正确等;
504是服务器错误;
如果你的页面有异常，你第 一个可以检查的就是console;
b：js脚本错误
js脚本错误，会在console中列出，常见的错误包括对象未定义，或类型不正确，数组越界，对象不存在等;
c：程序员打印的信息
调试信息，如对象值，计算结果等。
d：应用场景
错误检查
程序调试输出
百度用来程序员也是牛b的很啊
2.4 audits
一些常见的网络性能和页面性能建议：
提升网络性能的建议主要包括开启gzip、利用cache、不同的domain同步加载等;
提升页面性能的建议包括分析css中未使用的样式占比，可以删除多于css样式。
2.5 手机终端调试
你如果你开发的网站支持手机端接入，并且需要支持特定机型和特性网络环境，你可以用chrome工具了。
a：开启手机终端模式，并选择你的手机终端类型：
如 同样是输入maps.baidu.com，则会自动跳转到手机百度地图页面。
关于支持特定终端类型，在edit中可以添加。需要填写手机的横向和纵向分辨率，并要写ua字符串。 比较新的手机浏览器都支持查看ua信息，如果实在老款的手机，无法查看ua，可以写一个简单的服务器程序，用这个手机去访问，服务器后台会看到请求中带的ua字符串。
b：有两个路径开启网络限速，network中，选择throttling或者在more tool中，打开network condition并选择你的network throttling：
3 结语
关于chrome的开发者工具，每个chrome版本升级，开发者工具都会更新很多内容。近的开发者工具更新主要集中在页面的性能分析方面，研究的不深。
程序员不仅仅要把页面功能做出来，适当也要注意一下性能，因为这关系到用户体验!
温馨提示
苏公网安备32010402001741
