1. fiddler怎么定位前端bug还是后端bug
1.发现bug之后,重现bug的时候使用fiddler抓包去分析
2.如果前端提交的数据在fiddler中显示有误,那么就是前端的bug
3.如果在前端提交的数据在fiddler中显示无误,那么就是后台的bug
4.除了fiddler等抓包工具外,还可以通过后台的日志去判断
2. 前端框架如何实现定位
前端bug主要分为3个类别:HTML,CSS,Javascript三类问题
给个最大的区别方式方法:
出现样式的问题基本都是CSS的bug
出现文本的问题基本都是html的bug
出现交互类的问题基本都是Javascript的bug
区分前后台交互:查看网络请求
TMS对应的VM模板,出现的一些截断控制,转换功能都属于前端的问题
标签闭合—表象,页面中出现大范围的混乱,就是少了标签的情况,导致标签未闭合
标签浮出—例如鼠标移动到文本位置,浮出全名的这种浮出形式都属于标签浮出的问题
标签在不同的浏览器的一种解析方式的不同导致的前端bug例如如下结构
页面定点的问题:最明显的前端功能,在于点击某个链接将页面位置定位到对应的位置
页面的跳转,也属于html的问题,大家在出现点击未跳转或者跳转方式不正确的问题,直接可以定位到跳转属性的问题,找到对应的跳转对应的块提供给开发人员即可
兼容型bug
脚本兼容型问题:在出现对应交互的问题就基本可以定位到脚本兼容型bug,例如DIV的显示和层结构。实际可以参考聚划算的几个商品鼠标移动到小图的时候,对应大图展示的功能。
页面样式兼容型问题:直接表象在样式上,都是基于框架的页面展示错误,很容易定位
业务性bug
内容型bug
有产生交互类的问题,大多数都可以定位到是属于javascript产生的问题,该部分大多不会报错
有错误提示类的。页面左下方有出现javascript的错误提示;有弹出错误信息提示的bug;浏览器返回的一些错误弹出框都属于javascript的bug
现在以淘宝的前端人员工作为例进行相关bug定位的剖析
判断前后台问题的区分方法:
FF, 打开错误控制台
a) Html中如果有链接,有相应的情况下,基本可以定位到是属于前端的问题
b) 如果为空,或者有出现error错误信息,我们就可以定位到属于后台开发的问题
一、HTML
最常见的HTML的问题—就是标签的问题了,最常见的排查和解决办法就是查看页面源代码,然后通过检查标签的工具,现在暂时提供idea.exe进行检查,有其他更好的工具再进行推荐。
常见问题类别:
该部分可以看做为一个大的框即是标签<a> 内嵌标题的标签<p>,里面再有这些个内容<ing>,那么在不同的浏览器中,可能ie和FF的解析会产生不同,假设IE解析 为<a><p><ing></ing></a></p>的一种形式,但在FF 下可能解析为
<a><ing></ing></a>
<p></p>
的两行的形式从而导致前端在复古鞋/板鞋这块ing里面的格式产生混乱
结构可看为:
a) 我们可以通过右键,查看元素的工具进行定位到毛点所定位到的位置,如果出现问题这种问题很直观,并且能通过这种方法直接定位到问题
二、CSS,产生样式问题。例如:排版,布局,颜色,背景等
css的bug主要分为:兼容型bug 、业务性bug 和 内容型bug
a) 表现:仅在少数几个浏览器上出现
b) 原因:浏览器的解析不一致
c) 解决:根据实际情况进行前端代码的通用性
d) 类别:
a) 表现:在所有浏览器下都有该问题
b) 原因:对业务不熟悉
c) 解决:根据需求进行修改达到业务要求
该类型的定位,主要在和实现的要求不一致,最直接表现在页面的友好型,用户的可用性的bug,可以定位为该类型
a) 表现: 前端自测正确,但在填入内容后,出现的错误,内容消失等
b) 原因: 扩展性未考虑周全
c) 解决: 进行overflow test
输入内容的长度限制等功能可定位为内容型bug
三、Javascript
最直接的判断方法,刷新页面,出现滞后显示的一些模块基本都为脚本的输出块。该部分的一些问题可以参照兼容型bug中类别的脚本兼容型bug。
3. 怎么判断是前端bug还是后端bug
在提bug时,只有明确定位是前端bug还是后端bug,才能正确指派给对应的开发同学,如果经常分不清楚,一直需要开发同学重新指派,不仅浪费了时间,还会被开发同学吐槽,今天就带大家解锁一些区分前后端bug的技能,分分钟get~
1、出现样式的问题基本都是CSS的bug
2、出现文本的问题基本都是html的bug
3、出现交互类的问题基本都是JS的bug
1、未发送请求,就属于前端bug
2、接口请求url错误,传参错误,就属于前端bug
3、接口返回数据错误,就属于后端bug
1、例如页面加载慢或提交表单慢,一直pending,抓包查看请求耗时,如果耗时长,那就属于后端bug
1、越权。可以分为水平越权和垂直越权,以下两个例子都属于后端Bug。
水平越权的例子:在业务系统中,本来用户A只能对自己的个人信息进行增删改查,但是通过抓包,修改用户id(一般用户id都是递增的),可以获取到其他人的个人信息,或者账号A将自己的个人信息页面通过浏览器发送给用户B,用户B登录系统后可以看到用户A的信息,这就是水平越权了
垂直越权的例子:在业务系统中,本来用户A对某条记录只有查看的权限,但是通过抓包,可以对记录进行修改,这就是垂直越权了
1、例如对于字段有效性的校验等,前后端均需要校验,因此属于前后端共同的bug
以上内容仅供参考,请大家提出优化意见或建议~
4. web前端当绝对定位在相对定位里面时,绝对定位可以
1.定位的专业解释
(1)语法
position:static|absolute|fixed|relative
(2)说明
从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(absolute),固定(fixed),相对定位(relative)。在这个教程里,我不逐一讲,只讲最常用也是最实用的两个定位方法:绝对定位(absolute)、相对定位(relative)。
绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据body对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持)。
相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
2.定位的形象解释
我先来架设一个虚拟的场景:有一个矩形的房间,里面还有一个水桶装了些水,水里还浸泡着一个西瓜,这个房间半空中还有不少的钩子用于挂东西用。现在我把网页元素与上面物件对应上,那么房间就是一个网页,水桶是网页中的一个板块,桶中的水就是文本流,西瓜就是将要被定位的对象。
(1)贡献的绝对定位(absolute)
对照前面解释,如果西瓜被赋予绝对定位,那么就等于把西瓜从水中捞起来挂在半空中的钩子上,水桶中西瓜原来占用的空间水会自动填补它(绝对定位对象会让出自己原先占用位置,所以说它是贡献的)。此时如果之前没有对水桶进行定位设定,那么被拿起的西瓜位置不会再受水桶位置影响,水桶怎么移动,西瓜还是挂在原来位置,至于西瓜要怎放,则以房间左上角(body左上角)为准,用left,right,top,bottom值来定位。
但是如果水桶也给出了定位设置(通常是相对定位,下面有讲到这一实用技巧),此时西瓜的摆放就没有那么自由了,尽管此时西瓜被拿起来了不会影响水桶中的水(文本流),但它还是要听桶的话,桶会告诉西瓜“你可以活动,但应该在我的范围内走动,比方说我要你在我左上方1米处,你就要跟死这一点,我走你也要跟着走”,如果桶中有很多个西瓜,可以全部拿出来吊到半空中,它们将被安排在不同高度的空间(层),所以在房顶垂直往下看,有可能看到不同西瓜层叠在一起的情况(这个所谓的高度在网页中是不存在的,就像FLASH动画中的不同层上安排了元素,但它们在看时不会有深度感觉)。可见绝对定位的对象参考目标是它的父级,专业称之为包含块。
(2)自私的相对定位(relative)
相对定位一个最大特点是:自己通过定位跑开了还占用着原来的位置,不会让给他周围的诸如文本流之类的对象。相对定位也比较独立,做什么事它自己说了算,要定位的时候,它是以自己本身所在位置偏移的(相对对象本身偏移)。再拿前边作比如来解,那么此时西瓜似乎是有魔法的,如果西瓜通过相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象:水中有一个地方水凹下去了,周围的水不能填补它,西瓜看起来在旁边,如果搅动一下桶中的水,那个凹的位置会发现改变(文本流对相对定位对象还存在影响),但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响,因为对象并没有真正脱离文本流,就像有两个人在同一层楼水平移动的过程中会有碰头的机会。
(3)总结两种定位的特征
绝对定位就像是把不同对象安排到了一栋高楼的不同楼层(一般指不是第一层,我们这里理解为文本流就放在首层),它们互不影响,但是它们怎么移动与你楼的地基和面积(父级)有关。相对定位指对象还是在首层楼与文本流一起存放,它们之间肯定存在影响。
(4)对特殊情况的补充
在用相对定位和绝对定位的时候,有一种情况是它们的定位值用到了负值则对象可沿相反方向移动,刚才说到的把对象安排在一栋楼的不同层,如果某个对象一开始就是背靠着最外边墙的,此时再用一个负值定位它,它就会神奇般地跑出墙外去了,当然现实中可没有这种惊险而又神奇的事发生
5. 测试:进入某个页面显示内容错误,如何定位是前端还是后端问题
朋友您好,进入某个页面显示内容错误,定位是前端问题还是后端问题,其实很简答。将后端的日志等级调低,当页面显示内容错误的时候,可以看一下后端日志有没有报错;其次,如果你是研发人员的话,可以debug或者将页面请求的响应值都打印出来。还有一种方法,就是在页面端,使用一些工具,如打开开发者工具,点击网络,可以看一下请求后台的返回值是否是预期的,如果是预期的值,页面展示不对,那就是前端展示出现了问题,如果是后端响应的值都不对,那可以从后端排查问题。
6. 我是web前端程序员,经常遇到火狐下的定位问题,特别是在table表格的时候,具体情况如图。
您好!感谢您对火狐产品的支持!如果您的电脑上面有多款浏览器,当您打开火狐浏览器,界面上就会有个提示,是否设置为默认浏览器,点击“是”就可以了。火狐浏览器使用的是Gecko内核,是一款开源、安全的浏览器,拥有非常强大的扩展功能,可以根据自己的需求定制浏览体验。您可以在火狐社区了解更多内容。希望我的回答对您有所帮助和得到您的采纳。
7. 前端定位的几种方式
前端技术的发展是互联网自身发展变化的一个缩影。
前端技术指通过浏览器到用户端计算机的统称,存贮于服务器端的统称为后端技术。
前端开发主要职能就是把网站的界面更好地呈现给用户。
以前会Photoshop和Dreamweaver就可以制作网页,随着网站开发难度加大、开发方式多样,网页制作更接近传统的网站后台开发,网页制作更多被称为Web前端开发。前端技术包括4个部分:前端美工、浏览器兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等。
在Web1.0时代,由于网速和终端能力的限制,大部分网站只能呈现简单的图文信息,并不能满足用户在界面上的需求,对界面技术的要求也不高。随着硬件的完善、高性能浏览器的出现和宽带的普及,技术可以在用户体验方面实现更多种可能,前端技术领域迸发出旺盛的生命力。
2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。
8. 浅谈前端开发的水到底有多深
再次说说目前前端的工作状态吧。其实我觉得现在的全端慢慢地已经成为了b/s以及c/s中的b还有c,兼顾了两样工作。
1,以前对于前端的定位可能只是“页面仔”,把设计师的设计变成一个实际的网页。不过现在可不是这么简单了,同样是一张设计图,需要在许多千奇百怪的浏览器上面进行兼容,调试。而且因为现在网页的交互已经变得越来越复杂,单纯的网页已经不能够满足于用户。而更加像是一个富客户端。
2,而且随着HTML5跨平台应用的兴起,前端的定位又进一步发展了。因为可以要求前端编写移动端web app应用甚至是跨平台应用。这个时候,前端要学习的东西就更多了。
3,可能这些只是一个表面上看到的东西。因为前端工程师如果定位不好,在一个团队中很容易成为一个中间人。为什么这么说呢,因为团队中会使用一种后端语言,常见的有python,php,ruby现在还有node.js(对不起,我知道node.js不是一种语言,不过你懂就行了),如果你不会这种后端语言,你会变得好像一个局外人,甚至在团队中显得像个外包。因此前端又需要在应用层面上会这些后端的语言,比如说要爬爬数据,你总不能在浏览器上就完成吧?所以前端的范围就更广了。
好吧,从几个方面说了前端为什么那么苦逼。其实前端是一个很好的练武场,你一定会在前端职位上成为一个多面手,学习到最多的东西,因为你跨维度是最大的,你懂设计,懂交互,懂后端语言,懂前端语言,会沟通,会兼容,你都做到了,你已经是个牛人了!欢迎加入前端。
9. 前端定位组件获取用户定位失败,想问问是什么问题
应该不是这个加载的问题,在我把协议改成http的时候,总是能够获取到定位。但是改成https就不行了。。。官网demo也不能改成https调试,所以我估计是https的原因。。。我刚刚试了一下,不加载apis那个,现在显示
.maps.LatLng is not a constructor
10. web前端工程师怎么给自己定位
前端对于网站来说,通常是指网站的前台部分,包括网站的表现层和结构层。前台的应用和网页直接展示给客户,用户体验的重要性决定了后台只是为前台服务的。因此,前端开发的重要性不言而喻。现在的微信、淘宝、网站、手机网站都是通过前端开发来做的。目前并没有学校开设HTML5课程,但是培训机构的出现,对于准备进入H5行业的学员来说是无比的好消息。H5EDU的HTML5课程融合了HTML5开发基础课程、CSS3基础课程和移动前端交互JavaScript+JQuery+Ajex等课程,从入门到精通,让开发者全面学习HTML5,快速掌握HTML5开发技能。现在主流的开发中包括页面模板制作、页面布局、 页面特效、页面美化、 网页游戏、微网站制作、常见的APP等,都基于前端开发技术完成。