Chrome DevTools

Chrome DevToolsとはGoogle Chrome内でWeb authoring(プログラミング言語を使わないで作成する)とdebuggingのツールのことである。

Opening the Chrome DevTools

どのように開くのか。3通りある。

・Chrome MenuのMore Tools > Developer Tools

・ページ内で右クリックし、Inspectを選択

・キーボードよりCtrl+Shift+I (Windows) or Cmd+Opt+I (Mac)をコマンド

Discover DevTools

ここには、多くのツールが用意されている。簡単に説明しよう。

Device Mode

ここでは、デバイスに関することを変更確認することができる。

Elements panel

DOMやCSSによって操作されるレイアウトやデザインについて確認・変更等の処理を行うことができる。

Console panel

コンソールとは、コンピュータを操作するために使う入出力装置のことである。

開発中にエラー情報のログを見たりすることができる。ここではJavaScriptが作用する。

Sources panel

JavaScript をデバックしたり、code editorとしてDevToolsを使うためにWorkspacesを通じてlocal fileにアクセスすることができる。

Network panel

ロードパフォーマンスをページに最適化できる。

Performance panel (previously Timeline panel)

起こったイベントを記録・調査することで、ページのランタイムパフォーマンスを改善する。

Memory panel (previously Profiles panel)

メモリー使用量を表示・漏れを探し出す。

Application panel (previously Resources panel)

IndexedDB やWeb SQL databases, local and session storage, cookies, Application Cache, images, fonts, stylesheetsなどを含むロードされたすべてのソースを検査する。

Security panel

content issuesやcertificate problemsなどをデバックする。

最後に

今回でこの記事を終了する。

今回はChrome DevToolsについて簡単にまとめた。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.