Angular でハマった時に試すこと
(JavaScript, Angular) 初心者の人も含めたメンバーに言ったことをまとめた。 フロントエンドエンジニアには当たり前のことだったり、あと今のプロジェクトで Angular 使ってるってだけで Angular あまり関係ない。
何はともあれコンソールにエラーが出ていないか確認してください
Angular に限りませんが、まず Chrome のコンソールを確認してください。 エラーや警告を放置しないでください。
angular.min.js ではなく angular.js を使ってください
Chrome のコンソールにエラーメッセージが表示されるようになります。 (angular.min.js だとスタックトレースしか表示されません。関数名も minify されてるので分かりにくいです)
シークレットモード使ってください
キャッシュにより古い JS や HTML 等が取得されるのを防ぐためです。
通常のリロードの代わりにスーパーリロードを使ってください
上と同じ理由です。 操作方法は以下の通りです。
- 開発ツールを開く (Ctrl-Shift-I か F12)
- アドレスバーの左の更新ボタンを右クリック(or 左クリック長押し)→「キャッシュの消去とハード再読み込み」
サーバから最新のソースが配信されているか確認してください
(サーバは例えば Java だったら Tomcat とか Wildfly 等のことを指しています) Eclipse 上のエディタで編集すれば自動的にサーブレットコンテナにも反映されますが*1、Eclipse 以外のツール(エディタ等)で編集すると、Eclipse のプロジェクト上で F5 を押さないと Eclipse のプロジェクトエクスプローラーにもサーバにも反映されません。 (それ以外でももしかしたら反映されない事があるかもしれません)
反映されているかされていないか、今思い付く確認方法としては以下の通りです。
まず前述のスーパーリロードを行った後に、以下のいずれかを実行してください。
- Chrome の開発ツールの Sources タブで JS ファイルを開く
- ブラウザで JS の URL に直接アクセスする
*1:サーバに公開する設定になっていれば
