调试时使用最多的功能页面是:元素(ELements)、控制台(Console)、源代码(Sources)、网络(Network)等。
查看元素代码:点击如图
箭头(或用者用快捷键Ctrl+Shift+C)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置 。
查看元素属性:可从被定位的源码中查看部分,如class、src,也可在右边的侧栏中查看全部的属性,如下图位置查看
修改元素的代码与属性:可直接双击想要修改的部分,然后就进行修改,或者选中要修改部分后点击右键进行修改,如下图
注意:这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,故而这个功能也是作为调试页面效果而使用。
右边的侧栏个功能的介绍:如下图所示
Console对象的主要方法如下:
调试快捷键有: F10,跳过当前方法(如果执行到一个自定义方法,不进入方法内部) F11,进入当前方法(如果当前方法是一个自定义方法,进入方法内部) SHIFT+F11 跳出当前方法 F8,跳到下一个断点
请求文件的具体介绍:
一共分为四个模块:
打开浏览器,按F12,点击Network,可以查看相关网络请求信息,记得是打开F12之后再刷新页面才会开始记录的。
1、查看Network基本信息,请求了哪些地址及每个URL的网络相关请求信息都可以看的到:URL,响应状态码,响应数据类型,响应数据大小,响应时间
2、请求URL可进行筛选和分类:选择不同分类,查看请求URL,方便查找
3、也可以直接Filter搜索查询相关URL,可以输入关键字或者正则表达式进行查询
4、Waterfall能分割重要的请求耗时,查看具体请求耗时在哪个地方,鼠标指到相关区域可以看到具体耗时
我们具体分析下里面每个各代表什么意思,分别耗时多少,通过这个来分析服务器到底是哪个环节出了问题
Queueing 是排队的意思
Stalled 是阻塞 请求访问该URL的主机是有并发和连接数限制的,必须要等之前的执行才能执行之后的,这段时间的耗时
DNS Lookup 是指域名解析所耗时间
Initial connection 初始化连接时间,这里一般是TCP 3次连接握手时间
SSL https特有,是一种协议
Request sent 发送请求所消耗的时间
Waiting 等待响应时间,这里一般是最耗时的
Content Download 下载内容所需要消耗的时间
主要是用来查看当前网页可以访问到的一些本地信息,比如:Cookie,LocalStorage,SessionStorage,DB等
参考: