Chrome DevTools入門
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
#contents
** Chrome DevTools とは？ [#y4a4d290]
- Chrome のデバッグツール
- 公式サイト: https://developer.chrome.com/ >> DEVTOOLS
- 環境 / 事前知識
-- Chrome バージョン: 60.0.3112.113
-- OS X 10.11 El Capitan
-- HTML/CSS/JavaScript
- 起動方法
-- 表示 >> 開発 / 管理 >> デベロッパー ツール
-- Shortcut: cmd + alt + I
-- サイトコンテンツの特定箇所から起動: 範囲をドラッグ >> ...
-- Console の On / Off: esc キー
** Elements パネルを使ってみよう [#rdfdcabe]
- ブラウザが HTML を読み込んだ時に作られるツリー上のオブ...
- 左上のアイコンを使うとページ内の特定箇所の Elements を...
-- アイコンをマウスオーバーで "Select an element in the p...
-- Shortcut: cmd + shift + C
- 要素の編集も可能
-- 右クリック >> "Edit as HTML" で HTML エディター形式で...
** Styles を操作してみよう [#v9b242f8]
- Elements パネル選択時に右側に表示
- stylesheet を確認・編集可能
- user agent stylesheet: ブラウザがデフォルトで持っている...
- CSS の継承元 (Inherited from ***)
- 要素の margin, padding 等サイズに関する情報表示
- "Computed" タブにてまとめてスタイルを確認可能
- 各スタイルのチェックボックスを外すと当該スタイルが無効に
- 特定要素を選択して Styles タブ右上の "+" アイコンでスタ...
- Styles タブの ":hov" >> ":hover" にチェックをすると要素...
** Network パネルを使ってみよう [#nd082009]
- どのファイルがどのタイミングで読み込まれたか確認可能
- 表示が遅く時等に有用
- Initiator: どのファイルがどこ (ファイル名, ソースコード...
- Waterfall
-- 青い縦線はツリー上オブジェクトが構成された時点を示す
-- 赤い縦線は画像等含め全てのオブジェクトの読み込みが完了...
- ファイルを選択すると個別に Headers, Preview, Response ...
- 右クリック
-- カラムの表示項目を選択可能
-- パネル上でブラウザキャッシュや Cookie を削除可能
- パネル左上のアイコン群にて Clear や View の変更等が可能
- Preserve log: ページをリロードしてもリロード前のコンテ...
** Sources パネルを使ってみよう [#y8c959e1]
- コンテンツのファイルの中身を表示
- Elements パネルで stylesheet 等を選択すると Sources パ...
- JS, CSS を編集可能
- cmd + S で編集内容をブラウザ内で保存可能 -> 要素を右ク...
** JavaScript のデバッグをしてみよう [#z27fd1ca]
- Sources パネルで構文エラーを確認可能
- ロジックエラーの可能性が高い場合は Sources パネルでブレ...
-- 通常の "次へ" に加えて関数の中まで処理を追う "次へ" も...
-- 1行ずつ処理を追っていきマウスオーバーで各時点での変数...
** 他のパネルを見てみよう [#c3c593d1]
- Performance
-- ブラウザの描画パフォーマンスやメモリの使用状況を確認可能
-- 上級者向けパネル
- Memory
-- メモリのアローケション等を記録可能
-- 上級者向けパネル
- Application
-- ブラウザの Local Storage / Session Storage や Cookies ...
-- web アプリケーション開発時に有用
- Audits
-- web サイトのパフォーマンスに関する提案を行ってくれるパ...
** Console を使ってみよう [#p47dcd24]
- JavaScript をそのまま試すことが可能 ... ex. alert(1)
- 複数行の時は shift + enter で改行
> for (var i = 0; i < 10; i++) {
console.log(i);
}
0
1
2
3
4
5
6
7
8
9
- Elements パネルとの組み合せ
-- Elements パネルで選択した要素に対して Console で "$0" ...
-- 選択した要素の1つ前の要素は "$1" で 2つ前は "$2" で指...
-- CSS のセレクタを指定することも可能 ... ex. $('h1')
-- 指定したセレクタの全要素情報を取得する場合は $$('h1') ...
-- copy コマンドで要素をクリップボードに保存 ... ex. copy...
** 他の機能 [#n5f7bff0]
- Console 表示領域の他機能 (右クリックで表示 -> 選択)
-- Search: 横断的にファイルを検索, 正規表現も利用可能
- Toggle device toolber
-- 左上のアイコン or cmd + shift + M で On / Off
-- Emulated Devices を追加可能 (iPhone 5, iPhone 6, iPad,...
-- スマートフォンやタブレットで閲覧した時の画面をエミュレ...
終了行:
#contents
** Chrome DevTools とは？ [#y4a4d290]
- Chrome のデバッグツール
- 公式サイト: https://developer.chrome.com/ >> DEVTOOLS
- 環境 / 事前知識
-- Chrome バージョン: 60.0.3112.113
-- OS X 10.11 El Capitan
-- HTML/CSS/JavaScript
- 起動方法
-- 表示 >> 開発 / 管理 >> デベロッパー ツール
-- Shortcut: cmd + alt + I
-- サイトコンテンツの特定箇所から起動: 範囲をドラッグ >> ...
-- Console の On / Off: esc キー
** Elements パネルを使ってみよう [#rdfdcabe]
- ブラウザが HTML を読み込んだ時に作られるツリー上のオブ...
- 左上のアイコンを使うとページ内の特定箇所の Elements を...
-- アイコンをマウスオーバーで "Select an element in the p...
-- Shortcut: cmd + shift + C
- 要素の編集も可能
-- 右クリック >> "Edit as HTML" で HTML エディター形式で...
** Styles を操作してみよう [#v9b242f8]
- Elements パネル選択時に右側に表示
- stylesheet を確認・編集可能
- user agent stylesheet: ブラウザがデフォルトで持っている...
- CSS の継承元 (Inherited from ***)
- 要素の margin, padding 等サイズに関する情報表示
- "Computed" タブにてまとめてスタイルを確認可能
- 各スタイルのチェックボックスを外すと当該スタイルが無効に
- 特定要素を選択して Styles タブ右上の "+" アイコンでスタ...
- Styles タブの ":hov" >> ":hover" にチェックをすると要素...
** Network パネルを使ってみよう [#nd082009]
- どのファイルがどのタイミングで読み込まれたか確認可能
- 表示が遅く時等に有用
- Initiator: どのファイルがどこ (ファイル名, ソースコード...
- Waterfall
-- 青い縦線はツリー上オブジェクトが構成された時点を示す
-- 赤い縦線は画像等含め全てのオブジェクトの読み込みが完了...
- ファイルを選択すると個別に Headers, Preview, Response ...
- 右クリック
-- カラムの表示項目を選択可能
-- パネル上でブラウザキャッシュや Cookie を削除可能
- パネル左上のアイコン群にて Clear や View の変更等が可能
- Preserve log: ページをリロードしてもリロード前のコンテ...
** Sources パネルを使ってみよう [#y8c959e1]
- コンテンツのファイルの中身を表示
- Elements パネルで stylesheet 等を選択すると Sources パ...
- JS, CSS を編集可能
- cmd + S で編集内容をブラウザ内で保存可能 -> 要素を右ク...
** JavaScript のデバッグをしてみよう [#z27fd1ca]
- Sources パネルで構文エラーを確認可能
- ロジックエラーの可能性が高い場合は Sources パネルでブレ...
-- 通常の "次へ" に加えて関数の中まで処理を追う "次へ" も...
-- 1行ずつ処理を追っていきマウスオーバーで各時点での変数...
** 他のパネルを見てみよう [#c3c593d1]
- Performance
-- ブラウザの描画パフォーマンスやメモリの使用状況を確認可能
-- 上級者向けパネル
- Memory
-- メモリのアローケション等を記録可能
-- 上級者向けパネル
- Application
-- ブラウザの Local Storage / Session Storage や Cookies ...
-- web アプリケーション開発時に有用
- Audits
-- web サイトのパフォーマンスに関する提案を行ってくれるパ...
** Console を使ってみよう [#p47dcd24]
- JavaScript をそのまま試すことが可能 ... ex. alert(1)
- 複数行の時は shift + enter で改行
> for (var i = 0; i < 10; i++) {
console.log(i);
}
0
1
2
3
4
5
6
7
8
9
- Elements パネルとの組み合せ
-- Elements パネルで選択した要素に対して Console で "$0" ...
-- 選択した要素の1つ前の要素は "$1" で 2つ前は "$2" で指...
-- CSS のセレクタを指定することも可能 ... ex. $('h1')
-- 指定したセレクタの全要素情報を取得する場合は $$('h1') ...
-- copy コマンドで要素をクリップボードに保存 ... ex. copy...
** 他の機能 [#n5f7bff0]
- Console 表示領域の他機能 (右クリックで表示 -> 選択)
-- Search: 横断的にファイルを検索, 正規表現も利用可能
- Toggle device toolber
-- 左上のアイコン or cmd + shift + M で On / Off
-- Emulated Devices を追加可能 (iPhone 5, iPhone 6, iPad,...
-- スマートフォンやタブレットで閲覧した時の画面をエミュレ...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
