> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 오류 처리 및 디버깅 경험 summary_javascript 기술

JavaScript 오류 처리 및 디버깅 경험 summary_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다: 2016-05-16 18:21:42
원래의
1232명이 탐색했습니다.

다음은 JS 오류 처리 및 디버깅 방법을 요약한 것입니다.
방법 1: 경고() 및 document.write() 메서드를 사용하여 변수 값을 모니터링합니다.
alert()는 사용자가 "확인" 버튼을 클릭할 때까지 변수 값을 표시하기 위해 대화 상자가 팝업되는 동안 코드 실행을 중지하고, document.write()는 이후에도 코드를 계속 실행합니다. 값을 출력하고 있습니다. JS 디버깅 시 특정 상황에 따라 이 방법을 선택할 수 있습니다.
예를 들어 다음 코드는 a 배열에서 1로 시작하는 데이터를 b 배열에 추가합니다.

코드를 복사합니다. 코드는 다음과 같습니다:




<제목>제목 없음 페이지







값을 많이 추가하는 경우에는 document.writer() 메서드를 사용하여 확인을 클릭하지 않아도 됩니다. 버튼을 반복해서 누르세요.

방법 2: onerror 이벤트를 사용하여 오류를 찾습니다.
페이지에서 예외가 발생하면 창 개체에서 오류 이벤트가 발생함을 개발자에게 알릴 수 있습니다. 특정 프로그램에서 오류가 발생하여 다음 예와 같이 개발자가 오류를 찾을 수 있도록 도와주세요.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">


제목 없는 페이지< /title> <br><script type=" text/javascript"> <br>window.onerror=function() <br>{ <br>alert("죄송합니다. 문제가 발생했습니다!"); } <br></script> <br> </head> <br><body onload="NonExist()" > <br></html> ><br> <br> <br><br> 코드가 </div>body<br>로 표시된 <p style="TEXT-INDENT: 21pt; TEXT-ALIGN: left" align="left">onload<span style="FONT-FAMILY: 宋体"> 이벤트를 실행할 때 존재하지 않는 함수 </span><span style="FONT-FAMILY: 宋体">NonExist()를 호출합니다. </span><span style="FONT-FAMILY: 宋体"> 아래와 같은 오류가 발생했습니다. </span><span style="FONT-SIZE: 9pt; FONT-FAMILY: 新宋体"></span> <span style="FONT-SIZE: 9pt; FONT-FAMILY: 新宋体"></span>동시에 브라우저 자체의 코드 디버깅 오류도 나타났습니다. </p> <img style="max-width:90%" alt="" src="http://files.jb51.net/upload/201008/20100810005859275.png" style="max-width:90%"> <br><span style="FONT-FAMILY: 宋体">브라우저 자체의 오류 메시지를 피하는 것은 매우 간단합니다. </span>onerror<img style="max-width:90%" alt="" src="http://files.jb51.net/upload/201008/20100810005859880.png" style="max-width:90%"> 이벤트를 처리하고 마지막으로 <p>ture<span style="FONT-FAMILY: 宋体">를 반환하면 됩니다. </span><span style="FONT-FAMILY: 宋体"></span><span style="FONT-FAMILY: 宋体"><br>코드 복사<div class="codetitle"> <span><a style="CURSOR: pointer" data="76968" class="copybut" id="copybut76968" onclick="doCopy('code76968')"> 코드는 다음과 같습니다.<u></u> </a><!DOCTYPE html PUBLIC "-// W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </span><html xmlns="http://www .w3.org/1999 /xhtml" > </div><head> <div class="codebody" id="code76968"><title>제목 없는 페이지
>





오류를 해결하지 마십시오. 도움이 필요합니다. 실제로 onerror는 오류의 성격을 판별하는 3개의 매개변수도 제공합니다. 코드:



코드 복사
코드는 다음과 같습니다.



제목 없는 페이지

< ;body onload= "존재하지 않음()" >





IE에서 실행 중일 때 메시지 표시:

Firefox
IE 브라우저에서 오류 이벤트가 발생하면 정상적인 코드가 계속 실행됩니다. 실행되면 모든 변수와 데이터가 저장되며 onerror 이벤트 핸들러를 통해 접근할 수 있습니다. Firefox에서는 정상적인 코드 실행이 종료되고 오류가 발생하기 전의 모든 변수와 데이터가 삭제됩니다.
방법 3: try….catch 문을 사용하여 오류를 찾습니다



코드 복사

제목 없는 페이지
🎜>




런타임 프롬프트:



Firefox
실행 시 팁:


try…..catch로 쉽게 수행할 수 있습니다. 질문이 잘못되었습니다. 하지만 불행하게도 이 명령문은 명령문 오류를 잘 처리하지 못합니다. 예:


코드 복사
코드는 다음과 같습니다.
제목 없는 페이지




try语句里面出现了括号不匹配的错误,而整个代码并没有运行catch中的模块,而是浏览器弹出了错误提示框,如下图:


 

方法4:使用Firefox错误控制台调试:

Firefox菜单栏中选择“工具”->“错误控制台”,便可以打开它,所有浏览中运行的错误,警告,消息都会传错误控制台,如下:

 

 

Firefox提示的错误信息要比IE全面而且准确的多。

方法5:使用Firefox插件FireBug

FirebugFirefox下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScriptCSSHTMLAjax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。具体如何安装使用FireBug可参考这篇文章:http://apps.hi.baidu.com/share/detail/15314208

方法6:使用Miscrosoft Script Debugger调试:

IE菜单栏中打开“工具”->Internet选项“,选择”高级“,将”禁用脚本调试“复选框的勾去掉。

 

 

 

 

具体如何使用就不介绍了。

方法7:使用IE下的JS调试工具companion.js

一款像firefox中的firedebug工具类似的一个工具包,它的特点就是可以有好的提示错误,并且可以在IE浏览器下方出现控制台输出.方便及时调试。

具体可参考这篇文章:http://hi.baidu.com/argv/blog/item/f4efe67ac370f7e12f73b3ad.html

다른 JS 디버깅 도구도 있으므로 하나씩 소개하지는 않겠습니다. 또한 더 나은 JS 오류 처리 방법이나 을 소개할 수도 있습니다. JS 디버깅 도구.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿