Blog スタッフブログ

こんにちは、株式会社MIXシステム開発担当のBloomです。

今回は初心に立ち帰り、Web開発時に有用なChrome開発者ツール、Chrome DevToolsの使い方を再確認していこうと思います。

要素のレイアウトがおかしい時

Webページを確認していると、余白が広すぎたり要素が横にはみ出していたり表示崩れが発生している時があります。そのような場合はまず Elements(要素) パネルを確認します。

画面上の気になる部分を右クリックして「検証」を選択すると、その要素のHTMLとCSSを確認できます。

右側にある「スタイル」ではその要素に適用されているクラスを、「計算済み」では計算した結果によって適用されたレイアウトを視覚的に確認することができます。

この画面上から直接クラスを編集することもできるので画面を確認しながらの調整に適しています。更新操作でリセットされるため上手く活用しましょう。

スクリプトのコードパスがわからない

JavaScriptの処理を追っていると関数の呼び出し元が不明だったり、if文の中に本当に入っているかわからなかたり、値の変化タイミングを知りたい場面があります。このような場合は、Sources(ソース) パネルを使います。

Sourcesパネルでは読み込まれているJavaScriptファイルを確認し、処理の途中で一時停止できます。

確認したい行をクリックすると、青色のブレークポイントを設定できます。
その状態で画面操作を行うと、該当行で処理が止まり、変数の中身や処理の流れを確認できます。

処理が止まった状態では、次の行へ進めたり、関数の中に入ったり、呼び出し元へ戻ったりできます。

また、「特定の値に変化したタイミングだけ止めたい」という場合は、ブレークポイントに条件を設定することも可能です。右側で設定したブレークポイントが一覧で表示されているので、そこからペンマークの編集ボタンをクリックし条件を設定しましょう。

スマートフォン表示を確認したい

PCでは問題なく見えていてもスマホ幅にするとレイアウトが崩れることがあります。確認したいときはDevToolsの Device Mode を使います。

「要素」の左側にあるボタンをクリックすることでスマートフォン表示をエミュレートして確認することが可能です。画面幅を指定したり代表的な端末サイズを選択することもできますが、あくまでもエミュレーションなので実際の表示は実機から確認しましょう。

これで最低限の使い方を復習できました。良かったですね。