概要

デバッグとして多用されるconsole.log()ですが、たまにDevToolsで確認できないことがありました。
調べてみても「コードが実行されていない」とか「jsファイルが読み込まれていない」という指摘ばかりであり、「いや、alert()で上下挟んだら出てるから絶対実行されてるんだよなぁ…」というモヤモヤを抱えていました。

たまに成功するときもあって、console.log()は気まぐれだからalert()の方がいいや、と力技で解決していたのですが、さすがに向き合う必要があると思って調べてみました。

非常に簡単な落とし穴だったので、同じ原因で悩んでいる方の助けになれば幸いです。

先に結論

DevToolsのConsoleを開くと、親のファイルをデフォルトで指定しています。

これを、iframeで実行している対象のファイルにすれば表示されます！

iframeを使って複数のフレーム（ファイル）が組み合わさっている場合、親フレームを見ても子フレームで呼び出されたconsole.log()は見えなかったのです。
また、alertはフレームに依存せずブラウザで出力されるものなので、まったく別物なのでした。

あとがき

タイトルには「iframeを使うと～」と書いたのですが、iframeが原因だと分かるまでに苦労しました。
iframeを使っていなければ普通にできるので「今日も運が悪かったらできないのかなー、だったら嫌だなー」とめんどくさく思っていました。

他の解決策（それこそalert）でなんとかなっていたので致命傷には至りませんでしたが、些細な心理的負荷がクオリティ低下に繋がってしまうので「なんだかわからないことのせいで手間が増えてる」という問題は早めに解決しましょう！