F键,功能键,Function键。F12常用于网站界面测试、调试,分析网页所出现的问题,查看html元素、查看响应事件等方面。

打开一个网页,点击F12,弹出一个窗口,其窗口的功能如下:

1 Elements(页面元素)

查看网页页面的所有元素,修改元素的代码与属性。用于查看元素的属性、CSS属性、监听事件以及端点等等。

2 Console(控制台)

当网页的JS代码中使用了console.log( )函数时,该函数输出的日志信息会在控制台中显示。日志信息一般情况下是测试开发工程师在测试调试时启用,而在正式上线后,一般会将console.log( )函数去掉。

在测试界面时,如果出现Bug问题,一般情况下会在这栏展示,查看调试日志信息或者异常错误信息,然后前端开发工程师根据具体问题来调试,进行解决问题。

3 Sources(源代码)

当前打开的网页界面所涉及到的所有源代码都会出现在该栏,包括:样式、css、图片、js文件等

4 Network(网络)

查看Network信息,可以查看请求地址、URL、响应状态码(Status)、响应数据类型(Type)、响应数据大小(Size)、响应时间(Time)以及重要相关区域的请求耗时(Waterfall),也可筛选出不同类型的URL。

浏览器F12功能键对测试工程师的重要性的更多相关文章

  1. 年薪30W测试工程师成长之路,你在哪个阶段?

    对任何职业而言,薪资始终都会是众多追求的重要部分.前几年的软件测试行业还是一个风口,随着不断地转行人员以及毕业的大学生疯狂地涌入软件测试行业,目前软件测试行业“缺口”已经基本饱和.当然,我说的是最基础 ...

  2. 上海洋码头(www.ymatou.com)急招技术人才(职位:互联网软件开发工程师,.NET网站架构师,Web前端开发工程师,高级测试工程师,产品经理)

    对公司招聘职位有兴趣的童鞋可以把简历发送到zhangzhiqiang@ymatou.com,我们HR会快速给你答复. 互联网软件开发工程师 岗位职责: 1.参与洋码头各个平台(www.ymatou.c ...

  3. 【招聘】.NET高级开发、前端高级开发、测试工程师

    .NET架构师 工作地点:厦门-湖里区 工作年限:5年及以上 学历要求:大专或以上 工资范围:15000元 - 25000元 福利待遇:五险一金,带薪年休假,年度旅游,丰富的员工团队活动:生日会.中秋 ...

  4. [面试]中高级测试工程师必备,月薪15K+

    1.你的测试职业发展是什么? 测试经验越多,测试能力越高.所以我的职业发展是需要时间积累的,一步步向着高级测试工程师奔去.而且我也有初步的职业规划,前3年积累测试经验,按如何做好测试工程师的要点去要求 ...

  5. 巧用浏览器F12调试器定位系统前后端bug

    做测试的小伙伴可能用过httpwatch,firebug,fiddler,charles等抓包(数据包)工具,但实际上除了这些还有一个简单实用并的抓包工具,那就是浏览器的F12调试器. httpwat ...

  6. 测试工程师面试题之:给你印象最深的Bug

    有人看到别人在侵淫面试技巧,什么<程序员面试宝典>,或者<面试测试工程师须知>等等,就会嗤之以鼻.他会觉得这不是“投机取巧”吗,最重要的还是踏实提高自己的能力. 非常同意这种看 ...

  7. 巧用浏览器F12调试器定位系统前后端bug-转载

    做测试的小伙伴可能用过httpwatch,firebug,fiddler,charles等抓包(数据包)工具,但实际上除了这些还有一个简单实用并的抓包工具,那就是浏览器的F12调试器. httpwat ...

  8. 月薪20k+的测试工程师都会这项技能!

    一说到测试,很多人认为就是在一直"点点点"找bug的重复性工作,这是早期手工测试给人的刻板印象,随着测试行业的发展,"会代码"越来越成为测试工程师的一个标签. ...

  9. 互联网产品团队中Web前端工程师的重要性

    国内外各大互联网公司,都有UEx/d|UCD|CDC(Customer Research & User Experience Design Center)团队. 在很多公司会认为,合格的产品经 ...

随机推荐

  1. centos7部署mysql5.7一主多从

    /usr/share/mysql/charsets/ 服务器 ip 操作系统 mysql Mysql_master 192.168.188.11 centos7 5.7 Mysql_slave1 19 ...

  2. socket、tcp、udp、http 的认识

    一.先来一个讲TCP.UDP和HTTP关系的 1.TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层. 在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议. 在传输 ...

  3. 【线性代数】2-1:解方程组(Ax=b)

    title: [线性代数]2-1:解方程组(Ax=b) toc: true categories: Mathematic Linear Algebra date: 2017-08-31 15:08:3 ...

  4. Python PageFactory-使用配置文件动态生成页面PageObject

    需求 在Python Selenium 的 PageObject模式中,一般每个页面需要写一个类, 一种PageObject的写法如下: class BaiduPageObject(object): ...

  5. Mybatis源码学习之DataSource(七)_1

    简述 在数据持久层中,数据源是一个非常重要的组件,其性能直接关系到整个数据持久层的性能.在实践中比较常见的第三方数据源组件有Apache Common DBCP.C3P0.Proxool等,MyBat ...

  6. Mongodb内存管理和使用情况查询

    overview MongoDB使用的是内存映射存储引擎,即Memory Mapped Storage Engine,简称MMAP.MMAP可以把磁盘文件的一部分或全部内容直接映射到内存,这样文件中的 ...

  7. apidoc 接口文档系统

    代码未动,文档先行.apidoc可以方便地维护接口文档.模拟响应数据.前后端分离.导出PDF文档. 特性说明 可视化编辑:支持表单界面编辑接口,不必手动编辑swagger.json 接口模拟响应:支持 ...

  8. Qt网络获取本机网络信息

    下面我们就讲解如何获取自己电脑的IP地址以及其他网络信息.这一节中,我们会涉及到网络模块(QtNetwork Module)中的QHostInfo ,QHostAddress ,QNetworkInt ...

  9. RecyclerView只有一行

      RecyclerView只有一行 方法1: 将RecyclerView放在父容器RelativeLayout中,并设置RelativeLayout属性 android:descendantFocu ...

  10. Nginx在Linux安装详解及问题处理

    Linux编译安装 1.nginx 依赖于prce库,要先安装pcre. #yum install prce pcre-devel 2.下载解压nginx #cd /usr/local/src/ #w ...