Javascript 디버깅 도구 Firebug 자세한 설명 6_javascript 기술

지금 4개의 출력을 그룹 출력으로 테스트해 보겠습니다. 코드를 다음과 같이 수정합니다.

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

console.group('그룹화 시작:');
console.debug('console.debug입니다!')
console.info('이것은 console.info !');
console.warn('console.warn입니다!')
console.error('console.error입니다!');

결과를 보려면 페이지를 새로 고치세요(그림 11-5). console.group에서 그룹 제목 "Start grouping:"을 추가할 수도 있습니다. 필요한 경우 중첩을 통해 그룹 내에서 그룹화할 수도 있습니다.

그림 11-5
가끔 객체의 모든 속성이나 특정 HTML 요소 아래의 모든 노드를 나열하기 위해 for 루프를 작성해야 하는 경우가 있습니다. 이 for 루프를 다시 작성하려면 console.dir(object) 또는 console.dirxml(element)만 사용하면 됩니다.
테스트할 테스트 페이지에 코드 추가:

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

console.dir(document.getElementById('div1'));
console.dirxml(document.getElementById('div1'))

그림 11을 참조하세요. 결과는 도 6 및 도 11과 같다 -7.

그림 11-6

그림 11-7
코드가 얼마나 빨리 실행되는지 알고 싶으십니까? 매우 간단합니다. console.time과 console.timeEnd를 사용하세요.
테스트 함수의 코드를 수정하고 루프를 1000번 실행하는 데 걸리는 시간을 테스트합니다.

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

function test(){
console.time('test')
for(var i=0;i<1000;i ){
document.getElementById(' div2').innerHTML=i;
//console.log('현재 매개변수는: %d',i)
}
console.timeEnd('test ');
}


刷新页面，单击“方块二”，看看结果（图11-8）。在这里要注意的是console.time和console.timeEnd里的参数要一致才会有正确的输出，而该参数就是信息的标题。

图11-8
是否想知道某个函数是从哪里调用的？console..trace可帮助我们进行追踪。在test函数的结尾加入：
console.trace();
刷新页面，单击“方块二”，看看结果（图11-9）。结果显示是在坐标（97，187）的鼠标单击事件执行了test函数，而调用的脚本是在simple.html文件里的第1行。因为是在HTML里面的事件调用了test函数，所以显示的行号是第1行。如果是脚本，则会显示调用脚本的行号，通过单击可以直接去到调用行。

图11-9
如果想在脚本某个位置设置断点，可以在脚本中输入“debugger”作为一行。当脚本执行到这一行时会停止执行等待用户操作，这时候可以通过切换到“Script”标签对脚本进行调试。
Firebug还有其它的一些调试函数，这里就不一一做介绍，有兴趣可以自己测试。表4是所有函数的列表：

函数	说明
console.log(object[, object, ...])	向控制台输出一个信息。可以输入多个参数，输出将已空格分隔各参数输出。 第一参数可以包含格式化文本，例如： console.log(‘这里有%d个%s',count,apple); 字符串格式： %s ：字符串。 %d, %i：数字。 %f： 浮点数。 %o -超链接对象。
console.debug(object[, object, ...])	向控制台输出一个信息，信息包含一个超链接链接到输出位置。
console.info(object[, object, ...])	向控制台输出一个带信息图标和背景颜色的信息，信息包含一个超链接链接到输出位置。
console.warn(object[, object, ...])	向控制台输出一个带警告图标和背景颜色的信息，信息包含一个超链接链接到输出位置。
console.error(object[, object, ...])	向控制台输出一个带错误图标和背景颜色的信息，信息包含一个超链接链接到输出位置。
console.assert(expression[, object, ...])	测试一个表示是否为true，如果为false，提交一个例外信息到控制台。
console.dir(object)	列出对象的所有属性。
console.dirxml(node)	列出HTML或XML Element的XML源树。
console.trace()	输出堆栈的调用入口。
console.group(object[, object, ...])	将信息分组再输出到控制台。通过console.groupEnd()结束分组。
console.groupEnd()	结束分组输出。
console.time(name)	创建一个名称为name的计时器，计算代码的执行时间，调用console.timeEnd(name)停止计时器并输出执行时间。
console.timeEnd(name)	停止名称为name的计时器并输出执行时间。
console.profile([title])	开始对脚本进行性能测试，title为测试标题。
console.profileEnd()	结束性能测试。
console.count([title])	计算代码的执行次数。titile作为输出标题。
表4

12. IE에서 Firebug 사용하기
Firebug는 Firefox의 확장이지만 IE에서 페이지를 디버깅하는 데 익숙하다면 어떻게 해야 할까요? Friebug에 디버깅 정보를 쓰기 위해 페이지 스크립트에 console.log()를 추가하면 IE에서 반드시 오류 메시지가 표시됩니다. 어떻게 해야 합니까? 걱정하지 마십시오. Frirebug는 Firebug 콘솔을 시뮬레이션하기 위해 페이지에 삽입할 수 있는 Frirbug Lite 스크립트를 제공합니다.
다음 주소에서 Firebug Lite를 다운로드할 수 있습니다:
http://www.getfirebug.com/releases/firebuglite1.0-b1.zip
그런 다음 페이지에 추가하세요:

IE에서 Friebug 콘솔을 에뮬레이트하고 싶지 않다면 하지 마세요. want console.log() 스크립트에 오류 메시지가 나타나면 페이지에 다음 명령문을 추가하세요.

Firebug Lite를 설치하지 않고 스크립트 오류만 방지하려는 경우 스크립트에 다음 명령문을 추가할 수 있습니다.
if (!window.console || !console.firebug)
{
var names = [ "log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
"group", "groupEnd", "time", "timeEnd" , "count", "trace", "profile", "profileEnd"]
window.console = {}
(var; i = 0; i < names.length; i)
window.console[names[i]] = function() {}
}
firebug.js를 테스트 페이지에 추가한 후 엽니다. IE를 클릭하고 페이지를 로드합니다. 페이지가 로드된 후 F12 키를 눌러 콘솔을 열 수 있습니다. 페이지를 새로 고칠 때마다 콘솔을 열려면 F12 키를 눌러야 하는 것이 귀찮지 않나요? 그렇게 하고 싶지 않다면 html 태그에 "debug='true'"를 추가하면 됩니다. 예:
Friebug Lite이지만 기능이 그렇게 강력하지는 않습니다.