SimoneChrome 按下 F12 之后出现的功能是做什么用的？
的有关信息介绍如下：
好多赞，谢谢大家关注，暂时就写这么多吧，再写就跑题了，如果是做WEB开发或者前端的，重点多了解下Source和Console调试JS，真的很好用。
看了些其它回答，有些是用来扒图片的，有些是写爬虫的（这个不要看Elements，因为浏览器会对一些不符合规范的标签做补全或者其它处理，最好是Ctrl+U）。
图片的话就不要看Network了，一个页面图片太多了，我们可以点击网页上的图片然后右键-》审查元素，然后Elements会定位到一个<img />标签，那个src属性就是你要的图片地址了，有的网页会把右键禁掉了，下面有介绍打开Chrome DevTools的方法，用“放大镜”定位图片元素。
=================================原文=================================
虽然不是做前端开发的，但是对Chrome DevTools还是用的比较熟的。
自从知道F12以后，每次浏览网页的时候看到什么特别炫的效果或者功能，总是忍不住按F12，然后开始研究一番，这真是一种病。下面我们用知乎网来做些演示。
这个东西是前端开发人员的利器啊，要认真写的话，写一天也写不完，先随便写一点吧，有时间再更新。
其它我不怎么用，没有研究过^-^
Elements
题主看到的是用来模拟移动设备的一个功能，这样就不用手机浏览器打开来看了。下面这个图片是用来模拟nexus 5的，
最左面那个放大镜是用来定位DOM元素的，你可以试下，选择你要查看的网页内容，点击一下，看Elements选项卡，那里应该定位到你点击的那个元素了。这个比较常用 。
右边是当前选中的DOM元素的一些CSS样式信息，可以直接编辑，在网页上看到效果，移到某个具体的CSS样式上，会出现一个复选框，可以点击启用或禁用该样式。下面这个是禁用知乎导航栏的背景色
Network
接下来看下network，这个主要是用来查看当前的网页的一些网络请求（CSS,JS,image，ajax，Document等），
这里有基本的请求信息：
URL，请求方法，响应状态码，响应数据类型，响应数据大小，响应时间和每个阶段所花费的时间。
用的比较多的估计就是XHR了，点击具体的请求，可以看到当前请求的信息和服务器响应的信息，这个很好用
下面这个图我们可以知道知乎的实时消息实现用WebSocket实现的
如果Chrome的Network能像Firefox Dev版一样，可以直接编辑信息重发就更好了 ^-^。
Source
Source估计是这里最好用的一个了。先看张图
这是知乎的一个JS文件，压缩过的，基本没有什么可读性，点左下角那对大括号（{ }），格式化一下这个JS文件，就会变成下面这样，可读性还是太差，但最起码调试的时候好点了，知道程序现在执行到哪一行了。
好用吧^-^，然后再打一个断点，那么这整个网页就挂起来了，右边是当前作用域的一些变量信息，
调试有 F10,F11,F8,SHIFT+F11等快捷键，不要问怎么用，用下就知道了。
具体是：
F10，跳过当前方法（如果执行到一个自定义方法，不进入方法内部）
F11，进入当前方法（如果当前方法是一个自定义方法，进入方法内部）
SHIFT+F11 跳出当前方法
F8，跳到下一个断点
想当年不知道有Chrome，用肉眼和alert来在IE下调试JS，边流泪边调试......说多了都是泪。总之现在你可以非常方便的调试JS了。
Resource
resource主要是用来查看当前网页可以访问到的一些本地信息，比如：Cookie，LocalStorage，SessionStorage，DB等
下面这图是知乎的Cookie信息
Console
最后Console，这个主要是显示JS文件里面打印的日志信息(console对象)。你也可以直接在里面写JS，查看或修改当前作用域的变量信息，配合Source的调试用，非常爽。
如果是当前作用域内的对象（包含全局对象）的话，console还会自动帮你补全，有的时候我会忘记某个对象有什么方法，经常会用这个来看，或者console.dir(对象)看。
数组对像（实例）的方法
先写这么多。WEB开发人员开发的神器，总之，有了这个，妈妈再也不用担心......
====================更新一些Console对象的吧=============================
Console对象的主要方法如下：
用法如下图：
日志的等级：debug，info，warn，error。
打印变量信息什么的，一般用log方法，相对于alert，这方法真是好。
alert会让浏览器挂起，如果alert的多了，还要一个个确定，最痛苦的时候，如果是一个对象，直接用alert打印的时候，直接是个object，要看具体某个属性的值还要写个循环，调试结束还特么要一个个删除，调试到哭的有没有。
console.log，不会挂起浏览器，在后台默默打印，对象会显示对象的具体信息，如果删除的话，点击log信息的右下角，直接定位到文件。
console.table打印数组对象（数组每一项是对象）信息非常好
console.time(tag)和console.timeEnd(tag)可以用来计start和end间花费的时间
console.dir(object) 打印对象的原型信息，很好用有没有。
还有其它一些没怎么用过的，大家可以自己去了解下。
下面内容请高手略过，写给普通用户看的。
=================================update================================
上面讲的一些主要针对开发者的，普通用户
也有些好用的东西，比如：
情况1：
以前经常碰到，现在本来想找个做演示的，但没有找到，下面就以百度登录为例吧（百度不登录的用户不会弹出登录窗口的）
我们先用“放大镜”选择空白区域，先定位到遮罩的DOM元素上，定位的可能不是很准，这里定位到子元素上了，一般这种情况我们往上层找，找到有个DOM元素有id属性的那个，一般就是，或者你看浏览器的显示当然DOM的区域，选中遮罩的DOM元素，然后右键-》 delete node，或者直接按Delete键，就可以删除这个DOM元素了，如果删错了怎么办，没事，不要急，重新刷新一下页面就行了。
下面这个是删除登录窗口的，操作方式同上。
情况2：
有些网站按F12是没有用的，因为JavaScript脚本把浏览器的默认事件给阻止掉了，但是没事，只要你能打开Chrome DevTools，脚本怎么阻止都没有用。
打开后你就可以用“放大镜”选中你要复制的内容，点击定位到当前元素，然后就可以复制Elements里面的内容。
如果你要复制的内容里面有HTML标签，你不想要标签怎么办，没事，看下面这个图片
这段文字里面有一个图片标签和一个超链接，我们先给这个DOM元素添加一个id属性，以便我们后面可以快速找到这个DOM元素，添加属性方法：右键-》Add attribute。
我们添加一个id为robinbin的属性，然后按Esc键，打开Console，写一段Javascript。
回车就有了
先这样吧......大家加油
感谢大家的关注，内容有点多，大家看的辛苦了，Chrome DevTools还有很多非常有用的功能，大家可以自己探索下，希望回答能对大家有所帮助。
