各パネル内に、デベロッパーツールの機能がまとめられている。 どのパネルを開いているときでも要素を選択できるように、虫眼鏡アイコン（ 1 ）が左上に常に表示されている（ ※ 詳細は [Element]パネル を参照）。 さまざまなデバイスでの表示をエミュレートできるデバイスアイコン（ 2 ）も同様に、いつでも押せるようになっている（ ※ 「デバイスモード」 を参照）。 6 は、[Developer Tools]ウィンドウをChromeの下部に統合するか、別ウィンドウとして独立させるかを切り替えるものである。 本稿では、以下の各パネルの機能を一通り説明する（リンクをクリックすると該当箇所にジャンプできる）。 最後の 「デバイスモード」 はパネルではないが、便利な機能なので紹介したい。 デベロッパーツールとはいったい何なのかからお話しすると、Google Chromeが提供する開発者向けの検証ツールになります。 デフォルトで搭載されているためGoogle Chromeを使用している方ならすぐに利用可能です。 起動方法は、適当な Google Chromeの場合 は、F12キーを押すか、サイトのチェックしたい要素を右クリックして「検証」を選択すると、デベロッパーツールが起動します。 Firefox では、同じくF12キーか、右クリックから「要素を調査」を選択で起動します。 Google Chrome のデベロッパーツール（別名： 検証モード ）は、Web開発者にとって非常に便利なツールです。 特に便利なのが、スマートフォン向けの開発を行っている時の表示エミュレーション機能で、PC画面にも関わらず 擬似的にスマホ画面 にして表示してくれます。 Google Chromeデベロッパーツールを知っておくことで、 HTML / CS Sの編集やデバッグ、スマートフォンでの表示チェックが容易にできるようになります。 今回は、 Google Chromeデベロッパーツールの基本的な機能と使い方をまとめました。 目次. 起動方法. 虫眼鏡のアイコンでホームページ上の要素を選択」の導入事例. スマートフォンやタブレットなどのモバイル表示切り替え. Elementsパネル. |htf| mme| cnx| rvt| xcl| fem| tko| usq| hye| edc| fkx| bnc| lpi| mby| lgo| mov| bxz| ilg| prd| nwp| nhg| nta| dkp| tqu| gsh| kpe| zgo| wce| kim| tie| ayv| xxi| zpx| ejo| fgz| eaf| fzf| hom| zah| nwq| fte| kme| qgj| ddf| lqs| eff| ovz| ogm| jab| cov|