WEBプログラミング入門

Chrome

よく使うショートカット

CtrlR リロード
CtrlShiftR ハードリロード
CtrlW アクティブタブを閉じる
CtrlTab タブの切替
CtrlL アドレスバーにフォーカス
CtrlN 新しいウィンドウを開く
CtrlT 新しいタブを開く
CtrlU ソースの表示
CtrlD ブックマーク追加
CtrlF5 スーパーリロード
Ctrl押しながらリンククリック バックグラウンドでタブを開く
Shift押しながらリンククリック 新しいウィンドウでリンクを開く
CtrlJ ダウンロード履歴
CtrlH 閲覧履歴

開発中はキャッシュを無効にする

毎回スーパーリロードするのは面倒なので、開発者ツールからキャッシュを無効にする。

通常状態

Disable cache(キャッシュ無効)にチェックがついていないので、cssや画像ファイルがキャッシュされていることがわかる。

キャッシュ無効状態

Disable cacheにチェックをつけると、すべてのファイルが読み込まれていることがわかる。

低速回線をエミュレートする

電波の悪いところではまだまだ回線は遅いので、Chromeの開発者ツールで低速回線をエミュレートする。例えば当ページを普通の光回線から読み込むとロード時間は0.08秒(83ms)だがSlow 3Gにすると4.22秒(4220ms)もかかっていることがわかる。ページ読み込み時間は直帰率にかなり影響するため、低速回線での速度を確認しながらサイトをつくる必要がある。

光回線での読み込み速度
Slow 3Gでの読み込み速度

WEBサイトが更新されない場合

キャッシュが残っているとページを更新されないことがある。スーパーリロードしても変わらない場合は2次的なキャッシュも消すためのリロード方法がある。

  1. F12開発者ツールを開く
  2. リロードアイコンを右クリック
  3. キャッシュの消去とハード再読み込みを選択

開発者ツールの便利な使い方

ページ全体のスクリーンショット

f12 で開発者ツールを開き、ctrl+shift+m でレスポンシブモードにする。下記画像の"Capture full size screenshot"でページ全体のスクリーンショットが撮れる。

関連リンク