JavaScript

Firebug on Firefox29 でコンソールログが表示されない問題

Firebug 1.13 on Firefox 29 on MacOSX Mavericks の環境で JavaScript の console.log() が動作しなくてハマっていたのですが、以下の記事を見て Firebug 2.0 にアップデートしてみたら解決しました。

Firebug 1.13.0a10 on Firefox 29 (beta) console.log not showing

ちなみに Firebug 2.0 は Firefox30 以降の対応だったので Firefox もバージョンアップしちゃいました。

どうやら Firefox 本体に割と強力なデバッガが標準搭載されて、そっちのコンソールログの機能とバッティングして動作しなくなっていたようですね。

Firefox の開発ツールをちょこっと触ってみた感じ、Firebug に搭載されている大体のデバッグ機能は使えるように感じたので自分の中で Firebug 不要説が出てきたのはさておき、ひとまず使えるようになってよかったです。

（優秀なアドオンが本体に組み込まれていく流れは、iOS とサードパーティアプリのそれを見ているようで少し複雑な気分になります）

追記（2014/06/19）：
気になって調べてたら、メイン開発者の人 Chrome のほうに加入したのね・・。
Firebugのメイン開発者、GoogleのChromeチームに加入 | スラッシュドット・ジャパン IT

CakePHP2.0.3でJSファイルやCSSファイルを読み込む

CakePHP2で外部JSファイルとCSSファイルをHEADタグ内で読み込む方法です。
CakePHP1.2やCakePHP1.3と多少変わっています。

最初にwebrootフォルダのフォルダにCSSファイルとJSファイルを入れておきます。
/app/webroot/css　→　CSSファイル
/app/webroot/js　→　JSファイル

次に、レイアウトファイルのHEADタグ内で$scripts_for_layout変数を出力します。
/app/View/Layouts/default.ctp





<?php echo $title_for_layout; ?>

次にViewファイルの上辺りで以下の内容を記述します。
以下の例ではscript1.jsとscript2.js、import.css、sub.cssが読み込まれます。
読み込みたいファイル名は合わせて修正してください。
(/app/View/ControllerName/action_name.ctp)

Html->script(array('script1', 'script2'), array('inline'=>false)); ?>
Html->css(array('import', 'sub'), false, array('inline'=>false)); ?>

CakePHP1時代と違ってHTMLヘルパーは$this->Htmlのような参照方法になったので注意します。
また、inlineオプションをfalseにすることによってレイアウトファイル側でスクリプトファイルを読み込んでくれます。
Cookbookのcssメソッドの説明とscriptメソッドの説明に以下のように書かれています。

scriptメソッド：

Creates link(s) to a javascript file.
If key inline is set to false in $options,
the link tags are added to the $scripts_for_layout variable
which you can print inside the head tag of the document.

Include a script file into the page.
$options['inline'] controls whether or not a script
should be returned inline or added to $scripts_for_layout.
$options['once'] controls, whether or not you want to
include this script once per request or more than once.

cssメソッド：

Creates a link(s) to a CSS style-sheet.
If key ‘inline’ is set to false in $options parameter,
the link tags are added to the $scripts_for_layout variable which you can print inside the head tag of the document.

最後に、こんな感じでHTMLが出力されます。

ViewからLayoutというちょっとトリッキーなデータの受け渡しなので
最初はちょっとだけ戸惑うかもしれないですね。
いちいちレイアウト側に分岐を書かなくていいので便利。