無料でデバッグに利用できるブラウザ開発者ツール

ブラウザの開発者ツールで出来ること

HTML文章はhtmlタグに始まってheadタグ、bodyタグ、divタグ・・・というようにツリー構造に繋がっており、各ブラウザに内臓されるDOM(Document Object Model)機能は、開始タグと終了タグに囲まれたシステムにとっての意味のあるカタマリであるエレメント(要素)単位にオブジェクトを生成します。

Chrome, Firefox, IEという3つの主要ブラウザに内蔵されている開発者ツール(ディベロッパーツール)の主要機能は、ざっくり言ってこのエレメントオブジェクトを参照・操作することと関数のデバッグをすることです。

  1. WEBサイトと要素(エレメント)とCSSを1画面で表示することでWEB上での表示とコードを対比参照
  2. コンソールからJavaScriptによりDOMが生成したエレメントオブジェクトを通じてプロパティの値を操作
  3. JavaScript関数のデバッグ

Chrome開発者ツール(要素を検証)
dev-chrome

Firefox開発ツール(要素を調査)
dev-firefox

IE開発者ツール(F12 開発者ツール)
dev-ie

動きのあるページとは非同期であるということ

クライアントからの要求に基づいてサーバーはコンテンツをHTMLフォーマットで返しますが、ブラウザのJavaScriptは受け取ったHTMLフォーマットを、DOM機能によって生成されたエレメントオブジェクトを通じてサーバーに報告せず非同期にクライアント上で操作します。

最近聞きませんが「ダイナミックHTML」とか「動きのあるページ」という言葉は、クライアント上でJavaScriptによってHTMLに動きを付けるという意味であり、クライアントがサーバーとは非同期であることを意味します。

よって物理的にはアメリカのサーバーの中にあるGoogleやYahooページのタイトルや文章を、サーバーの許可なく自分のクライアントPC上で上書きできるのです。

google

HTML文章のhtmlタグに囲まれたhtml要素はブラウザ上でdocument変数に代入され、JavaScriptはdocument変数を基点として下位の要素にアクセスします。

上記HTML文章をid属性、class属性、divタグのエレメントオブジェクトのプロパティの値を、DOMによって再読み込みなしで上書きできます。

JavaScriptのデバッグ機能

JavaScriptのデバッグはVBと同じようにブレイクポイントを設定して変数の値を確認していきます。

Sourceタブのスクリプトにブレイクポイントを設定してイベントを実行します。
degugger

Scopeタブで変数の内容が確認できます。
degugger2

こんな投稿も読まれています