JSFのデバッグって…？ - Challenge Engineer Life !

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

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サーバのエラー出力確認

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

f:id:kikutaro777:20130809221404j:plain

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

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

主に使っていたツールは

Firebug
Chrome Developer Tools
IE 開発者ツール
Fiddler2

辺りです。

レンダリングが途中からうまくできてない、とか、コンポーネントのID確認などはFirebugやChrome 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/> <!-- ←これ -->