前端人员必备技能：Chrome 浏览器的开发者工具
摘要: 常见的浏览器都提供了开发者工具，本文以Chrome为例，介绍一些常见的工具使用方法以及应用场景。
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.1 Elements
A：触发有两种方式，第一最简单的在页面的元素上右键，选择最下面的“检查”，即可打开开发者工具，并自动定位到该元素；还有就是在开发者工具打开的状态下，使用左上角的箭头按钮，点选页面元素。
B：可以查看的内容：页面的HTML代码和样式，包括元素样式(与上级元素)的继承关系。
C：可以进行的操作：
- 可以在元素代码里面添加、删除或者修改，页面会立即生效；
- 可以在元素的style里面添加、删除或者修改样式，页面会直接生效；
- 可以选择复制页面元素的代码，再顺便把style里面的样式也复制一下。
D：应用场景：
- 看见别人页面中的好东西，想借鉴一下；
- 页面布局调试和样式调试；
举例：在百度地图页面，如果想要知道某个区域对应的地图瓦片的X、Y序号怎么办？ 这个工具会恨简单地帮到你：
2.2 Network
比如我也想做一个https://www.sogou.com/类似风格的网页，简单的很
- 开一个新的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：
结语
关于Chrome的开发者工具，每个Chrome版本升级，开发者工具都会更新很多内容。最近的开发者工具更新主要集中在页面的性能分析方面，研究的不深。
程序员不仅仅要把页面功能做出来，适当也要注意一下性能，因为这关系到用户体验！