このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
-
#01 Chrome Developer Toolsとは何か？ (02:55) 無料公開中
- Chrome Developer Toolsの概要
- 公式サイトについて
- 必要となるツール
- 必要となる知識
- ブラウザの動作の仕組み
-
#02 まずは起動してみよう (02:37) 無料公開中
- 起動の仕方
- 終了の仕方
- コンソールの起動・終了
-
#03 Elementsパネルを使ってみよう (1) (02:32) 無料公開中
- DOMの選択
- DOMの移動
- DOMの編集・削除
-
#04 Elementsパネルを使ってみよう (2) (02:43)
- 適用されているスタイルの確認
- スタイルの編集
- ボックススタイルの確認
- 擬似セレクタのシミュレーション
-
#05 Resourcesパネルを使ってみよう (02:22)
- 読み込まれたファイルの確認
- CSSの編集、履歴の管理
- その他の情報の確認
-
#06 Networkパネルを使ってみよう (02:30)
- タイムラインの確認
- 便利な設定
- キャッシュのクリア
-
#07 JavaScriptのデバッグをしてみよう (1) (02:41)
- エラーメッセージの確認
- JavaScriptの編集
- 動作確認
-
#08 JavaScriptのデバッグをしてみよう (2) (02:55)
- ブレークポイントの設定
- 値の確認
- デバッグ
- 動作確認
-
#09 ブラウザのパフォーマンスを調査しよう (01:46)
- Timelineパネル
- Profilesパネル
- Auditsパネル
-
#10 Consoleパネルを使ってみよう (02:59)
- $0〜$5
- $()
- $$()
- copy()
-
#11 設定を変更してみよう (01:56)
- 各種設定の確認
- User-Agentの変更
- ショートカットキーの確認
-
#12 Ajaxのデバッグをしてみよう (02:39)
- Ajaxプログラムのデバッグ
- 圧縮されたコードの展開
