Chrome development tools学习笔记(1)

前言

Debug是每个程序员成长过程中必须会的一门技能。也是现在大学编程教育中缺失的一门课程，老师们往往更在乎让程序正确的运行，但可能对于学生来说只有10%的时候程序是直接运行成功输出正确结果的，90%的时候程序可能无法运行或者运行结果不正确。我周围的很多同学就是在一次次的程序出错中渐渐丧失了对编程的兴趣，我想，如果学校里可以在教会编程的时候，也传授下debug的方法，让学生能够自己去一步步找出bug，应该会让更多人喜欢上编程这门技能的。

在大学里，我们可能只知道debug是可以运行程序的，从来没有打过断点监视过变量，我在学校里时候一般遇到bug都是alert或者print变量的值进行调试。在工作后接触到了Chrome开发者工具（Chrome development tools以下简称DevTools），从此打开了一扇新的大门，通过DevTools的使用，让我更好的能够去了解程序运行的流程，更好更快的解决开发中遇到的很多问题。如果说alert的方式是原始社会，那么DevTools的使用让我有种一下子踏入工业社会的感觉。

在之前带实习生的过程中，我把dev tools的使用也作为了培训课程中的一部分，在备课的时候，发现现在国内对于DevTools的文档和资料还是相当匮乏的。很多网站上面的介绍，都太过笼统，往往只用几句话就介绍完了DevTools一个tab的功能，对于初学者来说还是教难上手。chrome自身对于国内开发者也比较不友好，我用的chrome即使把语言设置成了中文，DevTools的语言仍然是英文的，同时这么多年来官方依旧没有给出中文版的文档，英文版文档随着google退出中国又不是很好访问。因此萌生了自己整理一份chrome development tools的中文资料的想法，作为自己的学习笔记同时可以让大家更好的去使用这一工具来帮助开发。

说明

这篇文章是基于我现在使用的chrome版本（360极速浏览器 chromium39.0.2171.99）书写的，在不同版本上DevTools可能稍有差别，一些快捷键也是windows上的，mac和linux的使用者可以参照自己的系统。

参照了chrome官方文档https://developer.chrome.com/devtools 访问请自备梯子。

如果有遗漏不正的地方，欢迎留言或者邮件向我指出。

打开DevTools

在浏览网页的时候，有以下几种方式可以打开DevTools：

按下键盘上的「F12」键

在页面上按下鼠标右键，选择「审查元素」

从右上角的菜单进入到「工具」---「开发者工具」

DevTools界面

DevTools的界面如下：

最上面的标签栏里列出了DevTools的主要功能

DevTools设备模拟

击Element标签前面的手机图标，可以让浏览器模拟各种设备以便确认页面在不同分辨率、不同网络情况下的访问情况，此时DevTools会自动把鼠标单击映射成了触屏点击动作。如图，此时浏览器模拟的是3G网络下面的iphone6访问百度首页的情况，除了页面layout发生了变化外，在Network中设置不同的网络连接，对于打开页面的速度也是有影响的。

（完）

转载自我的技术博客http://www.cc-lab.cn/chrome-dev-tools-1/