《Bubble》検証ツールの使い方

　今回は検証ツールの使い方について解説していきます。

Chromeでは「検証」、Microsoft Edgeでは「開発者ツール」と書いてありますが使い方は同じです。

BubbleであればPreview画面で右クリックをして「開発者ツールで調査する」というタブから、もしくはショートカットキー「Ctrl+Shift+I」で起動することができます。

ウェブサイトでも同じように使用することができます。

💡主な使用目的

▪ ウェブサイトのHTMLやCSSのソースコードの確認・編集

▪ ウェブサイトのパフォーマンスの最適化

▪ ウェブサイトのデバッグ

▪ ネットワークのモニタリング

検証ツールの使い方

インスペクトモード

　一番左にあるアイコンを選択するとインスペクトモードになります。

インスペクトモード起動後、ウェブページ上の要素をクリックすることで、選択された要素が要素タブに表示され、詳細を確認できます。

要素タブ

　要素（Elements）タブは、HTMLやCSSの確認または編集する機能があり、ウェブページの構造やスタイルを確認できます。

上部に表示されているHTML要素をダブルクリックすると、その要素を自由に編集することができ、その下にあるスタイルタブではCSSのスタイルを編集できます。

計算済み（Computed）タブでは、選択した要素に適用されている実際の CSS プロパティの値を確認できます。

ネットワークタブ

　ネットワークタブでは、ネットワークリクエストの詳細情報が表示されます。

ページの読み込み状況や、読み込みに対して容量や時間がどれだけかかったかなどが視覚的に確認できます。

デバイスエミュレーションの切り替え

　インスペクトモードの右にあるアイコンを選択すると表示デバイスの変更ができます。

自分の好きなように表示サイズを変更することができるうえに、既存デバイスのプリセットがあり、それぞれのサイズに簡単に切り替えることができるのでレスポンシブ対応をする場合に便利な機能となっています。

まとめ

　今回は検証ツールのなかでも、Bubbleで開発をするうえで主に使用する機能を解説しました。

デバッグに関してはBubbleのPreview画面で使える「inspect」という機能のほうが簡単に使えてわかりやすいです。