WEBエンジニアは、クセで、インターネットブラウザを使っていると、デバッグコンソールというパネルを無意識に表示してしまうクセがあります。
「このページ、表示が遅いな・・・、どんなモジュールを読み込んでいるんだろう？」と思って、読み込みソースコード一覧を表示したくなったり、
何かしらのJSエラーが出てるけど、どのソースコードでエラーがでているのか、ファイル名と行数を特定したくなったり、
なんだか表示が素晴らしくて、ページのソースコードをその場で見たくなり、右クリックして「検証」を選択してみたり・・・
とにかくエンジニアはいつでもデバッグコンソールを表示して仕事をしているし、仕事をしていなくても、ブラウザの奥の状態を把握したがる生き物です。
そんなデバッグコンソールでとある処理を作っていた時に、頻発したエラーがあったので、その内容を共有しておきます。
デバッグコンソールが便利なconsole.log
WEBページの構築をしていると、機能のデバッグをする際に、色々な文字列や計算結果、エレメント情報などを、コンソール画面に表示したくなります。
javascriptの"console.log(***)"で何かを表示すると、非常に便利な表示で、PHPなどのerror_logと比べると神ツールレベルです。
例えば、配列を表示したい場合に、PHPでは"var_dump"や"print_r"などの関数を使って行わなければ、"echo $array"などとすると、"Array"としか返らず、変数のタイプなど分かりきっているのにわざわざ分解して表示したり、json変換して表示したりする必要があります。
ところが、javascriptの"console.log"機能は、その変数の内容も含む全ての情報が表示されて、とにかく便利に扱えます。
var lists = document.links;
console.log(lists);
> HTMLCollection(35) [a, a, a, a, a, a, a, a, a, a.formkit-powered-by, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a, a.button.action-button, a, a, a, a]
ページ内にリンクタグが35個あるのがすぐにわかります。
さらに、そのリスト部分をクリックすると、内包しているリスト一覧が表示されます。
こうしてエレメントを表示すると、デバッグコンソールでそのリストにカーソルを当てると、表示しているどのエレメントなのかが、画面でハイライトされて、視覚的にもわかりやすくサポートしてくれます。
表示されていないエレメントをデバッグコンソールで表示するとエラーになりがち
おそらく、視覚サポートの便利機能の影響だと考えられますが、表示されていないエレメントをデバッグコンソールに表示して、カーソルを当てると、WEBブラウザのページが一気に死にます。
エラーが出た時の画面はこんな感じになります。
デバッグコンソールだけのエラーでなく、ページ全体がコケた画面になってしまい、大惨事です。
このエラーが出た時のプログラムは以下のとおりです。
var lists = document.links;
var df = document.createDocumentFragment();
df.appendChild(lists[0]);
console.log(df);
おそらくリンクタグがあるページであれば、どのページでもエラーが発生すると思いますが、
原因は、documentFragmentでメモリ上にしか存在しないエレメントが構築され、デバッグコンソールで強制的に表示しようとして、エラー画面になってしまうのだと考えられます。
これを解消するには、メモリにしか存在しないエレメントは、console.logを使わないというぐらいしかないでしょう。
でも、今現在のメモリ上のエレメント数を知りたい場合などは、以下のようにすると、問題なく表示できます。
console.log(df.length);
無作為にエレメントをコンソールに表示しないほうがいいという教訓なのかもしれませんね。
便利だからといって甘えてはいけません。
0 件のコメント:
コメントを投稿