空白のページに遷移してしまうバグと格闘した (Chrome の開発ツールに助けられた話)

原因 (一行で)

  • <a href><img src='...' ng-click='...'></a> と書いていて (href が空のため) 空白のページに飛んでいただけだった(ズコー
    • ng-router + html5mode(false) を使ってるなら href で (#... 以外のリンクに) 直接飛んだら otherwise は素通りされる *1 *2
    • なので遷移はちゃんと $location 使えって話な気がする

現象

対処&結論

デバッグの流れ

(1日目)

不毛なので読まなくてもいいです。

  • キャッシュバグだと思ってコードをチェックしたり実行したりした
  • 非同期 GET のコールバックの実行タイミングが関係してそうだと思って調べた
  • どこかでエラーが起きたが握り潰されてしまっていると考え、ログを差し込んだ
  • ありがとうと言い続けその10倍は罵声を浴びせた

(2日目)

帰宅した後、気になって夜中にスマホで調べた時、Chrome の開発ツールでのデバッグに関する記事を発見した。

  • Chrome の開発ツールで非同期で実行されたコールバックのスタックトレースが何によって発火されたかまで辿れる事を知る
  • さらに Chrome の開発ツールで onhashchange で止める事ができると知る
  • onhashchange で止めてみる
  • スタックトレースの最初を見たら MouseEvent とある。クリックによる遷移…?あ、もしかして…
  • 元の HTML 見てみる
  • 予想通り <a href><img src='...' ng-click='...'></a> と書いてある
  • a タグ外してみる
  • ちゃんと目的のページに遷移した!

実際はもっとうろうろしてます (しました)。

調べる (TODO)

調べようと思ったけどこの記事を書いたのが実は5月20日でそれから進展なし。だるい。

  • 二度目のクリックで遷移してしまうのはよく分からない *3
    • 職場のコードなので調べるのだるい

*1:onhashchange しか見てない?

*2:ui-router だとどうなのかは知らない

*3:クリックした事で href の属性値が変わってしまっている?