What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use Puppeteer’s page.tracing.start() and page.tracing.stop() to record the slow navigation or interaction, then open the resulting trace in Chrome DevTools’ Performance panel. The trace shows where recorded browser work occurred; use it to form a cause hypothesis, change one thing, and capture again under the same conditions.
Choose the right moment to record
First make the slowdown repeatable. Keep the URL, actions, browser conditions, and test data as consistent as practical between captures. Decide whether the delay happens while navigating and loading, or after the page is already running:
- Navigation or load: record the page load and inspect loading behavior.
- Runtime interaction: record the activity triggered by an action on an already-running page, such as opening a menu or submitting a form.
Chrome DevTools distinguishes load and runtime recordings and recommends recording an issue once it can be reproduced consistently. See the Performance recording guidance.
Capture a Puppeteer trace
Start tracing immediately before the navigation or interaction you want to inspect, then stop as soon as that interval is captured. This minimal Node.js example writes the trace to trace.json:
#1 Best Overall
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.tracing.start({ path: 'trace.json' });
await page.goto('https://example.com'); // Or perform the interaction being investigated.
await page.tracing.stop();
await browser.close();The example assumes puppeteer is installed and available in your project. For an interaction instead of navigation, load the page before starting the trace, start tracing immediately before the action, perform it, and stop tracing afterward. Puppeteer documents the start/navigate/stop pattern in its Tracing class reference.
Only one trace can be active at a time per browser. Avoid overlapping trace sessions in scripts that reuse a browser. If you omit path, tracing.stop() can return the trace as a Uint8Array rather than writing it to a file.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Configure tracing only when needed
The TracingOptions interface provides these relevant options:
| Option | What it does | Default or practical note |
|---|---|---|
path |
Writes the captured trace to a file. | Optional; without it, stop() can provide trace bytes. |
categories |
Controls which tracing categories are included or excluded. | A category prefixed with - is excluded. Use this when you need to narrow or tailor the trace. |
screenshots |
Includes screenshots in the trace. | Defaults to false. |
bufferSize |
Sets the trace buffer size. | Puppeteer documents a default of 200 MB (200,000 KB) when omitted or set to zero. |
Use options to answer a specific debugging question rather than adding capture detail without a reason. The exact option definitions are in Puppeteer’s TracingOptions reference.
Rank #3
Open and read the trace in Chrome DevTools
- Open Chrome DevTools and select the Performance panel.
- Load
trace.jsoninto the panel using its trace-open or import control. - Zoom into the interval where the page or interaction felt slow. Inspect the main-thread activity and relevant performance markers in that interval.
- Switch among the analysis views below to distinguish root activity, direct time sinks, and event order.
| Performance view | Use it to answer |
|---|---|
| Call tree | Which root activities account for substantial work, including work beneath them? |
| Bottom-up | Which activities consumed time directly? |
| Event log | In what order did the recorded events occur? |
Compare Self Time with Total Time. Self Time is time spent directly in an activity; Total Time includes its children. A large Total Time relative to Self Time points you toward costly descendants, while substantial Self Time indicates the activity itself is a direct time sink. These are complementary views of the same recording, not separate tracing tools. Chrome explains them in its Performance features reference.
Turn a trace into a useful debugging test
- Identify the slow interval and the activity that stands out in the relevant view.
- Write down a specific hypothesis about what behavior or code might account for that activity.
- Change one likely cause, leaving the reproduction conditions as consistent as possible.
- Capture another trace and compare the same interval and views.
A trace is a diagnostic lead, not proof of the underlying cause or a representative measurement of real-user speed. The act of recording is instrumented, and advanced paint instrumentation is specifically described by Chrome as slow and significantly performance-hindering. Do not treat the duration of one instrumented capture as a clean end-user speed result; validate a suspected cause by changing the behavior and capturing again.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Troubleshoot common capture and analysis problems
| Symptom | Likely cause | What to do |
|---|---|---|
| The trace does not represent the slow behavior. | Tracing began after the navigation or interaction, or stopped before the relevant interval. | Start just before the behavior under investigation and stop just after it. Reproduce the same URL and actions. |
| The problem is inconsistent between captures. | The slowdown is not yet reliably reproducible, or test conditions differ. | Stabilize the reproduction and keep browser conditions, actions, and test data as consistent as practical before comparing traces. |
| A second tracing start fails or conflicts with the first. | A trace is already active in that browser. | Stop the active trace before starting another; Puppeteer allows only one active trace per browser. |
| No trace file appears where expected. | No path was supplied, or the output path is not the location being checked. |
Set path to the desired file path, or handle the bytes returned by tracing.stop() when no path is specified. |
| The trace is too large or misses useful detail. | The selected categories or buffer configuration do not fit the question. | Review categories and bufferSize in the Puppeteer options reference; capture only the interval and detail needed for analysis. |
| The capture seems much slower than normal use. | Instrumentation adds overhead; advanced paint instrumentation can significantly hinder performance. | Use the capture to locate work, not as an end-user speed benchmark. Validate with a targeted change and a repeat capture. |
Protect trace files before sharing them
Treat traces and diagnostic logs as potentially sensitive. Chrome notes that exported traces containing script contents or source maps could include user-specific secrets injected by a server in some circumstances. Puppeteer also warns that protocol logs may contain sensitive information. Review artifacts and remove or restrict access to them before sharing. See Chrome’s guidance on saving and sharing performance traces and Puppeteer’s debugging guide.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a clean page screenshot rather than a performance trace, ScreenshotNeo captures a website with one GET request. Its API does not produce Puppeteer performance traces or replace DevTools for diagnosing slow browser work.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallcurl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Before capture, it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response indicates the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000.
Sign up for 1,000 free screenshots a month with no card.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
