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. flyio 的请求封装

    1.安装flyio.js npm install flyio --save-dev 2.在util创建一个fly.js用于封装 import Vue from 'vue' var Fly=requir ...

  2. poj1236 Network of Schools(SCC缩点+结论推导)

    第一问简单不讲. 第二问简化后问题是给一张DAG求最少添加几条边使得DAG变成一个SCC.首先所有中间点(有入度有出度)肯定直接顺着走到无出度点,所以肯定是无出度点连向无入度点. 把无入度点作为点集S ...

  3. springAOP分析

    参考https://www.cnblogs.com/liuyk-code/p/9886033.html 在springboot中自动引入了配置文件AopAutoConfiguration @Confi ...

  4. idea tomcat服务器运行打印日志到控制台是乱码解决方案

    1.试过网上很多方面,给启动的时候加参数,什么-Dfile.encoding=utf8等等都没用. 2.最后是修改了tomcat-conf-logger.properties中的 我的一开始utf-8 ...

  5. import org.apache.ibatis.annotations.Param 报错

    说明缺少依赖 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus ...

  6. 2018CCPC桂林站JStone Game

    题目描述 Alice and Bob are always playing game! The game today is about taking out stone from the stone ...

  7. 浅谈C语言和C++中“类”的区别

    在C语言中,没有“类”的概念,但是可以由结构体struct构造出我们所需要的数据类型,struct可以组合不同的数据类型,可以看作是C语言中的“类”. 下面是C语言中的结构体的实例. #include ...

  8. Python中send和sendall的区别

    官方文档对socket模式下的socket.send() 和 socket.sendall()解释如下: sock.sendall(string[, flags]) Send data to the ...

  9. AcWing:238. 银河英雄传说(带权并查集)

    有一个划分为N列的星际战场,各列依次编号为1,2,…,N. 有N艘战舰,也依次编号为1,2,…,N,其中第i号战舰处于第i列. 有T条指令,每条指令格式为以下两种之一: 1.M i j,表示让第i号战 ...

  10. PHP开发框架CI——学习小记

    之前做后端开发的时候,因为都是很小的功能或项目,所以基本都是手写原生php.不过这样的开发效率在面对稍大一些的项目的时候是比较低的.因此花时间学习一下php相关框架CI的使用. MVC架构 在学习CI ...