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

- 编辑:大众自然网 -

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

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

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

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

  图片的话就不要看Network了,一个页面图片太众了,咱们可能点击网页上的图片然后右键-》审查元素,然后Elements会定位到一个Chrome 按下 F12 之后出现的功能是做什么用的标签,阿谁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下调试Chrome 按下 F12 之后出现的功能是做什么用的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 之后出现的功能是做什么用的