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

娱乐新闻 2020-01-1464未知admin

  好多赞,谢谢大家关注,暂时就写这么多吧,再写就跑题了,如果是做WEB或者前端的,重点多了解下Source和Console调试JS,真的很好用。

  看了些其它回答,有些是用来扒图片的,有些是写爬虫的(这个不要看Elements,因为浏览器会对一些不符合规范的标签做补全或者其它处理,最好是Ctrl+U)。

  图片的话就不要看Network了,一个页面图片太多了,我们可以点击网页上的图片然后右键-》审查元素,然后Elements会定位到一个img /标签,那个src属性就是你要的图片地址了,有的网页会把右键禁掉了,下面有介绍打开Chrome DevTools的方法,用“放大镜”定位图片元素。

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

  自从知道F12以后,每次浏览网页的时候看到什么特别炫的效果或者功能,总是不住按F12,然后开始研究一番,这真是一种病。下面我们用知乎网来做些演示。

  这个东西是前端人员的利器啊,要认真写的话,写一天也写不完,先随便写一点吧,有时间再更新。

  Resources 查看本地资源信息的(cookie,local storage,session storage等)

  题主看到的是用来模拟设备的一个功能,这样就不用手机浏览器打开来看了。下面这个图片是用来模拟nexus 5的,

  的,你可以试下,选择你要查看的网页内容,点击一下,看Elements选项卡,那里应该定位到你点击的那个元素了。这个比较常用 。

  右边是当前选中的DOM元素的一些CSS样式信息,可以直接编辑,在网页上看到效果,移到某个具体的CSS样式上,会出现一个复选框,可以点击启用或禁用该样式。下面这个是禁用知乎栏的背景色

  接下来看下network,这个主要是用来查看当前的网页的一些网络请求(CSS,JS,ige,ajax,Document等),

  URL,请求方法,响应状态码,响应数据类型,响应数据大小,响应时间和每个阶段所花费的时间。

  用的比较多的估计就是XHR了,点击具体的请求,可以看到当前请求的信息和服务器响应的信息,这个很好用

  如果Chrome的Network能像Firefox Dev版一样,可以直接编辑信息重发就更好了 ^-^。

  这是知乎的一个JS文件,压缩过的,九重凛基本没有什么可读性,点左下角那对大括({ }),九重凛格式化一下这个JS文件,就会变成下面这样,九重凛可读性还是太差,但最起码调试的时候好点了,知道程序现在执行到哪一行了。

  好用吧^-^,然后再打一个断点,那么这整个网页就挂起来了,右边是当前作用域的一些变量信息,

  resource主要是用来查看当前网页可以访问到的一些本地信息,比如:Cookie,LocalStorage,SessionStorage,DB等

  最后Console,这个主要是显示JS文件里面打印的日志信息(console对象)。你也可以直接在里面写JS,查看或修改当前作用域的变量信息,配合Source的调试用,非常爽。

  如果是当前作用域内的对象(包含全局对象)的话,console还会自动帮你补全,有的时候我会忘记某个对象有什么方法,经常会用这个来看,或者console.dir(对象)看。

  打印的时候,直接是个object,要看具体某个属性的值还要写个循环,调试结束还特么要一个个删除,

  ,不会挂起浏览器,在后台默默打印,对象会显示对象的具体信息,如果删除的话,点击log信息的右下角,直接定位到文件。

  =================================update================================

  有些网站没有注册的用户,老是弹出一些窗口,提示注册(我就看个信息还要注册,最讨厌这样的网站了,我偏不注册)

  以前经常碰到,现在本来想找个做演示的,但没有找到,下面就以百度登录为例吧(百度不登录的用户不会弹出登录窗口的)

  我们先用“放大镜”选择空白区域,先定位到遮罩的DOM元素上,定位的可能不是很准,这里定位到子元素上了,一般这种情况我们往上层找,找到有个DOM元素有id属性的那个,一般就是,或者你看浏览器的显示当然DOM的区域,选中遮罩的DOM元素,然后右键-》 delete node,或者直接按Delete键,就可以删除这个DOM元素了,如果删错了怎么办,没事,不要急,重新刷新一下页面就行了。

  有些网站按F12是没有用的,因为JavaScript脚本把浏览器的默认事件给掉了,但是没事,只要你能打开Chrome DevTools,脚本怎么都没有用。

  打开后你就可以用“放大镜”选中你要的内容,点击定位到当前元素,然后就可以Elements里面的内容。

  这段文字里面有一个图片标签和一个超链接,我们先给这个DOM元素添加一个id属性,以便我们后面可以快速找到这个DOM元素,添加属性方法:右键-》Add attribute。

  网页图片经常不允许你右键另存,不管他用了什么技术,只要别嵌入到flash里,就可以F12找到resource,然后树形结构一层层点开找吧,原图就在里面。

  这一招到什么程度我告诉你,曾经某网站里的图屏蔽下载的技术超好,以至于这个网站都如此出名,但网站里的图从来没见过大规模流出去被二次转载的(当然截屏是可以但肯定不现实),但用这一招就可以。

  主要是给前端者浏览网页用的,本来我想看看空间的说说,过了一会儿后,我发现我正在看某个效果是怎么实现的,这是病啊。

  就是用js查找一个元素不用写一堆querySelector,从Element选中,就会赋值给$0,在Console可以打出。

  很多迅雷下载的资源点击自动下载版的xunlei7,我才不会告诉你们右键地址审查元素copy link ad就可以直接用精简版xunlei下载东西。

  工作中常用的几个:Elements, Console, Sources, NetWork, Application

  7、console.assert对输入的表达式进行断言,只有表达式为lse时,才输出相应的信息到控制台

  9、console.dir(这个方法是我经常使用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等

  Sources标签页下,可以查看当前网站的HTML,及其引入的所有CSS、Javascript文件。重要的是,在Javascript文件中的任何一行,我们都可以设置断点,脚本将会在这一行停下来。触发断点时,我们可以查看断点所在的作用域内的所有变量的值。

  右侧窗格显示了局部变量、变量以及调用栈。右侧窗格的上方有继续、下一步、进入函数、跳出函数、禁用断点等按钮。

  Timeline:该链接在发送过程中的时间状态轴(我们可以把鼠标到这些红红绿绿的时间轴上,对应的会有它的详细信息:开始下载时间,等待加载时间,自身下载耗时)

原文标题:九重凛Chrome 按下 F12 之后出现的功能是做什么用的? 网址:http://www.nikoncoolpixp500price.com/yulexinwen/2020/0114/7659.html

Copyright © 2002-2020 白日做梦资讯网 www.nikoncoolpixp500price.com 版权所有  

联系QQ:1352848661