DevTools

  • How to Take a Full Page Screenshot in Chrome Without Extensions

    How to Take a Full Page Screenshot in Chrome Without Extensions

    There are many times when you need to save an entire scrolling webpage or long news article. Most people search for browser extensions or download third-party screen capture tools. However, Google Chrome has a built-in feature that lets you capture an entire page in about three seconds.

    At a Glance

    • Open DevTools: Press F12 or Ctrl + Shift + I (Mac: Cmd + Option + I)
    • Open Command Menu: Press Ctrl + Shift + P (Mac: Cmd + Shift + P) and type full
    • Select Capture full size screenshot: The full page saves automatically as a .png file in your Downloads folder
    • Works identically in both Google Chrome and Microsoft Edge

    Take a Full Page Screenshot with Two Shortcuts (No Software Needed)

    Take a full page screenshot with two shortcuts without installing programs

    Much like unrolling a scroll of paper to photocopy the whole sheet at once, Chrome DevTools lets you capture an entire webpage all the way to the bottom. This feature also works in Chromium-based Microsoft Edge.

    The workflow is simple: open DevTools, call the Command Menu, and trigger the capture command.

    StepWindows / Linux ShortcutmacOS ShortcutAction
    Step 1F12 or Ctrl + Shift + ICmd + Option + IOpen Chrome DevTools
    Step 2Ctrl + Shift + PCmd + Shift + POpen Command Menu
    Step 3Type screenshot or fullType screenshot or fullSelect Capture full size screenshot

    Once selected, the browser renders the full page—including content outside the current viewport—into a single .png file and saves it straight to your default Downloads folder.

    Related Reads
    크롬에서 갑자기 소리 나는 탭, 1초 만에 끄는 방법은?
    크롬 탭 그룹 만들기, 수십 개 열린 창 1초 만에 깔끔하게 정리하는 법은?

    4 Built-in DevTools Screenshot Modes for Different Needs

    4 built-in DevTools screenshot modes for different needs

    Chrome’s Command Menu includes four screenshot options depending on what area you need to capture.

    Screenshot ModeCommand LabelDescription
    Capture full size screenshotCapture full size screenshotCaptures the complete page down to the very bottom
    Capture screenshotCapture screenshotCaptures only the currently visible viewport
    Capture area screenshotCapture area screenshotCaptures a custom rectangular area dragged with your mouse
    Capture node screenshotCapture node screenshotCaptures only the specific HTML element selected in the Elements panel

    Use Capture node screenshot when you want to isolate a single table, image card, or container. Use Capture screenshot if you only need what is currently visible on your display.

    Tips and Precautions for Clean Full-Page Captures

    Tips and precautions for clean full-page captures

    Pages that use lazy loading—where images only load as you scroll past them—need a quick manual scroll first. Scroll all the way to the bottom and back to the top before capturing to ensure every image loads properly without leaving blank placeholders.

    The resulting capture downloads directly as a file. Native DevTools screenshot commands currently do not copy the image directly to your clipboard.

    Websites with sticky or fixed navigation headers can sometimes render headers repeatedly or glitch depending on how their CSS is configured. Check the saved image after downloading to ensure the layout rendered cleanly.

    Try it now on this page: press F12, press Ctrl + Shift + P, and search for full.

    함께 읽으면 좋은 글

    참고자료

    1분 요약 영상