目次
- ChromeのDevtoolとは
- Devtool起動
- Elementsタブ
- Consoleタブ
- Source
- Networkタブ
- Performance/Memory/Appllication/Securityタブ
- Vue.js devtools
ChromeのDevtoolとは
- DevTools (デベロッパーツール、開発者ツール) とは、Webブラウザに付属している開発ツールです。
- Html Domやスタイルなどが確認できます。
- Javascriptデバッグが確認できます。
- Websiteに関連するAPIや通信などが確認できます。
- ...
- いろいろな出来ます。
→ 今回Devtoolの使い方を説明しながら、フロントエンド開発するときによく使うDevtool機能を紹介したいと思います。
→ 自分の経験なので、間違ったら是非教えてください。 何か足りなければ、是非を教えてください。
ChromeでDevtool起動
- Mac: Command+Option+I
- Windows: F12 or Control+Shift+I
- 右クリック → 検証
Elementsタブ
- HTMLのDOMとスタイルが見えて、編集できます。
- スタイルComputedは今現れるElementのスタイルです。
- Elementに関しては、Path/Js Selector/スタイルをコピーできます。
Consoleタブ
- JSのError/Warning/Infoが確認できます
- JS実行できますので、いつでも確認できます。
Source
- ソースが見えます
Elements+Console+Sourceでデバッグすること
- console.log: メッセージをConsoleで出すこと
- debugger: JSの実行はdebuggerに止まる
- breakpoint: sourceにbreakpointをチェックして、JSの実行はbreakpointに止まる
- デバッグの時に、consoleタブでJSコード実行できるし、変数の値が見えます
Networkタブ
- リクエストが見えます
- リクエストごとに、Header/Params/Responseが見えます
- データ量が確認できます
- リクエスト時間が確認できます
- Postmanと一緒に使って、リクエストを再現できます。
Performance/Memory/Appllication/Securityタブ
- あまり使わないので、説明できません。
Vue.js devtools
- Vue Componentのデータが見えます
- Vuexのデーターが見えます
Chrome Task マネージャー
- 現在どのぐらいメモリー使われているのは分かります。