FRONTEND DEBUG TOOL

Overflow Finder

横スクロールの原因を、一発で見つける。

NO LIBRARY
01

LIVE OVERFLOW SCANNER

はみ出し要素を赤くする

390PX —ISSUES
localhost:3000 / mobile
WAITING390PX
FIELD NOTES

LAYOUT REPORT · 068

Find what
breaks the frame.

Scroll horizontally →

01 / WIDTH: 100VW

FULL BLEED BANNERwidth: 100vw

02 / FLEX MIN-WIDTH

A
FEATURED ARTICLE

A title that should truncate inside this flexible row

03 / UNBREAKABLE TEXT

REFERENCE URL

https://example.dev/library/components/overflow/debugging/reference-2026

04 / FIXED IMAGE

赤・緑・青の幾何学模様
image width: 720px

05 / ABSOLUTE POSITION

NEW RELEASE

Positioned from the wrong edge.

↗
END OF DOCUMENT 068
VIEWPORT390px
DOCUMENT—px
OVERFLOW—px
FOUND—

検出すると、Viewportを超えた量が表示されます。

SCAN RESULT

検出結果

NOT SCANNED
⌖

「はみ出しを検出」を押すと、原因候補と修正方法を表示します。

TAKE IT WITH YOU

ブックマークレットを持ち帰る

調べたいページで押すだけ。はみ出した要素を赤枠で表示します。

このボタンをブックマークバーへドラッグ クリックすると、このページ上でも動作を確認できます。
⌖ Overflow Finder

このページ本体は横にはみ出していないため、クリック時に「0件」と出れば正常です。

  1. 01
    ブックマークバーを表示

    ブラウザのブックマークバーを表示します。

  2. 02
    緑のボタンをドラッグ

    「⌖ Overflow Finder」をバーへ移動します。

  3. 03
    調べたいページでクリック

    原因候補を赤枠で表示。もう一度押すと解除します。

ドラッグできない場合

URLをコピーし、新しいブックマークのURL欄へ貼り付けてください。

DEVTOOLS SNIPPET

検出コードを持ち帰る

DetectorはDevToolsのConsoleで実行できます。内部スクロール領域は対象要素に置き換えてください。

DEBUGGING METHOD

消す前に、測る

  1. 01
    ViewportとDocumentを比較

    `scrollWidth`が`clientWidth`より大きければ、横方向の超過があります。

  2. 02
    外へ出た要素を抽出

    `getBoundingClientRect()`で左右の端を調べ、原因候補を絞ります。

  3. 03
    原因に合わせて直す

    `100vw`、`min-width`、折り返し、画像、位置指定を順に確認します。