chromeでaipoのjavascriptをデバッグする流れ

aipoはコンパイル時に複数のjavascriptをまとめたり変数の文字置き換えたり(hogehogeをaに置き換えたりする),改行消したりしてデータ量を削減している(yuicompressor利用) デバッグする時に分かりにくいところが多いので大まかなデバッグの流れをまとめる。

  1. 変数の置き換えを無効化
    mvn installをするときにオプションつけとく
mvn install -Dmaven.yuicompressor.disableOptimizations=true -Dmaven.yuicompressor.nomunge=true

https://hacknote.jp/archives/622/

  1. デバッグ箇所探す
    chromeの開発者ツール起動→コンソール→設定(歯車マーク)→Log XMLHTTPRequestsにチェック
    チェックしたい部分動かしてみるとログが出てくるので怪しいメソッドを見つけてaipo.jsを開く

  2. 改行付ける
    圧縮されててめっちゃ見にくいので左下の”{}”マーク押すと改行される(この状態だとchrome上で編集出来ないので注意!)

  3. ブレークポイント張る
    止めたい行番号クリックでブレークポイント張る。行番号で右クリック→edit Breakpointで止まる条件を設定できたりする