PythonとJavaScriptではじめるデータビジュアライゼーション

86

4 章　Web 開発の基本

ます

†

。この優れた機能により、データ可視化の外観を改良できます。

Chrome

の

Elements

タブではページの構造を調べることができます。さまざまな要素の配置

がわかるので、手軽に

position

や

float

プロパティでのコンテンツブロックの配置を理解できま

す。専門家がどのように

CSS

スタイルを適用しているかを知ることは、自分の技術を向上させ、

また便利なテクニックを学ぶ上で非常に参考になります。

4.5.2

 

Sources

タブ

Sources

タブではページに含まれる

JavaScript

を確認できます。図

4-7

は、

Sources

タブの動

作を表しています。左側のパネルでは、

<script>

タグで埋め込まれた

JavaScript

を含むスクリプ

トや

HTML

ファイルを選択できます。図

4-7

のように、コードにブレークポイントを設定して

ページをロードし、ブレークポイントで呼び出しスタックとスコープの限定された変数やグローバ

ル変数を確認します。このブレークポイントはパラメータ的なので条件を設定でき、特定の状況を

捕捉して詳しく調べたい場合に便利です。ブレークポイントでは、標準的な関数のステップイン、

ステップアウト、ステップオーバーなどが行えます。■

Sources

タブのおかげで、

JavaScript

をデバッグする際にコンソールロギングを使わずに済みま

す。実際に、以前は

JavaScript

でのデバッグはうまくいくときもあればうまくいかないときもあ

る黒魔術のようでしたが、現在ではほとんど楽しみになっています。 ...