閲覧しているWebサイトに使用されているJavaScriptのパフォーマンスもConsoleから調べることができる。ConsoleパネルとScriptパネルを有効にし、ConsoleパネルからProfileボタンをクリックしてWebサイト上で操作をおこない、終了後再度Profileボタンをクリックすると各ファンクションの実行速度やコール回数が一覧表示される。

Profileを使用することでどの処理がパフォーマンス低下につながっているかを把握できる

また、Firebugにはログ出力機能が実装されている。JavaScriptのデバッグをおこなっているときはJavaScriptコード中に適時console.log()、console.info()などを埋め込んだり、Console上でconsole.trace()、console.dir()を実行したりすることでよりスピーディにバグ解析に必要な情報を洗いだすことができるだろう。

slider_fontsize_log.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css">
<title>jQuery UI 1.5.1 Demos / Slider with API/CSS</title>
<script type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/jquery-ui-personalized-1.5.1.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() 
{
    var slider = $('#slider');
    var slider_ui = $('#slider_ui');
    var slider_value = $('#slider_value');

    slider.css( 'width', '300px' ) ;
    slider_ui.css( 'font-size', '12pt' ) ;
    $('body').css( 'font-size', '100.01%' ) ;

    slider_value.text( '100' );

    // slide
    slider.slider(
    {
        min: 50,
        max: 300,
        startValue: 100,
        start: function (event, ui)
        {
            console.info('slider start');
        },
        stop: function (event, ui)
        {
            console.info('slider stop');
            console.log('stop value: ' + ui.value );
        },

        slide: function (event, ui)
        {
            $('body').css( 'font-size', ui.value  + '%' ) ;
            slider_value.text( ui.value );
        }
    });
}
);
-->
</script>

</head>

<body>

<div id="slider_ui">
    min(50)← value: <span id="slider_value">&nbsp;</span> →max(300)
    <div id="slider"></div>
</div>
<h1>Slider</h1>

<p>Slider - A sliding input element</p>


</body>

</html>

ループや分岐といった処理中にlog()やinfo()をはさむことで、トラブルが起こった際の切り分けがしやすくなる