Angular でハマった時に試すこと

(JavaScript, Angular) 初心者の人も含めたメンバーに言ったことをまとめた。 フロントエンドエンジニアには当たり前のことだったり、あと今のプロジェクトで Angular 使ってるってだけで Angular あまり関係ない。

何はともあれコンソールにエラーが出ていないか確認してください

Angular に限りませんが、まず Chrome のコンソールを確認してください。 エラーや警告を放置しないでください。

angular.min.js ではなく angular.js を使ってください

Chrome のコンソールにエラーメッセージが表示されるようになります。 (angular.min.js だとスタックトレースしか表示されません。関数名も minify されてるので分かりにくいです)

シークレットモード使ってください

キャッシュにより古い JS や HTML 等が取得されるのを防ぐためです。

通常のリロードの代わりにスーパーリロードを使ってください

上と同じ理由です。 操作方法は以下の通りです。

  1. 開発ツールを開く (Ctrl-Shift-I か F12)
  2. アドレスバーの左の更新ボタンを右クリック(or 左クリック長押し)→「キャッシュの消去とハード再読み込み」

サーバから最新のソースが配信されているか確認してください

(サーバは例えば Java だったら Tomcat とか Wildfly 等のことを指しています) Eclipse 上のエディタで編集すれば自動的にサーブレットコンテナにも反映されますが*1Eclipse 以外のツール(エディタ等)で編集すると、Eclipse のプロジェクト上で F5 を押さないと Eclipse のプロジェクトエクスプローラーにもサーバにも反映されません。 (それ以外でももしかしたら反映されない事があるかもしれません)

反映されているかされていないか、今思い付く確認方法としては以下の通りです。

まず前述のスーパーリロードを行った後に、以下のいずれかを実行してください。

  1. Chrome の開発ツールの Sources タブで JS ファイルを開く
  2. ブラウザで JS の URL に直接アクセスする

*1:サーバに公開する設定になっていれば