Firebugの使い方 - Console

Consoleパネルではおもに次の操作を実行できる。

  • 閲覧しているサイトで発生したJavaScript、CSS、XML、Chrome、外部エラーやワーニングを表示
  • XHRの確認
  • JavaScriptコードの実行
  • JavaScriptパフォーマンスのプロファイリング
  • JavaScriptロギング

閲覧サイトにJavaScriptなど各種の問題がある場合は、該当行をクリックすることで、問題がある箇所に即座にジャンプすることができるようになっている。またここからJavaScriptを実行することも可能だ。

ここではテストに使用するサンプルファイルに、「jQueryを使ってるならコレ! ウィジェットライブラリの決定版 - jQuery UI」で紹介した文字サイズを動的に変更するサンプルソースをベースとしたものを使用する。

slider_fontsize_typo.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,
        slide: function (event, ui)
        {
            $('body').css( 'font-size', ui.value  + '%' ) ;
            // 正しくは slider_value.text( ui.value );
            slider_vaule.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>

このファイルはミスタイプがあり、実際には動作しない。次ページでFirebugを使ってデバッグしてみる。