WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： マークアップ >作業効率化

Chromeのデベロッパーツールは制作者にとって欠かせないツールですよね。
本日はそのデベロッパーツールの覚えておくと便利な機能を3つ、厳選してご紹介いたします。

速度チェック

こちらの機能は以前にブログに載せているので、詳しい内容はこちらのページからご確認ください。
ローカル環境でもチェックできるというところが重要なポイントです！

使い方

1. Performanceタブを開く
   
2. 更新ボタンをクリック
   

リフレッシュ時も継続してログを保存する

Consoleにある「Preserve log」という設定にチェックを入れる事で、ページのリフレッシュが必要なWebサイトの問題をデバッグする時に、ログを保存したままデバッグ作業が可能になります。

使い方

1. Consoleタブを開く
   
2. 歯車のマークから設定を開き、「Preserve log」をチェック
   

圧縮されたJavaScript・CSSを読みやすくする

デバッグ作業の時にファイルが圧縮されていると、非常に読み取りづらいですよね。
実はデベロッパーツールですぐに読み取りやすく変換する事ができます。
ブラウザツールでわざわざ変換する必要がないので、その場ですぐに確認できるのも非常に助かります。

使い方

1. Sourcesタブを開き、対象のファイルを選択する
   
2. 左下にある「｛｝（Pretty Print）」のマークをクリック
   

   「｛｝（Pretty Print）」マークをクリックすると下記の図の様に形成されます。
   

終わりに

今回紹介したデベロッパーツールは以前からある機能ですが、意外と知らない人が多かったので、ぜひこの機会に試してみて下さい。
Chromeの更新があった時は、デベロッパーツールの更新内容も合わせてチェックする事をおすすめします！
今後、デベロッパーツールで編集したCSSがその場で一時保存されるようになると、CSSのデバッグや打ち合わせ時に便利ですよね。