WEBデザイン

WEB制作に役立つ!chromeのデベロッパーツールの便利な機能

web制作をしている方はソースの確認などで、chromeのデベロッパーツールを使うという方が多いと思います。chromeのディベロッパーツールにはソースの確認以外にもWEB制作に役立つ機能がたくさんあるのでご紹介します。

chromeデベロッパーツールの基本

chromeのディベロッパーツールは、ブラウザ右上の[・・・]→「その他のツール」→「デベロッパーツール」から使用できます。

ショートカットなら

Windows : F12 または Ctrl + Shift + I
・ Mac: command + option + I

となります。

デバイスを切り替え

各デバイスの画面サイズに表示画面を切り替えます。landscapeモード(横)、portraitモード(縦)にも切り替え可能です。また、任意のサイズを設定することも可能です。

コーディングのデバイスチェックに便利です。

minify(ミニフィ)されたソースを読みやすい形式に戻す

ソースの左下あたりにある「{ }」を押すと、minify(ミニフィ/余計な空白や改行を除去した状態)されたCSSやJSファイルを、読みやすい形式に戻すことができます。

疑似的に回線速度を変える

「Network」タブの「Online」から疑似的に回線速度シミュレートできます。コンテンツの重さチェックや、ローディングの動作確認などに便利です。確認したら忘れずに元の「Online」に戻しましょう。

カラーピッカーを使い色を抽出する

CSSソースの「■」のカラーをクリックするとカラーピッカーが開きます。それをコンテンツの任意の部分に合わせると、色値を抽出できます。

Visual Studio Code(VScode)のインストール、日本語化とWeb制作向けオススメ拡張機能
Vue.jsサンプル、実例まとめサイト


-WEBデザイン

© 2020 MUKOLOG