読者です 読者をやめる 読者になる 読者になる

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:サーバに公開する設定になっていれば