2020-03-23 15:44发布
如图是页面显示问题，如颜色、样式、排版，一般就是前端的问题，如果是数据问题，一般就是后台问题，如果用f12定位前端或后台问题，用f12可以查看页面请求数据和数据服务器返回的数据，如果请求是正确，服务器响应错误，就是后台问题，如果是请求问题，就是前台问题，如果响应正确，页面显示问题就是前段问题。
chrom浏览器为例
（1）打开开发者工具，在浏览器菜单栏选择工具-开发者工具，快捷键是F12
（2）打开之后切换到Network页签，操作就可以看到请求响应
（3）再选择响应的链接，切换到Preview页签，可以看到响应的结果数据；切换到Headers页签可以看到请求的地址，请求的方式，结果等信息
（4）Response结果中可以看到返回的数据字段、值
如图，此时页面出现报错
点击该条报错信息
可以根据响应的值判断一些bug所在
（1）响应中没有数据，则是后端数据没有返回，前端展示为空，则为后端问题。例如：列表中新增一个数据，没有显示，通过请求中可以看到数据total为0，则是后端数据没有返回。
（2）响应中有数据，但是前端显示错误了，可以根据字段值判断是否前端显示中取错了字段显示，可以判断是前端问题。例如：前端显示内容错误了，把登录用户名显示了登录帐号，则可以在响应中看数据是否返回正确，返回正确而显示错误，则有可能是前端绑定字段错误。
（3）响应中有数据，但是跟自己操作的结果不一致，可以根据数据库查询，如果数据库中也没有记录，可能是代码有问题，没有记录你的操作。例如：注册了一个帐号，但是登录时提示帐号或密码错误，这就可以在数据库表中查看是否有注册的数据。
定位后提交问题
前台的bug通常是功能、界面和兼容性等有关。后台的bug与性能和安全性有关。前台bug定位：按F12在console中查看报错信息，对于出错的js可以在Sources下查看对应报错的资源文件，写入禅道提交给开发即可
通过console.log 查看，在f12里面出现的就是前端的问题
比较前后约定接口地址、参数、返回字段页面渲染等,错误、缺失则是前端bug。 若上述正确,则大概率是后台bug。”
这种情况下，但凡出问题，一般都是后端开发的问题。因为前端只处理用户体验、排版、样式等。
现在前后端分离的技术越来越成熟，加上 App、小程序等多种类型的前端，前端不仅仅是样式了，界面上的数据显示和处理都会由前端人员去完成。而后端开发专注于接口，前后端之间通过接口（协议）传递数据。
那么如果你在测试的时候，发现界面上的数据错误。这时候你去找前端，前端就会告诉你是后端的问题（有时候 bug 都不会看 #手动捂脸(*/ω＼*)）；你去找后端吧，后端又告诉，这是前端的问题。于是你站在中间，一脸懵逼！
这时候就是抓包工具啦，通过抓包工具分析接口传递的数据，如果接口返回的数据是正确的（参考需求和接口文档），那么就可能是前端显示的问题了，这时候后端至少是无辜的。
虽然从事开发行业的女生越来越多，但女生的比例还是远比不上男生。软件测试的男女生比例则基本相当，软件测试要求细心、耐心，大部分女生也是比较适合学的。而且软件测试课程分为手工测试和自动化测试，手工测试分为功能测试、性能测试、接口测试。自动化测试...
需要。很多人当初抱着测试不需要懂代码，才选择了这个行业，这个就要看对自己的职业定位了，是止步于月薪过万就可以了，还是往20k、30k去突破，如果这样的话，是肯定要会接口、会自动化，就必然要涉及到代码。如果真的看不懂代码，实际的测试后期的工作会出现...
在我看来游戏开发挺难的，尤其像手游一类的还有网游，里面有很多的程序代码而且伤神又费力，不过也有女生在这方面做的很好的，如果你感兴趣，非常想学，可以试试
软件测试专业现在很火热，很缺少人才，25岁学软件测试能学会，就业薪资也高，工作也相对轻松
测试类型有：功能测试，性能测试，界面测试。功能测试在测试工作中占的比例最大，功能测试也叫黑盒测试。是把测试对象看作一个黑盒子。利用黑盒测试法进行动态测试时，需要测试软件产品的功能，不需测试软件产品的内部结构和处理过程。采用黑盒技术设计测试用...
这个其实和接口测试的场景密不可分的，比如说：外部接口测试： 必须先接口测试通过了，才能执行功能测试子系统或者各个模块之间的联调测试： 必须各子系统后台代码完成，并提供接口才可以完成测试，一般来说都要求各子系统功能测试通过后再进行...
这个是会因为公司的架构不同而不同的，并不是固定的，但是一般是会有专门的测试部门，或者叫质量保证部，也有可能是叫别的名字。
移动端测试，包括App兼容性测dao试，7*24小时稳定性测试，功耗性能测试，UI测试，交互测试等，课程主要学习的内容有：1、功能测试主要包括计算机基础、软件测试核心理论、Linux、数据库，学习目标是掌握软件测试核心理论，结合Linux、数据库等可实现移动端、w...
标题 1. 首先要做一个标题党（此标题党非彼标题党）。标题一定要清晰简洁易理解，不应该臃长 2. 尽量前缀要规范，例如模板： [Product][Version]_[Feature]_[Title]，这样描述会很清晰，也方便查找 3. 缺陷的标题一定要描述在什么情况下发生了什么问...
1、 缺陷报告可以记录缺陷2、可以对缺陷进行跟踪管理3、可以对缺陷报告进行分类 总结 统计
1、缺陷编号（Defect ID)，提交BUG的顺序。2、缺陷标题（summary),简明扼要的说明一下这个BUG。3、缺陷的发现者（DetectedBy) ,一般是自己。4、发现缺陷的日期（Detected on date)，一般是当天。5、缺陷所属的模块（subject)， 在测试哪个模块的时候发现的BUG...
缺陷标题好的缺陷标题需要让相关人员一目了然，一般建议的格式是条件+失败。缺陷类型缺陷类型也是根据具体的项目而定的。但一般情况下分为功能、界面、建议。重现步骤重现步骤的编写规则可以参考测试用例中的操作步骤 ，一定要足够详细、说明清楚问题的操作顺...
工具：NoSQLUnitJsTestDriverQTRunnerVenusFluintBuster.JSSQLUnitECUTQTestlibUnitilsgreatestDbUnitAbbotGoogleTest框架：JUnitMoqJSCaptureMockCUnitPyUnitCppUTestCppUnitzCUTcipra
JunitTestNGGoogleTestpytestunittestJmockitJaCoCogcov、lcov、gcovrCoverage.pyEvoSuiteDiffblue Cover
React Hooks测试库( Testing Library)是一个简单而完整的React Hooks测试工具。 React Hooks测试库让用户可以为React钩子创建简单的测试工具，自定义钩子的输入和检索输出，以处理在功能组件体内运行的情况。 使用React Hooks，用户不必为了测试而去担...
1、单元测试注重代码逻辑，接口测试注重业务逻辑；2、单元测试的粒度最小，是测试最小独立的单元模块（不依赖其他模块）；接口测试不是，会覆盖很多；3、单元测试是白盒测试，接口测试是黑盒测试；4、单元测试关注的是代码的实现和逻辑，测试范围较小，保证实...
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 早安 的问题《找到一个bug，通过f12，怎么判断bug是前端还是后台的？》','http://www.shouhuola.com/q-514.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
如图是页面显示问题，如颜色、样式、排版，一般就是前端的问题，如果是数据问题，一般就是后台问题，如果用f12定位前端或后台问题，用f12可以查看页面请求数据和数据服务器返回的数据，如果请求是正确，服务器响应错误，就是后台问题，如果是请求问题，就是前台问题，如果响应正确，页面显示问题就是前段问题。
chrom浏览器为例
（1）打开开发者工具，在浏览器菜单栏选择工具-开发者工具，快捷键是F12
（2）打开之后切换到Network页签，操作就可以看到请求响应
（3）再选择响应的链接，切换到Preview页签，可以看到响应的结果数据；切换到Headers页签可以看到请求的地址，请求的方式，结果等信息
（4）Response结果中可以看到返回的数据字段、值
如图，此时页面出现报错
点击该条报错信息
可以根据响应的值判断一些bug所在
（1）响应中没有数据，则是后端数据没有返回，前端展示为空，则为后端问题。例如：列表中新增一个数据，没有显示，通过请求中可以看到数据total为0，则是后端数据没有返回。
（2）响应中有数据，但是前端显示错误了，可以根据字段值判断是否前端显示中取错了字段显示，可以判断是前端问题。例如：前端显示内容错误了，把登录用户名显示了登录帐号，则可以在响应中看数据是否返回正确，返回正确而显示错误，则有可能是前端绑定字段错误。
（3）响应中有数据，但是跟自己操作的结果不一致，可以根据数据库查询，如果数据库中也没有记录，可能是代码有问题，没有记录你的操作。例如：注册了一个帐号，但是登录时提示帐号或密码错误，这就可以在数据库表中查看是否有注册的数据。
定位后提交问题
前台的bug通常是功能、界面和兼容性等有关。后台的bug与性能和安全性有关。前台bug定位：按F12在console中查看报错信息，对于出错的js可以在Sources下查看对应报错的资源文件，写入禅道提交给开发即可
通过console.log 查看，在f12里面出现的就是前端的问题
比较前后约定接口地址、参数、返回字段页面渲染等,错误、缺失则是前端bug。 若上述正确,则大概率是后台bug。”
这种情况下，但凡出问题，一般都是后端开发的问题。因为前端只处理用户体验、排版、样式等。
现在前后端分离的技术越来越成熟，加上 App、小程序等多种类型的前端，前端不仅仅是样式了，界面上的数据显示和处理都会由前端人员去完成。而后端开发专注于接口，前后端之间通过接口（协议）传递数据。
那么如果你在测试的时候，发现界面上的数据错误。这时候你去找前端，前端就会告诉你是后端的问题（有时候 bug 都不会看 #手动捂脸(*/ω＼*)）；你去找后端吧，后端又告诉，这是前端的问题。于是你站在中间，一脸懵逼！
这时候就是抓包工具啦，通过抓包工具分析接口传递的数据，如果接口返回的数据是正确的（参考需求和接口文档），那么就可能是前端显示的问题了，这时候后端至少是无辜的。
相关问题推荐
虽然从事开发行业的女生越来越多，但女生的比例还是远比不上男生。软件测试的男女生比例则基本相当，软件测试要求细心、耐心，大部分女生也是比较适合学的。而且软件测试课程分为手工测试和自动化测试，手工测试分为功能测试、性能测试、接口测试。自动化测试...
需要。很多人当初抱着测试不需要懂代码，才选择了这个行业，这个就要看对自己的职业定位了，是止步于月薪过万就可以了，还是往20k、30k去突破，如果这样的话，是肯定要会接口、会自动化，就必然要涉及到代码。如果真的看不懂代码，实际的测试后期的工作会出现...
在我看来游戏开发挺难的，尤其像手游一类的还有网游，里面有很多的程序代码而且伤神又费力，不过也有女生在这方面做的很好的，如果你感兴趣，非常想学，可以试试
软件测试专业现在很火热，很缺少人才，25岁学软件测试能学会，就业薪资也高，工作也相对轻松
测试类型有：功能测试，性能测试，界面测试。功能测试在测试工作中占的比例最大，功能测试也叫黑盒测试。是把测试对象看作一个黑盒子。利用黑盒测试法进行动态测试时，需要测试软件产品的功能，不需测试软件产品的内部结构和处理过程。采用黑盒技术设计测试用...
这个其实和接口测试的场景密不可分的，比如说：外部接口测试： 必须先接口测试通过了，才能执行功能测试子系统或者各个模块之间的联调测试： 必须各子系统后台代码完成，并提供接口才可以完成测试，一般来说都要求各子系统功能测试通过后再进行...
这个是会因为公司的架构不同而不同的，并不是固定的，但是一般是会有专门的测试部门，或者叫质量保证部，也有可能是叫别的名字。
移动端测试，包括App兼容性测dao试，7*24小时稳定性测试，功耗性能测试，UI测试，交互测试等，课程主要学习的内容有：1、功能测试主要包括计算机基础、软件测试核心理论、Linux、数据库，学习目标是掌握软件测试核心理论，结合Linux、数据库等可实现移动端、w...
标题 1. 首先要做一个标题党（此标题党非彼标题党）。标题一定要清晰简洁易理解，不应该臃长 2. 尽量前缀要规范，例如模板： [Product][Version]_[Feature]_[Title]，这样描述会很清晰，也方便查找 3. 缺陷的标题一定要描述在什么情况下发生了什么问...
1、 缺陷报告可以记录缺陷2、可以对缺陷进行跟踪管理3、可以对缺陷报告进行分类 总结 统计
1、缺陷编号（Defect ID)，提交BUG的顺序。2、缺陷标题（summary),简明扼要的说明一下这个BUG。3、缺陷的发现者（DetectedBy) ,一般是自己。4、发现缺陷的日期（Detected on date)，一般是当天。5、缺陷所属的模块（subject)， 在测试哪个模块的时候发现的BUG...
缺陷标题好的缺陷标题需要让相关人员一目了然，一般建议的格式是条件+失败。缺陷类型缺陷类型也是根据具体的项目而定的。但一般情况下分为功能、界面、建议。重现步骤重现步骤的编写规则可以参考测试用例中的操作步骤 ，一定要足够详细、说明清楚问题的操作顺...
工具：NoSQLUnitJsTestDriverQTRunnerVenusFluintBuster.JSSQLUnitECUTQTestlibUnitilsgreatestDbUnitAbbotGoogleTest框架：JUnitMoqJSCaptureMockCUnitPyUnitCppUTestCppUnitzCUTcipra
JunitTestNGGoogleTestpytestunittestJmockitJaCoCogcov、lcov、gcovrCoverage.pyEvoSuiteDiffblue Cover
React Hooks测试库( Testing Library)是一个简单而完整的React Hooks测试工具。 React Hooks测试库让用户可以为React钩子创建简单的测试工具，自定义钩子的输入和检索输出，以处理在功能组件体内运行的情况。 使用React Hooks，用户不必为了测试而去担...
1、单元测试注重代码逻辑，接口测试注重业务逻辑；2、单元测试的粒度最小，是测试最小独立的单元模块（不依赖其他模块）；接口测试不是，会覆盖很多；3、单元测试是白盒测试，接口测试是黑盒测试；4、单元测试关注的是代码的实现和逻辑，测试范围较小，保证实...