ドットインストール!普段からちょくちょく使ってるけど、感覚で使ってたのでちゃんと解説してもらえると助かります!
ウェブ開発ではChromeのDeveloperToolsを利用することになりそう。ということで、こちらも勉強してみました。今回もブラウザの仕組み
HTML/CSS/Imageを読み込むと、Document Object Model(DOM)がブラウザの中で作られる。これに対して、JavaScriptなどで動的に操作をすることができる。
HTML/CSS/Image -> DOM <- JavaScript
使い方メモ
- Elements
- 虫眼鏡アイコンをタップして、ページの要素をタップするとそのDOM要素が展開するのが便利。
- 右クリックでCopy as HTMLなどのメニューが使えるのが便利。
- user agent stylesheetはブラウザが自動で作成したスタイル。Computedを見ると自分のスタイルと合わせた最終結果が見れる。
- Network
- 丸ボタンをクリックして有効にしておくと、別画面に遷移して戻ってきても履歴を保持してくれる。
- 右クリックでブラウザキャッシュを消したり、Cookiesを消したりできる。
- Resource
- JavaScriptやCSSの編集ができる。編集履歴保存もできる。
- BreakPointも使える!
- 変数の値はマウスオーバーで見れる
- ステップ実行などもできる!
- BreakPointも使える!
{}
をクリックするとJavaScriptを整形して表示してくれる。
- JavaScriptやCSSの編集ができる。編集履歴保存もできる。
- Console
- バツ印を押したらクリアできる
- JavaScriptをBreakPointで止めた時に、Consoleで変数名を入力すると中身が見れる。
$$('要素')
で要素を取得してログに出せる。
- 設定
- Emulationがすごい。
- ConsoleのタブでEmulationが選択できる。ここで、端末を選択肢てEmulateすると画面サイズなどが変わり、iPhone等の場合はカーソルがタップ用に変わる!!
- Emulationがすごい。