Web開発をしていると不具合の原因を辿るために、CSSファイルを読み込ませないようにしたかったり、JavaScriptのファイルが原因なんじゃないかとファイルの読み込みを遮断したりしたい時がまぁまぁあります。
CSSファイルを一新したいときに、旧ファイルをブロックして、新ファイルの中身をデベロッパーツール上で書いてしまえば、わざわざHTMLソースから読み込み部分を消したり戻したりする手間がなくて、非常に効率的になります。
そこでデベロッパーツールで特定のファイル（CSS, JS, 画像, 動画など）をブロックしてしまおうというのが今回ご紹介する小技になります。
①デベロッパーツールを開く
これは楽に開けるTipsを下記にまとめているので、こちらを参考にしてください。
『Google Chromeデベロッパーツールのショートカットおススメ10選』
②ネットワークタブを開く
devツールを開いたら、上部に「ネットワーク」というタブがあるので、クリックして表示してください。ここには読み込み順（たぶん）に全ファイルの一覧が出て、かつ、どのタイミングで読み込まれているかを可視化してくれるパネルです。
「フィルタ」ってところに除外したいファイル名を拡張子付きで入力してEnter。
③フィルタリングされたファイル群を確認する
②で仮に「common.css」と入れた場合には、同名のファイル（パスが違うものも出てくるのでご注意を）の一覧が出てきます。
その中に今回除外したいファイルを見つけたらもうこっちのものです。
④指定ファイル（指定URL）の読み込みを除外する
該当ファイルをみつけたら、そのファイル名の上で右クリックをおしてみてください。
コンテキストメニューの中に「ブロック リクエストのURL」という項目があるので、それをクリック。
するとなんか変化がおきる、と思いきやこの段階では特に変わったところはありません。
⑤ページを更新・リロードする
④で行ったブロックしてはブラウザを更新して初めて機能するものです。
なのでブロックを指定しただけだと効力を持たないので、必ずF5でページを更新してみてください。
Ctrl+F5でも構いませんし、Ctrl + RでもOKです。とにかく更新されればキャッシュの有無は関係ありません（吉村調べ）。
⑥指定したファイルが読み込まれなくなった
この方法を使うと不具合の検証や新しいファイルへの移行作業などが飛躍的に簡単になります。
覚えておいて損はないです。どんどん切ったり読み込んだりを手軽に行うことが出来るので不具合の発見が早期に出来るのが大きなメリットの1つでしょう。
【重要】ちゃんと終わったらもどしましょう
ファイルの読み込みをブロックしたけど、そのまんまにしていると次にページにページに訪れたときにレイアウトが崩れていたり、クリックイベントが発火しなかったり、不具合祭りなので少し焦るかもしれません。結構時間が経過してから再訪したばあいなんか、何が原因で崩れているのか忘れてしまっていてパニックになる可能性もゼロではありません。
なので、読み込みを切ったらファイルのブロックを解除して、正常な状態に戻す癖をつけてください。
必要が終わったら戻す、ただこれだけです。
ちなみに戻し方は、
devツールの上側ではなく下側のタブたちの中に「ネットワーク リクエストのブロック」タブがありますので、そこをクリックして、今ブロックしているファイル（URL）を探して、一番右端にあるごみ箱アイコンをクリックしてあげましょう。当該URLは消えるはずです。そしてF5で再読み込みしてあげてください。
簡単でしょ？効率的でしょ？HTMLいじんなくても出来るなんて素敵でしょ？
どんどん使って、周りから「やるじゃん！」「俺にも教えて！」と言われてほくそ笑みましょう。
