空白のページに遷移してしまうバグと格闘した (Chrome の開発ツールに助けられた話)
原因 (一行で)
<a href><img src='...' ng-click='...'></a>と書いていて (href が空のため) 空白のページに飛んでいただけだった(ｽﾞｺｰ
現象
【緩募】Angular でコンソールに何も表示されず空白のページに遷移してしまうバグの原因
— tyru (@_tyru_) May 19, 2016
@_tyru_ Angular 関係なかった。<a href><img src='...' ng-click='$ctrl.goHogePage()'></a> みたいにしてたせいで空の URL に遷移してるだけだった…
— tyru (@_tyru_) May 19, 2016
@_tyru_ 2回目の遷移で初めて起きる(100%)という再現条件だったので完全にキャッシュのバグを疑ってた。昨日丸一日潰した… でも Chrome のデバッグで onhashchange で止めるやり方とか非同期実行のスタックトレースを出す方法知れたので良かったと思いたい
— tyru (@_tyru_) May 19, 2016
@_tyru_ しかも目的の URL に遷移した後に空白のページに飛ばされてたからそっちのページの処理も調べたり… クリックイベントが遅れてやってきただけだった…
— tyru (@_tyru_) May 19, 2016
対処＆結論
@_tyru_ a タグ外して CSS で cursor: pointer; した
— tyru (@_tyru_) May 19, 2016
@_tyru_ これどっかのライブラリの example のコードで見て使い始めたんだけど、やりたい事は前述した通りカーソルのポインタを変えたいだけだったのでちゃんと調べもせずに使うのは絶対にしちゃいけない…
— tyru (@_tyru_) May 19, 2016
デバッグの流れ
(1日目)
不毛なので読まなくてもいいです。
- キャッシュバグだと思ってコードをチェックしたり実行したりした
- 非同期 GET のコールバックの実行タイミングが関係してそうだと思って調べた
- どこかでエラーが起きたが握り潰されてしまっていると考え、ログを差し込んだ
- ありがとうと言い続けその10倍は罵声を浴びせた
(2日目)
帰宅した後、気になって夜中にスマホで調べた時、Chrome の開発ツールでのデバッグに関する記事を発見した。
- Chrome の開発ツールで非同期で実行されたコールバックのスタックトレースが何によって発火されたかまで辿れる事を知る
- さらに Chrome の開発ツールで onhashchange で止める事ができると知る
- onhashchange で止めてみる
- スタックトレースの最初を見たら MouseEvent とある。クリックによる遷移…？あ、もしかして…
- 元の HTML 見てみる
- 予想通り
<a href><img src='...' ng-click='...'></a>と書いてある - a タグ外してみる
- ちゃんと目的のページに遷移した！
実際はもっとうろうろしてます (しました)。
調べる (TODO)
調べようと思ったけどこの記事を書いたのが実は5月20日でそれから進展なし。だるい。
- 二度目のクリックで遷移してしまうのはよく分からない *3
- 職場のコードなので調べるのだるい
