Chrome DevTools | Web | Google Developers

Shuma Mizuno
Sep 7, 2018 · 3 min read

学習日: 180907
所要時間: 5分

Chrome DevTools

Chromeのデバッグツールのセット。

Chrome DevTools を開く

Cmd+Opt+i

パネルの概要

Device Mode

Device Mode を使用して、レスポンシブなモバイル ファーストのウェブ エクスペリエンスを構築します。

Elements

[Elements] パネルでは、DOM と CSS を自由に操作してサイトのレイアウトやデザインを反復処理できます。

Console

[Console] では、開発中に診断情報を記録したり、その情報をシェルとして使用してページ上の JavaScript を操作したりできます。

Sources

[Sources] パネルでブレークポイントを使用して JavaScript をデバッグしたり、ワークスペース経由でローカル ファイルを接続して DevTools ライブエディタを使用したりできます。

Network

[Network] パネルでは、リクエストされたリソースやダウンロードされたリソースを詳しく分析したり、ページの読み込みパフォーマンスを最適化したりできます。

Timeline

[Timeline] では、サイトのライフサイクル中に発生するさまざまなイベントの記録や調査によってページの実行時パフォーマンスを向上できます。

Profiles

[Profiles] パネルは、メモリリークの追跡などのために、[Timeline] で提供される情報よりさらに多くの情報が必要な場合に使用します。

Application

[Resources] パネルでは、IndexedDB や Web SQL データベース、ローカル ストレージやセッション ストレージ、Cookie、アプリケーション キャッシュ、画像、フォント、スタイルシートなど、読み込まれたすべてのリソースを調査できます。

Security

[Security] パネルでは、混合コンテンツの問題、証明書の問題などをデバッグできます。

質問事項

特になし

所感

特になし

    Shuma Mizuno

    Written by

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade