Chrome DevToolsを使用すると、コードの変更による影響をすぐに確認できます。
ChromeDevToolsは GoogleChromeに組み込まれているウェブサイト作成およびデバッグツールのセット。 もちろん、私たちもそれらを使用することができます オープンソースバージョン。 クロム。
Ctrl + Shift + Iのキーの組み合わせを押すか、要素にカーソルを合わせて[検査]を右クリックすることで、開発者向けのChromeツールにアクセスできます。
コンポーネント
Chrome DevToolsを開くと、uが表示されていることがわかります閲覧しているページの右側にあるnパネル。 その一部として、このパネルe各ツールに対応するタブに分かれています。 次に、ツールはセクションに分割されます。
セクションは次のとおりです。
- 要素：ページのさまざまなコンポーネントを表示します。
- コンソール：Linuxターミナルの場合と同じように、開発中に診断を実行したり、Javascriptコードを操作したりできます。
- ソース：Javascriptコードのデバッグとローカルファイルの操作を簡単にします。
- ネットワーク：ページのパフォーマンスを監視および改善するのに役立ちます。
- タイムライン：サイトへの訪問中に発生するさまざまなイベントの記録と調査を可能にします。
- アプリケーション：ロードされているすべてのリソースを調査します。 特に、IndexedDBまたはWeb SQLデータベース、ローカルおよびセッションストレージ、Cookie、アプリキャッシュ、画像、フォント、スタイルシート。
- セキュリティ：コード内のセキュリティ問題を検出します。
ChromeDevToolsを何に使用できるか見てみましょう
動作しないものを修正する
それはすべての開発者に起こりました。 コードを記述し、エラーがないことを確認しますが、実際のところ、ページは正常に機能しません。 コンソールツール 実行時に発生しているエラーを示します。
読み込み時間を短縮します
ページの読み込みに時間がかかると、ユーザーは疲れて別のサイトに移動します。 幸いなことに、FlashWebサイトとそのアニメーション化されたイントロの時代は終わりました。 とにかく、ChromeDevToolsの[ネットワーク]タブ どの要素がロードを遅らせているかを簡単に見つけることができます。 さまざまな接続速度でテストを繰り返すことができます。
コードを変更する
[要素]タブでは、次のことができます ページの要素、関連するhtmlコード、およびcssプロパティを参照してください。 それらを変更することもできます。
コマンドを使用してページのテキストを編集できます
document.designMode = 'on';
さまざまな画面サイズを試してください
タブレット、スマートフォン、スマートTV、デスクトップコンピューター。 私たちがインターネットをサーフィンするデバイスのリストは増え続けています。 Chrome DevToolsを使用すると、次のことができます ページがさまざまなサイズで見栄えがするかどうかをテストします。
ベンチマーク
管理において、ベンチマークという用語は、私たちと同じことをする人々のベストプラクティスから学ぶことを意味します。 Chrome DevTollsを使用すると、ウェブサイトのデザインが気に入った場合に次のことができます。 htmlコードとcssスタイルシートを表示し、それらを当社のサイトにコピーします。
ChromeDevToolsの入手
Chrome DevToolsは、GoogleChromeおよびChromiumブラウザで利用できます。 クロムは主要なディストリビューションのリポジトリにあります。 の店舗からもインストールできます スナップ。 グーグルクロームに関してはあなたがすることができます ここへ到着する。 DEBおよびRPM形式