これまで、「実装編」「解説編」に分けて、日報アプリに実装した要素を説明してきました。
- 第9回 HTML5で日報アプリを作る 実装編[1] 画面の構造を定義する
- 第10回 HTML5で日報アプリを作る 実装編[2] 画面のレイアウトを定義する
- 第11回 HTML5で日報アプリを作る 実装編[3] 操作や処理を定義する
- 第12回 HTML5で日報アプリを作る 解説編[1] HTML5の入力補助部品を使う
- 第13回 HTML5で日報アプリを作る 解説編[2] レスポンシブWebデザインとBootstrapを使う
- 第14回 HTML5で日報アプリを作る 解説編[3] 非同期処理とCSS Animationを使う
実際の開発では、周辺の補助ツールを利用することで開発生産性や品質の向上を図ります。第15回からは、前回までで作成した日報アプリケーションを題材に、実際の開発でよく使われるであろう以下のツールについて、順に説明していきます。
- クライアントでデバッグする: 開発者ツール
- Styleの記述の高度化: Less/Sass/Stylus
- JavaScriptの品質向上のためのaltJS: TypeScript
- 早期にバグを発見する: JSLint/JSHint/ESHint
今回取り上げるのは開発者ツールです。
クライアントでデバッグする:開発者ツールの使い方
最近のPC向けWebブラウザ-には「開発者ツール」と呼ばれる、デバッグツールが内蔵されています。JavaScriptなどのクライアントで動作するプログラムはここでデバッグできます。
開発者ツールは主な機能として、以下をそろえています。
- DOM要素やスタイルの確認及び編集
- JavaScriptのソースコードの確認やデバッグ(ブレーク、変数値の確認)
- 通信状況の確認
- パフォーマンスプロファイラー
他にどのような機能があるかや各機能の詳細については、hifiveのサイトも参照してください。ここでは主に、デバッグの方法と、DOM構造・スタイルの確認について説明します。ブラウザ-によって機能に差がありますが、ここで説明する基本的な機能についてはどのブラウザーも提供しています。以降ではChromeに付属する開発者ツールを取り上げて説明します。
開発者ツールを開くには、Webブラウザーを開いた状態で[F12]キー、[Ctrl]+[Shift]+[I]、またはメニューから「ツール」→「デベロッパーツール」を選択して開きます。