BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » スタッフ» Googleクロームの新機能について

このエントリーをはてなブックマークに追加

Googleクロームの新機能について

   投稿日: 2017/06/22    投稿者:スタッフ

こんにちは!

 

今回は、Googleのデベロッパーツールのことを書いていこうと思います。

 

皆さんはデベロッパーツールのことをご存知でしょうか。

Googleクロームですと、キーボードの「F12」を押すと立ち上げることができます。

web制作を行っている方ならきっと知っていると思いますが、とっても便利なツールですよね。

 

例えば、スマホデバイスの見え方を確認できたり、

例えば、その場でソースコードを変えた場合の挙動を見ることができたり...と、

 

本当にweb制作を助けてくれるたいへん便利なツールだと思います。

 

そのGoogleクロームが6/5にリリースした最新のバージョン59から、さらに便利な機能がデベロッパーツールに追加されました。

 

追加された昨日はこちら。

 

★ページの軽量化: 未使用のCSSとJavaScriptを見つける

★フルサイズのスクリーンショットをキャプチャ

★リソースのロードをブロック

★非同期コードの検証

★コマンドメニューの統一

 

この中でも今回は1番目の、ページ軽量化の部分を説明します。

 

①    まずはブラウザ上でいつも通り「F12」キーを押してデベロッパーツールを立ち上げます。

 1498123665677.jpg

 

 

②    「Ctrl」+「Shift」+「P」を押し、「Show Coverage」を入力して選びます。

※Macの場合は「command」キーになると思います。

 1498123768257.jpg

 

③    ページを再読み込みします。

すると、タブに使用されたコードの量と、ロードされた量が表示されます。

 1498123836082.jpg

 

 

コードの重さも分かるので、不必要なコードは削除することでページの軽量化になるということです。

 

 

いかがでしたか?

こういった細かい点をメンテナンスしていくことで、ページの軽量化が出来ていくのだと思いますので、たまにはサイトをメンテナンスしてみてくださいね!

 

 

カテゴリ:

TOPへ