浏览器F12开发者工具 | 您所在的位置:网站首页 › 解读当前页面 › 浏览器F12开发者工具 |
小编在工作中,经常要用到浏览器F12开发者工具,可以说是对它又熟悉又陌生。今天就索性抽时间把摸排一遍,做个笔记。分享给大家,希望大家可以多多支持一下呀。小编这里所用的微软的浏览器。 浏览器F12开发者工具的微软官方文档:https://learn.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromiu 高级用法--性能篇:浏览器F12开发者工具高效使用教程-CSDN博客 一、如何调出开发者工具在浏览器页面上 F12 键 (笔记本电脑 Fn + F12)鼠标右键选择 检查(N)快捷键 Ctrl + Shift + i 二、开发者工具初步介绍开发者工具最常用的四个功能模块: 元素(ELements)、控制台(Console)、源代码(Sources),网络(Network)。 1、元素(Elements) ❝ 查看网页页面的所有元素,修改元素的代码与属性。用于查看修改元素的属性、CSS 属性、监听事件以及断点等等。 ❞ 查看元素的代码点击左上角的箭头图标(或按快捷键 Ctrl+Shift+C)进入选择元素模式,从页面中选择需要查看的元素,可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置。 查看元素的属性:定位到元素的源代码之后,可以从源代码中读出改元素的属性。
点击元素,然查看右键菜单,可以看到 chrome 提供的可对元素进行的操作:包括编辑元素代码(Edit as HTML)、修改属性(Add attribute、Edit attribute)等。选择 Edit as HTML 选项时,元素进入编辑模式,可以对元素的代码进行任意的修改。 「注意:」 这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,故而这个功能也是作为调试页面效果而使用。
在元素的右键菜单中选择断点选项(Break on…),选中之后,当元素被修改(通常是被 JS 代码修改)时,页面加载会暂停,然后可以查看该元素的属性。元素断点添加之后,可以在右侧栏的 DOM Breakpoints 页面中看到,这个页面可以看到当前网页的所有元素断点。
元素的右边栏的 Event Listener 页面,可以查看到该元素的所有监听事件。在开发中,尤其是维护其他人的代码时,会出现不了解元素对应的监听事件,这个时候,可以在这个页面中找到。这个页面不仅能看到对应的事件函数,还可以定位该函数所在的 JS 文件以及在该文件中的具体位置(行数)。
当网页的 JS 代码中使用了 console.log()函数时,该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用,而当正式上线后,一般会将该函数去掉 在测试界面时,如果出现 Bug 问题,一般情况下会在这栏展示,查看调试日志信息或者异常错误信息,然后前端开发工程师根据具体问题来调试,进行解决问题。 3、Sources(源代码) 查看源文件在源代码(Source)页面可以查看到当前网页的所有源文件 包括:样式、css、图片、js 文件等。在左侧栏中可以看到源文件以树结构进行展示。
在源代码左边有行号,点击对应行的行号,就好给改行添加上一个断点(再次点击可删除断点)。右键点击断点,在弹出的菜单中选择 Edit breakpoint 可以给该断的添加中断条件。
添加断点后,当 JS 代码运行到断点时会中断(对于添加了中断条件的断点在符合条件时中断),此时可以将光标放在变量上查看变量的 也可以在右边的侧栏上查看:
在右侧变量上方,有继续运行、单步跳过等按钮,可以在当前断点后,逐行运行代码,或者直接让其继续运行。
有些文章设置了不可复制,那么如果想复制文字时, 按下 F12,或者右击鼠标选择【审查元素】,点一下下边弹出框左上角鼠标,然后去点击页面你想要的文字,下面框代码中亮的部分,看不到文字就点击箭头展开,看到文字,双击或者右键 copy
例子(比如说某库网需要 vip 才能下载的图片) 首先我们打开不能直接下载图片的网站,然后使用快捷键 F12,或者右击鼠标选择【审查元素】-> 看到对应的 img 选择 src 右键点击 open in new web 或者选择【 network】,再选择【 Img】,刷新页面就看得到下面有图片资源了,大部分网页是这样结构,有些图片会在【 sources】那里打开左侧栏(请求回来的图片资源),总之能找到图片的资源所在位置就可以了。
使用浏览器自带的截屏功能截取超过一个屏幕的网页 F12 或 Ctrl+ Shift+ I 打开开发者工具,在任意 tab 上按 Ctrl+ Shift+ P,在弹出的输入框里输入 Capture full size screenshot(其实不需要输入完整,可以自动补全),然后按回车即可
在控制台输入document.body.contentEditable="true"或者document.designMode = 'on'就可以实现对网页的编辑了。
四、使用开发者工具定位问题 作为运维人员的角度,可以使用开发者工具来协助进行问题定位
1、查看网站请求的基本信息
ALL:显示所有请求XHR:显示AJAX异步请求JS:显示js文件CSS:显示css文件Img:显示图片Media:显示媒体文件,音频、视频等Font:显示Web字体Doc:显示htmlWS:显示websocket请求Other:显示其他请求 2、查看接口信息
左侧 Name 栏,选择自己要抓取的接口名称,点击后右侧会出现接口Headers、Response 等Headers 第一栏 General 获取服务器地址、接口地址、以及请求方法等问号后面则是参数,key - value 形式,每个参数之间使用 & 相隔 可以通过network定位页面加载失败的问题,如图通过name可以看到具体记载失败的文件或者接口,status表示响应返回的状态码,200表示成功,如果是4xx或者5xx则表示请求失败,就需要好好定位了
size字段表示静态文件的大小 3、认识请求头和响应头
General部分 Request URL:请求的URL Request Method:请求使用的方法 Status Code:响应状态码 Remote Address:远程服务器的地址和端口 Reffer Policy:Referrer判别策略 响应头 Date:标识产生响应的时间 Content-Encoding:指定响应内容编码 Server:包含服务器信息,如名称,版本号等 Content-Type:文档类型,指出返回的数据类型是什么。如此处的text/html代表返回的是HTML代码 Set-Cookie:设置Cookies。响应头中的Set-Cookie告诉浏览器要将此内容放在Cookies中,下次请求携带Cookies请求 Expires:指定响应过期时间,可以使代理服务器将加载的内容更新到缓存当中。如果再次访问,就可直接从缓存中加载,降低服务器的负载,缩短加载时间。 请求头 Accept:请求报头域,用于指定客户端可接受哪些信息类型 Accept-Encoding:指定客户端可接受的语言类型 Accept-Language:指定客户端可接受的内容编码 Host:指定请求资源的主机IP和端口号,其为请求URL的原始服务器或网关的位置 Cookie:网站为了辨别用户进行会话跟踪而储存在用户本地的数据。主要功能是维持当前访问会话。(非常重要!!!) Referer:用来标识这个请求是从哪个网页过来的。服务器拿到这一信息并做相应的处理,如来源统计,防盗链等 User-Agent: 浏览器型号和版本 ,可以使服务器识别客户使用的操作系统及版本等信息。 Content-Type:互联网媒体类型,在HHTP协议消息中,用来表示具体请求中的媒体信息类型 补充: query string parameters: 请求参数,get请求的请求参数在url中,用&隔开; post请求的请求参数写在报文体中query string parameters request header中的Content-Type:post请求的请求格式,如果是get,没有请求格式
判断静态文件是否压缩 content-Encoding为gzip表示开启了压缩
查看静态文件的大小和响应时间 问题场景:网站响应慢,文件没有开启静态压缩场景
4、关注console中的报错 场景:如图表示websocket协议不支持或者未配置的报错
5、application查看网站cookie
7、post请求参数是json字符串格式
|
CopyRight 2018-2019 实验室设备网 版权所有 |