㈠ 求助小白自学前端，但是不知道怎么找BUG

那方面的bug 呢，页面还是逻辑代码
页面bug 可以在浏览器 delete 按键一个元素一个元素的删除排查，刷新就都恢复了
逻辑代码这个不好说，需要经验和时间

㈡ 测试：进入某个页面显示内容错误，如何定位是前端还是后端问题

朋友您好，进入某个页面显示内容错误，定位是前端问题还是后端问题，其实很简答。将后端的日志等级调低，当页面显示内容错误的时候，可以看一下后端日志有没有报错；其次，如果你是研发人员的话，可以debug或者将页面请求的响应值都打印出来。还有一种方法，就是在页面端，使用一些工具，如打开开发者工具，点击网络，可以看一下请求后台的返回值是否是预期的，如果是预期的值，页面展示不对，那就是前端展示出现了问题，如果是后端响应的值都不对，那可以从后端排查问题。

㈢ 浏览器显示网页走丢了怎么办

您好，先确认已正确连接网络且网速没问题，用【360安全卫士】里的【人工服务】--输入“输入“上网异常”查找方案，选用“网页打不开”、“二级页面打不开”、“网页加载慢”等对应方案--点击【查找方案】--再点“修复”即可；同时摁下“win键+R”组合键，输入cmd/kipconfig/flushdns确定，清除刷新DNS缓存；或打开【360安全卫士】点右下角的【更多】--在电脑安全里找到【360主页修复】点击即可。如果还未解决，按照以下顺序继续排查：

1：重新设置本机DNS服务器地址：在网上邻居上右击，选择“属性”，本地连接右击，选择“属性”，找到“internet协议（tcp/ip）”，双击进去，选择“自动获取IP地址”“自动获得DNS服务器地址”，然后“确定”即可。有时候本机的网卡驱动没有装好，不能很好的获取Ip地址、DNS服务器地址，可以使用驱动人生6进行驱动更新或重装。

2：IE浏览器设置问题或IE组件被破坏：可尝试用“IE伴侣”修复，也可以用360急救箱修复。

3：电脑感染病毒导致网页打不开：这也是常见的网页打不开的原因，可以使用杀毒软件全盘杀毒，杀毒完成之后再修复系统（可以使用360急救箱或者系统盘）即可。

4：如果以上都认真排查了还未解决：开机按F8键，到出现【高级启动选项】界面再松手，在【高级启动选项】里用上下键选择【最后一次正确配置】，敲回车即可。如果这个浏览器不太稳定经常出问题，建议删除并更换一种浏览器，推荐下载使用最新的“360安全浏览器7.3”或”8.1版”试试。满意望采纳!

㈣ 自己写的网站，在本地测试时前端页面显示好好的，可是上传到阿里云服务器的时候，出现了页面排版错乱问题

既然是自己写的
就从自己习惯着手
看环境 看路径 看模板 看调用文件

㈤ 如何分析定位一个问题是前端还是后端引起的

1.首先，记录问题本身错误信息，确认和后台通讯接口
2.通过抓包工具（比如fiddler）复现当前存在问题进行抓包
3.结合接口相关文档说明，对抓包数据进行解析
4.验证解析结果，分析如果请求无误，响应返回结果有误，且结果和问题报错信息一致则为后台问题；若请求无误，响应结果也正确，则为前端问题，如果想系统的学习测试相关的技术，可以了解一下黑马程序员的软件测试课程，里面讲的非常详细。

㈥ 前端开发bug如何快速

1，根据报错信息定位：
(1) Uncaught TypeError: Cannot read property 'attr' of undefined;
此类型为变量或者对象属性未定义类型。
(2) Uncaught TypeError: a.map is not a function；
a.map不是函数，说明a不是数组，只有数组才有map方法。

(3) Uncaught SyntaxError: Invalid or unexpected token；
这种一般是js的代码格式错误。

2, 排除法
页面中一共有abcd五个方法，注释掉d后代码正常说明d有问题。
3，剥离法
同样一个方法，在A页面没问题，在B页面有问题，这时候，新建一个剥离这个组件，然后运行，如果没有异常，就算不是这个组件或者方法的问题，然后逐渐在新页面中加入可能影响B页面的条件。

㈦ 网站被挂马，源码里没有但是访问查看源码却有，该如何排查呢

看看你网站结构，如果采用前后端分离，还得看看后端代码有没有给你附加，光在前端看不一定有用，看看js，，特别是有加密的地方，还是直接找漏洞最主要，看看日志，做好安全，就不会再有了，还没处理好可以找额代处理

㈧ Web前端工程师如何处理Web前端的异常_

今天小编要跟大家分享的文章是关于Web前端工程师如何处理前端的异常。前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。下面我们就来看一看前端工程师该如何处理前端异常。一、为什么要处理异常异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。


1.增强用户体验；
2.远程定位问题；
3.未雨绸缪，及早发现问题；
4.无法复线问题，尤其是移动端，机型，系统都是问题；
5.完善的前端方案，前端监控系统；


对于JS而言，我们面对的仅仅只是异常，异常的出现不会直接导致JS引擎崩溃，最多只会使当前执行的任务终止。二、需要处理哪些异常？对于前端来说，我们可做的异常捕获还真不少。总结一下，大概如下：


·___S语法错误、代码异常


·___JAX请求异常


·___蔡试醇釉匾斐


·___romise异常


·___frame异常


·___缬_cripterror


·___览：涂ǘ


下面我会针对每种具体情况来说明如何处理这些异常。三、Try-Catch的误区try-catch只能捕获到同步的运行时错误，对语法和异步错误却无能为力，捕获不到。
1.同步运行时错误：


try{
letname='jartto'
console.log(nam);
}catch(e){
console.log('捕获到异常：',e);
}


输出：


捕获到异常：ReferenceError:namisnotdefined
at:3:15


2.不能捕获到语法错误，我们修改一下代码，删掉一个单引号：


try{
letname='jartto;
console.log(nam);
}catch(e){

console.log('捕获到异常：',e);
}


输出：


UncaughtSyntaxError:Invalidorunexpectedtoken


不过语法错误在我们开发阶段就可以看到，应该不会顺利上到线上环境。


3.异步错误


try{
setTimeout(()=>{
undefined.map(v=>v);
},1000)
}catch(e){
console.log('捕获到异常：',e);
}


我们看看日志：


UncaughtTypeError:Cannotreadproperty'map'of
undefined
atsetTimeout(:3:11)


并没有捕获到异常，这是需要我们特别注意的地方。四、window.onerror不是万能的当JS运行时错误发生时，window会触发一个ErrorEvent接口的error事件，并执行window.onerror()。/**
*@param{String}message错误信息
*@param{String}source出错文件
*@param{Number}lineno行号
*@param{Number}colno列号
*@param{Object}errorError对象（对象）
*/

window.onerror=function(message,source,lineno,colno,error){
console.log('捕获到异常：',{message,source,lineno,colno,error});
}

1.首先试试同步运行时错误


window.onerror=function(message,source,lineno,colno,
error){
//message：错误信息（字符串）。
//source：发生错误的脚本URL（字符串）
//lineno：发生错误的行号（数字）
//colno：发生错误的列号（数字）
//error：Error对象（对象）
console.log('捕获到异常：',{message,source,lineno,colno,
error});
}
Jartto;


可以看到，我们捕获到了异常：

2.再试试语法错误呢？


window.onerror=function(message,source,lineno,colno,
error){
console.log('捕获到异常：',{message,source,lineno,colno,error});
}
letname='Jartto


控制台打印出了这样的异常：


UncaughtSyntaxError:Invalidorunexpectedtoken


什么，竟然没有捕获到语法错误？


3.怀着忐忑的心，我们最后来试试异步运行时错误：


window.onerror=function(message,source,lineno,colno,
error){
console.log('捕获到异常：',{message,source,lineno,colno,error});
}
setTimeout(()=>{
Jartto;
});


控制台输出了：


捕获到异常：{message:"Uncaught
ReferenceError:Jarttoisnotdefined",source:
"http://127.0.0.1:8001/",lineno:36,colno:5,error:
ReferenceError:Jarttoisnotdefined
atsetTimeout(http://127.0.0.1:8001/:36:5)}


4.接着，我们试试网络请求异常的情况：






我们发现，不论是静态资源异常，或者接口异常，错误都无法捕获到。


补充一点：window.onerror函数只有在返回true的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示UncaughtError:xxxxx


window.onerror=function(message,source,lineno,colno,
error){
console.log('捕获到异常：',{message,source,lineno,colno,error});
returntrue;
}
setTimeout(()=>{
Jartto;
});


控制台就不会再有这样的错误了：


UncaughtReferenceError:Jarttoisnotdefined
atsetTimeout((index):36)


需要注意：onerror最好写在所有JS脚本的前面，否则有可能捕获不到错误；onerror无法捕获语法错误；


到这里基本就清晰了：在实际的使用过程中，onerror主要是来捕获预料之外的错误，而try-catch则是用来在可预见情况下监控特定的错误，两者结合使用更加高效。


问题又来了，捕获不到静态资源加载异常怎么办？五、window.addEventListener当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数。这些error事件不会向上冒泡到window，不过（至少在Firefox中）能被单一的window.addEventListener捕获。



window.addEventListener('error',(error)=>{
console.log('捕获到异常：',error);
},true)




控制台输出：


SHAPE*MERGEFORMAT


由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行，但是这种方式虽然可以捕捉到网络请求的异常，但是无法判断HTTP的状态是404还是其他比如500等等，所以还需要配合服务端日志才进行排查分析才可以。


需要注意：


·___煌榔飨路祷氐_rror对象可能不同，需要注意兼容处理。


·___枰⒁獗苊_ddEventListener重复监听。六、PromiseCatch在promise中使用catch可以非常方便的捕获到异步error，这个很简单。


没有写catch的Promise中抛出的错误无法被onerror或try-catch捕获到，所以我们务必要在Promise中不要忘记写catch处理抛出的异常。


解决方案：为了防止有漏掉的Promise异常，建议在全局增加一个对unhandledrejection的监听，用来全局监听UncaughtPromiseError。使用方式：


window.addEventListener("unhandledrejection",
function(e){
console.log(e);
});


我们继续来尝试一下：


window.addEventListener("unhandledrejection",
function(e){
e.preventDefault()
console.log('捕获到异常：',e);
returntrue;
});
Promise.reject('promiseerror');


可以看到如下输出：

那如果对Promise不进行catch呢？


window.addEventListener("unhandledrejection",
function(e){
e.preventDefault()
console.log('捕获到异常：',e);
returntrue;
});
ewPromise((resolve,reject)=>{
reject('jartto:promiseerror');
});


嗯，事实证明，也是会被正常捕获到的。


所以，正如我们上面所说，为了防止有漏掉的Promise异常，建议在全局增加一个对unhandledrejection的监听，用来全局监听UncaughtPromiseError。


补充一点：如果去掉控制台的异常显示，需要加上：


event.preventDefault();七、VUEerrorHandlerVue.config.errorHandler=(err,vm,info)=>{
console.error('通过vue
errorHandler捕获的错误');
console.error(err);
console.error(vm);
console.error(info);
}八、React异常捕获React16提供了一个内置函数componentDidCatch，使用它可以非常简单的获取到react下的错误信息


componentDidCatch(error,info){
console.log(error,info);
}


除此之外，我们可以了解一下：errorboundaryUI的某部分引起的JS错误不应该破坏整个程序，为了帮React的使用者解决这个问题，React16介绍了一种关于错误边界（errorboundary)的新观念。


需要注意的是：errorboundaries并不会捕捉下面这些错误。


1.事件处理器2.异步代码3.服务端的渲染代码4.在errorboundaries区域内的错误


我们来举一个小例子，在下面这个componentDIdCatch(error,info)里的类会变成一个errorboundary：


.Component{
constructor(props){
super(props);
this.state={hasError:false};
}
componentDidCatch(error,info){
//DisplayfallbackUI
this.setState({hasError:true});
//
logErrorToMyService(error,info);
}
render(){
if(this.state.hasError){
//
return

Somethingwentwrong.

;
}
returnthis.props.children;
}
}


然后我们像使用普通组件那样使用它：







componentDidCatch()方法像JS的catch{}模块一样工作，但是对于组件，只有class类型的组件(classcomponent)可以成为一个errorboundaries。


实际上，大多数情况下我们可以在整个程序中定义一个errorboundary组件，之后就可以一直使用它了！九、iframe异常对于iframe的异常捕获，我们还得借力window.onerror：


window.onerror=function(message,source,lineno,colno,
error){
console.log('捕获到异常：',{message,source,lineno,colno,error});
}


一个简单的例子可能如下：


frameborder="0">
十、Scripterror一般情况，如果出现Scripterror这样的错误，基本上可以确定是出现了跨域问题。这时候，是不会有其他太多辅助信息的，但是解决思路无非如下：


跨源资源共享机制(CORS)：我们为script标签添加crossOrigin属性。


crossorigin>


或者动态去添加js脚本：


constscript=document.createElement('script');
script.crossOrigin='anonymous'
script.src=url;
document.body.appendChild(script);


特别注意，服务器端需要设置：Access-Control-Allow-Origin


此外，我们也可以试试这个-解决ScriptError的另类思路：


constoriginAddEventListener=EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener=function(type,listener,options){
constwrappedListener=function(...args){
try{
returnlistener.apply(this,args);
}
catch(err){
throwerr;
}
}
returnoriginAddEventListener.call(this,type,wrappedListener,options);
}


简单解释一下：


·___男戳_ventTarget的addEventListener方法；


·___源氲_istener进行包装，返回包装过的listener，对其执行进行try-catch；


·___榔鞑换岫_ry-catch起来的异常进行跨域拦截，所以catch到的时候，是有堆栈信息的；


·___匦_hrow出来异常的时候，执行的是同域代码，所以window.onerror捕获的时候不会丢失堆栈信息；


利用包装addEventListener，我们还可以达到“扩展堆栈”的效果：


(()=>{
constoriginAddEventListener=EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener=function(type,listener,options){
+//捕获添加事件时的堆栈
+constaddStack=newError(`Event(${type})`).stack;
constwrappedListener=function(...args){
try{
returnlistener.apply(this,args);
}
catch(err){
+//异常发生时，扩展堆栈
+err.stack+=' '+addStack;
throwerr;
}
}
returnoriginAddEventListener.call(this,type,wrappedListener,options);
}
})();十一、崩溃和卡顿卡顿也就是网页暂时响应比较慢，JS可能无法及时执行。但崩溃就不一样了，网页都崩溃了，JS都不运行了，还有什么办法可以监控网页的崩溃，并将网页崩溃上报呢？


崩溃和卡顿也是不可忽视的，也许会导致你的用户流失。


1.利用window对象的load和beforeunload事件实现了网页崩溃的监控。不错的文章，推荐阅读：Logging
InformationonBrowserCrashes。window.addEventListener('load',function(){
sessionSt