Chrome 按下 F12 之后出现的功能是做什么用的

　　接待来到里全邦，正在这里你能瞥睹光鲜的页面背后的形貌。

　　许众赞，感谢大众闭切，目前就写这么众吧，再写就跑题了，若是是做WEB开荒或者前端的，中心众解析下Source和Console调试JS，真的很好用。

　　看了些其它回复，有些是用来扒图片的，有些是写爬虫的（这个不要看Elements，由于浏览器会对少少不切合典范的标签做补全或者其它管理，最好是Ctrl+U）。

　　图片的话就不要看Network了，一个页面图片太众了，咱们可能点击网页上的图片然后右键-》审查元素，然后Elements会定位到一个标签，阿谁src属性即是你要的图片地点了，有的网页会把右键禁掉了，下面有先容掀开Chrome DevTools的手法，用“放大镜”定位图片元素。

　　就如此吧，大众干巴爹

　　=================================原文=================================

　　固然不是做前端开荒的，然则对Chrome DevTools仍然用的对比熟的。

　　自从晓畅F12此后，每次浏览网页的时辰看到什么额外炫的恶果或者效力，老是不由得按F12，然后起首讨论一番，这真是一种病。下面咱们用知乎网来做些演示。

　　这个东西是前端开荒职员的利器啊，要郑重写的话，写一天也写不完，先敷衍写一点吧，有年光再更新。

　　Elements 查看此刻文档的DOM音讯

　　Network 查看搜集苦求的

　　Source 查看此刻资源文献的（CSS,JS,IMAGE）

　　Resources 查看当地资源音讯的（cookie,local storage,session storage等）

　　Console 查看调试用的，也可能直接写JS代码

　　其它我不何如用，没有讨论过^-^

　　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。

　　document.getElementById(robinbin).innerText

　　回车就有了

　　先如此吧......大众干巴爹

　　谢谢大众的闭切，实质有点众，大众看的费力了，Chrome DevTools再有许众额外有效的效力，大众可能我方研究下，祈望回复能对大众有所助助。

　　跟你说这个屌爆了，平常人我不告诉。

　　网页图片时常不首肯你右键另存，不管他用了什么时间，只消别嵌入到flash里，就可能F12找到resource，然后树形机闭一层层点开找吧，原图就正在内中。

　　这一招屌到什么水平我告诉你，已经某网站里的图屏障下载的时间超好，乃至于这个网站都如斯着名，但网站里的图本来没睹过大界限流出去被二次转载的（当然截屏是可能但笃信不实际），但用这一招就可能。

　　正在线视频，不首肯下载，F12找到network，下面防备找，总能找到cdn地点，复制下来贴迅雷里就能下了。

　　下载网页上的种种东西

　　只消被我看到，你将遗失版权

　　劳动中常用的几个：Elements, Console, Sources, NetWork, Application

　　Elements

　　Elements 中，可能查看而且编辑页面元素，正在左侧可能点选某一个元素，该元素会正在页面上高亮，同时正在右侧显示该元素的一切样式

　　Console

　　Console最有效的，即是打断点的时辰举行查看吧

　　console内中整个供给了哪些手法可能供咱们常日调试时应用

　　平常境况下咱们用来输入音讯的手法苛重是用到如下四个

　　1、console.log 用于输出浅显音讯2、 用于输出提示性音讯3、console.error用于输有缺点音讯4、console.warn用于输出警示音讯5、console.group输出一组音讯的起首6、console.groupEnd解散一组输出音讯7、console.assert对输入的外达式举行断言，只要外达式为false时，才输出相应的音讯到左右台8、console.count（这个手法额外适用哦）当你思统计代码被实施的次数9、console.dir(这个手法是我时常应用的 可不晓畅比for in简单了众少) 直接将该DOM结点以DOM树的机闭举行输出，可能周密核对象的手法开展等等10、console.time 计时起首

　　Sources

　　Sources标签页下，可能查看此刻网站的HTML，及其引入的一切CSS、Javascript文献。紧要的是，正在Javascript文献中的任何一行，咱们都可能扶植断点，剧本将会正在这一行停下来。触发断点时，咱们可能查看断点所正在的功用域内的一切变量的值。

　　右侧窗格显示结局部变量、看管变量以及移用栈。右侧窗格的上方有一连、下一步、进入函数、跳出函数、禁用断点等按钮。

　　Network

　　Network 中，可能查看此刻页面的一切搜集苦求。

　　Name：苦求文献名称

　　Method：手法（常睹的是get post）

　　Status：苦求已毕的形态

　　Type：苦求的类型

　　Initiator：苦求源也即是说该链接通过什么发送（常睹的是Parser、Script）

　　Size：下载文献或者苦求占的资源巨细

　　Time：苦求或下载的年光

　　Timeline：该链接正在发送进程中的年光形态轴（咱们可能把鼠标搬动到这些红红绿绿的年光轴上，对应的会有它的周密音讯：起首下载年光，恭候加载年光，自己下载耗时）

　　Application

　　目前application苛重用来查看有哪些cookies和local Storage(H5当地存储Web storage特质的API), 测试的时辰，有时须要清算和查看。

Chrome 按下 F12 之后出现的功能是做什么用的