読者です 読者をやめる 読者になる 読者になる

Challenge Java EE !

Java EEを中心に趣味や仕事における開発メモを書いています。

JSFのデバッグって…?

Ajax JSF

最初に結論を書いておくと

JSFデバッグではこれで完璧だ!

というエントリではないです(^^;

自分がやってることをまとめたレベルで、むしろ皆どうやってるんだろ…的な(^^;

……

前回のJava EE 6開発でちょこちょこハマった点の1つに、JSFのビューが思うようにいかない…というのがありました。

しょぼいミスによるエラーとしては例えば

  • IDの指定が重複している
  • IDの指定が間違っている

とかですね(^^;

具体的には以下のような記述ですが、実行するとこれらはわかりやすいエラーとなるので問題ないです。

IDの指定が重複している例
<h:inputText id="txtInput" value="#{indexBean.inputText}" />
<!-- さすがにこんな近さでIDが重なるのは少ないけど、色々なものを挟んだ場合など -->
<h:inputText id="txtInput" value="#{indexBean.inputText2}" />
IDの指定が重複している場合のエラー

f:id:kikutaro777:20130809220749j:plain

IDの指定が間違っている例
<h:inputText id="txtInput" value="#{indexBean.inputText}" />
<h:commandButton value="送信">
    <f:ajax execute="txtImput" />  <!-- 正しくは mじゃなくn -->
</h:commandButton>
IDの指定が間違っている場合のエラー

f:id:kikutaro777:20130809220757j:plain

なぜかこっちは英語…(-_-;

エラーがわかりにくいときもありますが、まあまだ良い方かなと。

ハマるエラー

上記のように明確なエラーとならない場合にハマったりします。例えばですが

  • ある一部分以降がうまく描画されない
  • データと画面描画の更新してるけど反映されない
  • Ajaxが思ったように動かない

などなど…。

そういうとき自分がやっていたこととしては

  • APサーバのエラー出力確認
  • ブラウザの開発者ツール等で生成されたHTMLやAjax通信などを確認
  • <ui:debug>タグ

辺りでしたが、決め手に欠く感じ…(^^;

APサーバのエラー出力確認

まあベタですが…(^^;
NetBeansGlassFish使っている場合には、以下のGlassFishのコンソールとかです。
まずはここで何かエラーが出てないかチェックしてました。

f:id:kikutaro777:20130809221404j:plain

ブラウザの開発者ツール等で生成されたHTMLやAjax通信などを確認

主観ですが…これが全てにおいて最も効果的なんじゃないかなと(^^;
もはやJSF関係ないですが…。

主に使っていたツールは

辺りです。

レンダリングが途中からうまくできてない、とか、コンポーネントのID確認などはFirebugChrome Developer Toolsを使うと以下のようにタグと実画面のハイライトが連動するのでタグ特定しやすいです。

Firebug
f:id:kikutaro777:20130809223159j:plain
Chrome Developer Tools
f:id:kikutaro777:20130809223206j:plain

Ajaxまわりも同様ですね。レスポンスのステータスや内容を確認したり。

Firebug
f:id:kikutaro777:20130809223807j:plain
Chrome Developer Tools
f:id:kikutaro777:20130809223812j:plain
Fiddler2
f:id:kikutaro777:20130809224112j:plain

IEの開発者ツールはIEのバージョンを変えて確認する場合によく使いました。
f:id:kikutaro777:20130809230318j:plain

ってホントJSF関係ないや(ノД`)

<ui:debug>タグ

で、やっとこJSF特有な情報(^^;

ビューの適当なところに<ui:debug>タグを埋め込みます。
例えば以下のような感じ。

<h:body>
    <h:form id="frm">
        <h:panelGrid id="pg" columns="2">
            <h:inputText id="txtInput" value="#{requestScopedBean.inputRequestScopedVal}" />
            <h:inputText id="txtInput" value="#{viewScopedBean.inputViewScopedVal}" />
            <h:commandButton value="送信">
                <f:ajax execute="txtInput" />
            </h:commandButton>
        </h:panelGrid>
    </h:form>
</h:body>
    
<ui:debug/> <!-- ←これ -->

デフォルトではブラウザ上で

Ctrl + Shift + d

と押すことでJSFデバッグウィンドウが起動します。
f:id:kikutaro777:20130809225019j:plain

で、JSFコンポーネントツリーを確認できたり
f:id:kikutaro777:20130809225039j:plain

スコープ別にBackingBeanの確認ができたり
f:id:kikutaro777:20130809225245j:plain

ちなみに、Chromeでは上記ショートカットが使われているので、定義を

<ui:debug hotkey="x"/>

などとして、ホットキーを割り当てすると楽です。これで

Ctrl + Shift + x

で起動することができます。

あと、これはあくまでもデバッグ用なので、rendered属性を使ってProduction環境では使えないようにする、とか工夫が必要となるので注意です。以下サイトなどが具体例の1つかと。

と、こんなタグがありますが、個人的にはこれが役に立った記憶があまりないです…(-_-;

どなたか「この<ui:debug>があるからこれこれが嬉しいじゃないか!」というのがあれば是非(^^;

というわけで、皆JSFデバッグってどうやってるのかしら…と。

他に何かいい手があるのかなー。

にほんブログ村 IT技術ブログへ
にほんブログ村
にほんブログ村 IT技術ブログ Javaへ
にほんブログ村