谷歌浏览器开发者工具操作手册
谷歌浏览器开发者工具操作手册
文章目录
- 谷歌浏览器开发者工具操作手册
- 一、准备工作
- 1.1 开发者工具打开的几种方式
- 1.2 将开发者工具设置为中文
- 二、元素(Elements)
- 2.1 基本结构图例
- 2.2 元素样式模块
- 2.3 计算样式
- 2.4 布局
- 2.5 事件监听器
- 2.6 其他功能
- 三、控制台(Console)
- 3.1 基本信息图例
- 3.2 console常用打印调试
- 四、源代码(Sources)
- 五、网络(NetWork)
- 六、性能(Performance)
- 七、内存(Memory)
- 八、应用(Application)
- 九、安全(Security)
一、准备工作
谷歌浏览器是开发人员使用最多的,作为前端开发来说:掌握谷歌浏览器的开发者工具调试的各种功能可以更快的定位到问题,更好与后端做交互。
开发者工具日常经常用到的几个选项卡功能:元素(Elements)、控制台(Console)、源代码(Sources)、网络(NetWork)。这几个可以在下面重点关注一下。
1.1 开发者工具打开的几种方式
- 在浏览器界面按
F12
,如果F12键被占用则使用组合键Fn + F12
; - 使用快捷键
Ctrl + Shift + i
; - 点击鼠标右键选择右键菜单中的检查;
- 点击浏览器右上角
┇
——>更多工具——>开发者工具
1.2 将开发者工具设置为中文
前提条件谷歌浏览器版本是94+版本,要不然不支持中文。
操作步骤:
- 根据上面方法打开浏览器开发者工具;
- 使用快捷键
F1
,不生效则被占用换组合键Fn + F1
;或者点击开发工具右上角设置图标
,目的是进入开发者工具设置页面; - 在
Language
下拉框最下面找到Chinese-中文
; - 重启浏览器,或者关闭设置界面时会弹出
Reload DevTools
点击重新加载就好。
图例:
二、元素(Elements)
2.1 基本结构图例
上图基本展示了**元素(Elements)**基本的操作结构与内容,重点是先找到需要操作的某个页面元素。我们可以直接在页面中修改页面结构与内容,可以直观的看到效果展示。下面主要介绍元素操作模块的功能:
2.2 元素样式模块
可以通过这个功能模块给元素重新设置样式,也可以在原有基础上微调元素样式信息,满足需求后复制到代码中去。
2.3 计算样式
就是展示当前元素最终样式呈现结果,可以快速定位到到底是那个选择器样式生效。
2.4 布局
如图所示,可以精细化的查看页面布局情况,定位样式问题。这个日常使用较少,作为了解掌握即可。
2.5 事件监听器
通过事件监听器我们可以查看到当前元素本身绑定的监听事件,做测试时可以移除对应监听事件防止误操作。
2.6 其他功能
DOM断点: 监听当前元素移除,变化等操作后进行的断点隔断;
属性: 当前元素的JS属性;
无障碍功能: 让每一个人都可以正常使用我们的浏览器,这个需要在浏览器设置页面进行开启和配置插件使用。
三、控制台(Console)
3.1 基本信息图例
控制台的基本常用操作就这些,主要是可以使用JS代码操作页面元素,从而到达测试效果。有时候不想打开编辑器,在浏览器写JS测试代码也是一个不错的选择哦
3.2 console常用打印调试
打印命令 | 描述 |
---|---|
console.log() | 控制台输出一条消息 |
console.info() | 控制台输出一条通知消息 |
console.table() | 控制台输出表格形式,参数必须为data[array/object] |
console.warn() | 控制台输出警告信息 |
console.error() | 控制台输出错误信息 |
console.dir() | 控制台输出对象形式信息 |
console.clear() | 清空控制台 |
console.count() | 输出count()被调用次数 |
console.debug() | 输出“调试”级别的消息且配置为显示调试输出时才显示 |
四、源代码(Sources)
基本功能就是图例所展示的内容,这个主要是全局上操作界面内容。可以在源码中设置断点,查看数据流向,以及异常监听拦截。
五、网络(NetWork)
查看页面接口调用信息,更好的查看返回数据针对数据进行处理;接口调用出错时可以迅速定位问题,查看接口地址、请求类型、请求参数等是否正确,token是否在请求头中等等信息。
六、性能(Performance)
做性能检测时可以查看页面加载时间,那块内容阻断时间较长;好针对性做出性能优化,其他情况下基本不用。
七、内存(Memory)
也是通过分享内存占用率,来进行性能优化。
八、应用(Application)
应用中主要就是浏览器的一些本地缓存空间,脚本内容等等。这里面需要区分的是本地存储空间与会话存储空间。
本地存储空间: 关闭浏览器还会保存,指的是localStorage
会话存储空间: 关闭当前选项卡网页储存内容就会清空,指的是sessionStorage。
九、安全(Security)
存储当前网页的证书信息、网络连接设置和资源信息等等。
谷歌浏览器开发者工具操作手册相关推荐
- 谷歌浏览器开发者工具的使用详解
一.基础功能篇 1. elements 在elements中主要分为两大块: A:HTML结构面板 B:操作dom样式.结构.事件的显示面板 (1)点击箭头选中一个元素,可以在HTML面板中定位到该元 ...
- 恢复【谷歌浏览器开发者工具】默认设置(亲测)
恢复[谷歌浏览器开发者工具]默认设置: 来源:恢复[谷歌浏览器开发者工具]默认设置_小枯林的博客-CSDN博客_谷歌浏览器开发者模式怎么恢复默认
- 谷歌浏览器开发者工具解析
谷歌浏览器开发者工具解析 Elements 用于查看和编辑当前页面中的 HTML 和 CSS 元素. Console 用于显示脚本中所输出的调试信息,或运行测试脚本等. Sourses 用于查看和调试 ...
- 恢复【谷歌浏览器开发者工具】默认设置
恢复[谷歌浏览器开发者工具]默认设置:
- 谷歌浏览器开发者工具 preserve log
谷歌浏览器开发者工具 preserve log 在我们开发页面时,点击按钮触发了某个接口并跳转了页面,这时Network中的信息会刷新,不做保留,这个时候我们只需要勾选上谷歌开发者工具的preserv ...
- 如何使用谷歌浏览器开发者工具中的Performance分析网页性能
当我们在进行大并发的直播消息互动时,对浏览器的负荷是比较大的,如何提供一种方法来评估实时网页性能以及相关的数据呢? 可以用谷歌浏览器开发者工具中的Performance绘制火焰图对网页进行分析. 接下 ...
- 谷歌浏览器--开发者工具使用
谷歌浏览器–开发者工具使用 1.源代码面板-sourc 1. 断点 :代码执行到断点处会停止执行 ①跳到下一个断点 ②步过 跳过当前语句到下一个语句 ③步入,进入函数,看语句详细代码 ④步出,跳出 ...
- 谷歌浏览器开发者工具的快捷键详解
谷歌浏览器开发者工具的快捷键详解 孔子说:工欲善其事,必先利其器. 老子说:孔子说的对. 针对前端开发人员,谷歌浏览器的好处自然不言而喻,其强大的调试工具更是提供了很多便利,现将开发工具常用的快捷键整 ...
- 谷歌浏览器开发者工具标签介绍
谷歌浏览器开发者工具标签介绍: 一般在windows系统上浏览器开发者工具打开都是按F12快捷键. ==>Element标签:该标签使用来查看页面的HTML标签元素的,能够也就是查看源码,我们可 ...
最新文章
- python 异常处理模块_我的python学习之路-异常处理和模块导入
- thymeleaf的能用在什么地方_细品 Spring Boot+Thymeleaf,还有这么多好玩的细节!
- Oracle+Python适合 Oracle DBA 使用的 Python
- 离线轻量级大数据平台Spark之MLib机器学习库SVM实例
- 首次公开,阿里云开源PolarDB总体架构和企业级特性
- python qt gui与数据可视化编程 pdf_《Python Qt GUI与数据可视化编程》第13章
- Linux与JVM的内存关系分析(转)
- 欢迎来到,数据库联盟!
- sql 子查询 嵌套查询_SQL子查询– SQL中的嵌套查询
- 使用Asp.net MVC源代码调试你的应用程序
- 【BZOJ 3531 Sdoi2014】旅行【动态开点线段树+树链剖分】
- android抓trace工具,Android性能优化工具之TraceView
- 入手kindle 3
- Android勒索软件分析
- Pickit 3D视觉定位抓取系统 -硅步机器人
- springboot + vue 全栈开发实战 读书感想
- LightProxy 无线端代理iOS,安装验证证书后仍不生效
- 问题解决:java.sql.SQLException: No suitable driver found for jdbc:mysql
- 日本春令营在线比赛第一天总结
- 哪些平台可以查看医学类文献?