script要素のdefer属性

9月 29, 2009 · Posted in HTML, JavaScript · Comment 
Post to Google Buzz
このエントリーをはてなブックマークに追加

既存のJavaScriptの修正をしていると、読み込んでいるはずの関数がなぜか参照できず。
なぜだろう・・・と、ふとJavaScriptのタグを見ると見慣れない属性が付いてました。

<script defer="defer" type="text/javascript" src="xxxx.js"></script>

defer属性。これが原因でした。

deferは、「延ばす」「譲る」のような意味なので、この属性を指定するとscriptの中身を後で評価し、ページのレンダリングを妨げないようにすることができるようです。

今回は初期動作には必要のないJavaScriptなので、レンダリングの妨げにならないよう、defer属性が付いていた模様。

外部JSの容量が大きく、表示に影響が出ている場合には、この属性をつけてレンダリングを優先させるといいようですね。

今まで知りませんでした。

IE、Opera、Safariでも使える「FireBugLite」

9月 3, 2009 · Posted in FireFox, linux · Comment 
Post to Google Buzz
このエントリーをはてなブックマークに追加

JavaScriptのデバッグツールとして、FireBugを使っている人は多いかと思います。
しかし、FireFox以外のブラウザでは有力なデバッグツールがなく困っている人も多いと思いますが、実はFireBugはFireFox以外のブラウザでも使用することができるんです。

「FireBugLite」
http://getfirebug.com/lite.html

機能としては最新のFireBugからは劣りますが、JavaScriptやCSSのデバッグをする上では十分すぎる機能を備えていると思います。

使い方は簡単。
大きく分けて2通りのやり方があります。

  • ブックマークレット
  • 下記のアンカーのリンク先をブックマークレットとして、ブックマーク登録します。
    あとは使いたいページで、このブックマークレットを呼び出すだけ。

    FireBugLiteを起動←右クリックして「リンクのURLをコピー」を選択すると楽です。

  • 外部読み込み
  • 下記のスクリプトをデバッグしたいHTMLのヘッダーに記述します。
    あとは使いたいページを開くと自動的にFireBugが起動します。
    F12を押すことで、コンソールの表示・非表示も切り替えられるようになります。
    <script type="text/javascript"
    src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>

Firebugのコンソール出力機能(console.log 等)を使用する方は、外部読み込み型にしないとconsoleオブジェクトが参照できませんのでご注意を。

どちらも簡単に導入できるので、用途によって使い分けるのが良いと思います。