Chromeのデベロッパーツールで左側の枠線が消える場合の対処法

デベロッパーツールの左側の枠線が消える

先週仕事中に部下からSlackで以下のようなメッセージが来た。

Chromeデベロッパーツールの左側の枠線が消えて
Webページと同化してしまうのですが
どうすれば解決できますか？😭

画面のスクリーンショットも送信してもらったら、下図のようになっていた。

確かに通常はあるはずの左側の枠線が消えてWebページと同化してしまっている。

本来は左側にこのような枠線が付きます。

枠線がないとWebページとの境界線がわからなくなるので、作業をするには不向きです。

この左側の枠線が消える原因は、デベロッパーツールが「表示 -> 縮小」によって縮小表示され、その結果、枠線部分が描画されなくなったためです。

デベロッパーツールの表示幅によっては、縮小表示だと描画時の処理の影響で枠線が消えてしまう場合があるのです。

そのような設定を意図していない場合でも、「表示 -> 縮小」のショートカットキーがMacでは「command + -」であるため、誤ってこのショートカットキーを押し、縮小してしまった可能性が高いです。

解決方法としては、デベロッパーツールをアクティブにした状態で「表示 -> 実際のサイズ」を選択するか、または「command + 0」のショートカットキーを実行することで、元の状態に戻ります。