Chrome 按下 F12 之后出现的功能是做什么用的
- 编辑:大众自然网 -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 之后出现的功能是做什么用的