Recommended Free Tools
Start by reproducing the problem in the browser, then use Chrome DevTools to follow the evidence: check Console errors, inspect the related request in Network, review browser-detected problems in Issues, and use Lighthouse or a Performance trace for slow pages. This sequence helps narrow down whether a symptom comes from page code, a missing resource, a browser policy, or work that needs investigation on the server.
Start with a reproducible symptom
Before changing code, record the page, the action that triggers the problem, the browser, and whether it happens during the initial load or after an interaction. Reproduce the issue with Chrome DevTools open. If it occurs during page load, reload the page while DevTools is open; doing so can expose additional browser-reported issues.
Chrome DevTools is built into Chrome and includes tools for inspecting network activity and troubleshooting web applications. Chrome DevTools
Follow a browser-first debugging workflow
- Reproduce and describe it. Note the URL, steps, browser, and exact symptom. A failure that only follows a click or form submission may have a different cause from one that appears on every load.
- Read Console messages. Open the Console, reproduce the issue, and inspect errors and warnings. Use the source link and call stack to find the associated code. A message is a lead, not proof that it is the only cause. Chrome’s Console guidance explains that browser and site code can produce messages and that errors can link to their source.
- Inspect the related request in Network. Find the image, script, stylesheet, document, or API request associated with the symptom. Check its HTTP status and loading details, then compare those findings with the Console message. The Network panel records page network activity and response codes. Inspect network activity in Chrome DevTools
- Review Issues. Expand each relevant entry, read its explanation, and follow links to affected resources. Reload the page with DevTools open if you need to reveal additional issues. Chrome documents issue families such as cookies, mixed content, CORS, stylesheet loading, and Content Security Policy; the issues shown can vary by Chrome version. Chrome DevTools Issues
- Measure slow pages. Run Lighthouse to create an audit and a baseline. For detailed performance diagnosis, record a Performance trace and inspect recorded main-thread and network activity. Chrome recommends Performance for in-depth investigation. Lighthouse in Chrome DevTools · web.dev: Web performance
- Escalate with evidence. If the browser evidence points upstream to a server or hosting issue, take the URL, timestamp, request status, and browser error to the documentation for the site’s server or hosting platform. DevTools can help locate the failing request, but the correct infrastructure-side fix depends on that environment.
Debug common website symptoms
JavaScript errors or broken interactions
Look for Console errors immediately after reproducing the failure. Follow a source link or call stack to the code associated with the message, then check whether the error appears on load or only after a particular action. If the page reports no relevant error, inspect the requests triggered by that action in Network; a failed API response can break an interaction even when the visible symptom looks like a script bug.
Free tools Windows power users keep installed
One-click scans. No signup required.
Missing images, scripts, stylesheets, or API responses
Find the resource in Network and inspect its status and loading details. A 404 means the requested resource could not be found. Check the requested path, then investigate the relevant code and deployment or resource configuration in the server environment. For other unsuccessful statuses, use the response and request details to determine which system needs attention rather than assuming every failure has the same cause.
Cookie, mixed-content, CORS, CSP, or stylesheet warnings
Use Issues to read the browser’s contextual explanation and identify affected resources. The panel can connect a warning to the resource involved, which is more actionable than treating the warning as a generic page error. Exact issue types may change across Chrome versions.
Slow page loads
Use Lighthouse for an audit and a broad baseline; it covers performance as well as accessibility, best practices, and SEO. Use a Performance trace when you need to investigate recorded page activity in more detail. Compare runs under consistent conditions, keeping the page and browser state and any throttling setup the same, so you can judge whether a change affected the result.
Lighthouse audit errors
If an audit itself errors, try a clean Incognito window with no other tabs open. Chrome’s Lighthouse guidance suggests this as a way to check whether extensions are interfering with the audit environment. It is a troubleshooting step for running the audit, not a fix for the website. Lighthouse troubleshooting
Choose the right tool: Lighthouse or Performance
| Tool | Best for | What it helps you inspect |
|---|---|---|
| Lighthouse | A broad audit and a baseline for comparison | Performance, accessibility, best practices, and SEO |
| Performance | In-depth performance debugging | Recorded activity, including main-thread and network work |
Use the same page and browser conditions when comparing runs. A Lighthouse audit is broader; a Performance trace is the better next step when you need to investigate recorded activity in depth.
Or skip the browser setup
For capturing a page as evidence or checking how it renders, ScreenshotNeo is a website screenshot API and MCP server. It does not replace DevTools for inspecting Console errors, request status, or Performance traces. One GET request can return a screenshot or PDF; this cURL example saves a WebP capture:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Before capture, it can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots a month without a card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card required.
Frequently Asked Questions
Does a Console error prove that it caused the visible problem?
No. Treat it as a lead, then correlate it with the relevant request, source location, and the action that reproduces the symptom.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Can Chrome DevTools identify every server or hosting fix?
No. It can provide browser-side evidence such as a failed request and its status, but the appropriate infrastructure fix depends on the site’s server and hosting environment.
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.
