HTML document, Unicode text, UTF-8 text
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>
6
Chromium can do full-page screenshots
7
</title>
8
<link rel="stylesheet" href="/static/style.css">
9
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10
</head>
11
<body>
12
<header>
13
<a href="#main" id="skip-link">Skip navigation</a>
14
<nav>
15
<ul>
16
<li><a href="/">Home</a></li>
17
<li><a href="/projects">Projects</a></li>
18
<li><a href="/index">Index</a></li>
19
<li><a href="/about">About</a></li>
20
<li><a href="https://roundabout-host.com/roundabout">Roundabout-host</a></li>
21
</ul>
22
<ul>
23
<li><a href="mailto:root@roundabout-host.com" id="mail-link">root@roundabout-host.com</a></li>
24
</ul>
25
</nav>
26
</header>
27
<main id="main">
28
29
<h1>Chromium can do full-page screenshots</h1>
30
<div id="article-date">2025-05-04</div>
31
<p class="tags">
32
33
<a href="/index/chromium.html" class="tag">chromium</a>
34
35
<a href="/index/tips.html" class="tag">tips</a>
36
37
</p>
38
39
<figure>
40
<img src="/static/photos/chromium-screenshot.png" alt="The option to take a screenshot in Chrome DevTools" id="article-image-header">
41
<figcaption>Pictured: The option to take a screenshot in Chrome DevTools</figcaption>
42
</figure>
43
44
<article class="content-area">
45
<p>I have seen few search results for this, so I thought it would be a good idea to share what I
46
found out. By full-page screenshot I mean a screenshot that shows the page as if the viewport
47
would fit the whole content.
48
</p><p>I thought this would need extensions (of which all are nonfree, and I'm not trusting nonfree
49
extensions for obvious reasons), but it looks like Chromium has had it all this time. It's not
50
as beautiful as some other browsers, but it works.
51
</p><ol><li><p>Open the Developer Tools on the page you want to screenshot.
52
</p></li><li><p>Make sure the<em class="emphasis-1">Elements</em> pane is visible.
53
</p></li><li><p>In that pane, select the <code><html></code> opening tag, right-click and choose 'Capture node
54
screenshot'.
55
</p></li><li><p>Save the resulting image where you want.
56
</p></li></ol><p>This also works for any other HTML element, of course.
57
</p>
58
</article>
59
</main>
61
<footer>
62
<p>Page generated on Sunday, 4 May 2025 at 15:06:42</p>
63
<p xmlns:cc="http://creativecommons.org/ns#" >This work is marked with <a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC0 1.0 Universal</a> (🄍). No rights reserved.</p>
64
<p>Hosted at <a href="https://roundabout-host.com/roundabout">Roundabout-host</a> using the static site service, and generated with <a href="/projects/ampoule.html">Ampoule</a>.</p>
65
<a href="#">Back to top</a>
66
</footer>
67
</body>
68
</html>