前ページのソースコードで作成した「Slider」を実際に操作するとエラーがConsoleに表示される(以下参照)。どのファイルのどの行で何の問題が起きているかをリスト表示してくれるため、とても便利だ。

エラーやワーニングを一目で確認することが可能

問題が発生しているファイルへのリンクをクリックすると、該当のパネルへジャンプし、問題がある行をハイライト表示してくれる

JavaScriptの場合はファンクションのスタックトレースも表示できる

表示するエラーの種類をOptionsから指定しておくことで、必要な情報のみが表示されるようにすることができる

エラー情報に従って修正した結果が以下のソースコードだ。

slider_fontsize.html(修正後の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 );
        }
    });
}
);
-->
</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>

以下のように、こちらは問題なく動作する。また、コンソールからソースコードを実行することも可能だ。

JavaScriptのエラーがなくなり、スライダが動作するように。このほかコンソールからはJavaScriptの実行が可能だ

複数行のJavaScriptも実行可能。簡単なJavaScriptコードのテスト環境としても利用できる