When I use AI coding tools like Claude, Codex, Cursor, or similar agents, one of the most frustrating problems is this:<\/p>\n\n\n\n
\nThe AI can read the code, but it often fails to understand what is actually happening in the browser.<\/p>\n<\/blockquote>\n\n\n\n
This becomes painful during frontend work. The AI says \u201cfixed,\u201d but the UI is still broken. It says \u201ctested,\u201d but it never opened the page. It changes CSS blindly. It misses console errors. It ignores failed API requests. It fixes desktop layout but breaks mobile. Sometimes it just guesses.<\/p>\n\n\n\n
This is not only an AI problem. It is a workflow problem.<\/p>\n\n\n\n
The correct solution is not to keep saying:<\/p>\n\n\n\n
\n\u201cClaude, please check the browser.\u201d<\/p>\n<\/blockquote>\n\n\n\n
or:<\/p>\n\n\n\n
\n\u201cCodex, analyze this screenshot.\u201d<\/p>\n<\/blockquote>\n\n\n\n
The better solution is:<\/p>\n\n\n\n
\nGive the AI browser evidence.<\/p>\n<\/blockquote>\n\n\n\n
That means screenshots, console logs, network failures, viewport data, accessibility reports, Lighthouse reports, waterfall data, and bug recordings.<\/p>\n\n\n\n
This tutorial explains the complete workflow I recommend for vibe coding, browser debugging, screenshot work, frontend verification, and AI-assisted development.<\/p>\n\n\n\n
\n\n\n\n1. The Real Problem<\/h1>\n\n\n\n
The main problem is simple:<\/p>\n\n\n
Claude\/Codex can read files, but may not actually see the rendered browser.\n<\/code><\/span><\/pre>\n\n\nWhen working on a web application, the source code is only half the truth. The browser shows the real truth.<\/p>\n\n\n\n
A frontend bug may come from:<\/p>\n\n\n
CSS cascade\nResponsive breakpoint\nJavaScript runtime error\nFailed API call\nMissing environment variable\nWrong route\nBroken image path\nAuthentication failure\nHydration issue\nLayout shift\nSlow-loading resource\nBlocked script\nWrong z-index\nModal overlay issue\nMobile viewport problem\n<\/code><\/span><\/pre>\n\n\nThe AI may inspect the source code and assume everything is fine. But the browser may show a completely different story.<\/p>\n\n\n\n
That is why AI coding agents often fail in UI work.<\/p>\n\n\n\n
\n\n\n\n2. Problems We Identified<\/h1>\n\n\n\n
Problem 1: AI cannot reliably access your browser<\/h2>\n\n\n\n
Your browser may be open on your laptop, but Claude\/Codex may be running in:<\/p>\n\n\n
A cloud workspace\nA sandbox\nA container\nA remote coding environment\nA browser session without your login\n<\/code><\/span><\/pre>\n\n\nSo even if you say:<\/p>\n\n\n
Check<\/span> localhost<\/span>:3000<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nthe agent may not actually be able to access it.<\/p>\n\n\n\n
This is very common with local apps.<\/p>\n\n\n\n
\n\n\n\nProblem 2: Localhost is not always visible to the AI<\/h2>\n\n\n\n
Your app may run at:<\/p>\n\n\n
http:\/\/localhost:3000<\/span>\nhttp:\/\/127.0.0.1:3000<\/span>\nhttp:\/\/localhost:5173<\/span>\nhttp:\/\/localhost:4321<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nBut if the AI agent is not running in the same machine or container, it cannot open that URL.<\/p>\n\n\n\n
This is why the agent may say:<\/p>\n\n\n
I cannot access the page.\n<\/code><\/span><\/pre>\n\n\nor worse:<\/p>\n\n\n
I checked it.\n<\/code><\/span><\/pre>\n\n\nwhen it actually did not.<\/p>\n\n\n\n
\n\n\n\nProblem 3: Screenshots alone are useful but incomplete<\/h2>\n\n\n\n
A screenshot helps the AI see visual issues, but it does not show the full technical context.<\/p>\n\n\n\n
A screenshot cannot show:<\/p>\n\n\n
Console errors\nNetwork failures\nAPI response status\nDOM state\nCSS computed styles\nMissing JavaScript bundles\nCORS errors\nAuthentication redirects\nSlow-loading resources\nUser action sequence\n<\/code><\/span><\/pre>\n\n\nSo screenshots are good, but not enough.<\/p>\n\n\n\n
\n\n\n\nProblem 4: AI agents sometimes pretend verification happened<\/h2>\n\n\n\n
This is one of the biggest issues.<\/p>\n\n\n\n
An AI agent may say:<\/p>\n\n\n
Done\nTested\nVerified\nLooks good\n<\/code><\/span><\/pre>\n\n\nBut it may have only inspected source files.<\/p>\n\n\n\n
For frontend work, that is not enough.<\/p>\n\n\n\n
A real verification should include at least:<\/p>\n\n\n
Open the page in<\/span> a browser\nCheck screenshot\nCheck console<\/span> errors\nCheck failed network requests\nCheck desktop\/tablet\/mobile layout\nConfirm the issue is fixed\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nWithout browser evidence, \u201cdone\u201d is weak.<\/p>\n\n\n\n
\n\n\n\nProblem 5: Public pages and private pages need different workflows<\/h2>\n\n\n\n
There are two categories of pages.<\/p>\n\n\n\n
Public pages<\/h3>\n\n\n\n
Example:<\/p>\n\n\n
A website page available on the internet\nA landing page\nA blog page\nA product page\nA hospital listing page\nA marketing page\n<\/code><\/span><\/pre>\n\n\nThese can be tested using online tools like WebPageTest, PageSpeed Insights, GTmetrix, DebugBear, Lighthouse, and similar tools.<\/p>\n\n\n\n
Private\/local pages<\/h3>\n\n\n\n
Example:<\/p>\n\n\n
localhost app\nAdmin dashboard\nLogged-in user area\nKeycloak-protected<\/span> page\nInternal staging app\nPatient dashboard\nPrivate<\/span> CRM\nDeveloper preview\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nThese cannot always be tested by public tools.<\/p>\n\n\n\n
For private\/local pages, you need browser automation or a browser extension.<\/p>\n\n\n\n
\n\n\n\n3. The Core Idea: Browser Evidence, Not Browser Guessing<\/h1>\n\n\n\n
The best workflow is:<\/p>\n\n\n
Do not ask AI to guess from<\/span> code.\nGive AI real browser evidence.\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nBrowser evidence includes:<\/p>\n\n\n
Screenshot\nScreen recording\nConsole logs\nNetwork logs\nFailed requests\nViewport size\nDevice\/browser metadata\nLighthouse report\nAccessibility report\nWaterfall report\nFilmstrip report\nDOM\/CSS inspection\n<\/code><\/span><\/pre>\n\n\nOnce the AI has this evidence, it can reason better.<\/p>\n\n\n\n
Instead of saying:<\/p>\n\n\n
Fix the UI.\n<\/code><\/span><\/pre>\n\n\nyou say:<\/p>\n\n\n
Here is the screenshot.\nHere are the console<\/span> errors.\nHere are failed API requests.\nHere is the mobile viewport.\nHere is the Lighthouse report.\nNow find the exact frontend issue and fix it.\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThis changes the quality of the result.<\/p>\n\n\n\n
\n\n\n\n4. Best Overall Workflow<\/h1>\n\n\n\n
The full workflow depends on the type of page.<\/p>\n\n\n\n
For local\/private development<\/h2>\n\n\n\n
Use:<\/p>\n\n\n
Python + Playwright + Chromium\n<\/code><\/span><\/pre>\n\n\nThis generates browser evidence from your local app.<\/p>\n\n\n\n
For public websites<\/h2>\n\n\n\n
Use:<\/p>\n\n\n
WebPageTest\nPageSpeed Insights\nGTmetrix\nDebugBear\nLighthouse\n<\/code><\/span><\/pre>\n\n\nThese tools create public\/shareable reports.<\/p>\n\n\n\n
For quick one-click bug reports<\/h2>\n\n\n\n
Use:<\/p>\n\n\n
Jam<\/span>.dev<\/span> Chrome<\/span> extension<\/span>\nBrowserStack<\/span> Bug<\/span> Capture<\/span>\nBird<\/span> Eats<\/span> Bug-style<\/span> tools<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nThese capture screenshot\/video plus console\/network logs.<\/p>\n\n\n\n
For accessibility<\/h2>\n\n\n\n
Use:<\/p>\n\n\n
WAVE\naxe DevTools\nLighthouse Accessibility\n<\/code><\/span><\/pre>\n\n\nFor visual regression<\/h2>\n\n\n\n
Use:<\/p>\n\n\n
Percy\nBrowserStack visual testing\nPlaywright screenshots\n<\/code><\/span><\/pre>\n\n\n
\n\n\n\n5. Recommended Stack for Vibe Coding<\/h1>\n\n\n\n
My recommended practical stack is:<\/p>\n\n\n
1.<\/span> Python Playwright + Chromium\n For local\/private automated browser checks.\n\n2.<\/span> Jam.dev extension\n For one-click bug reports with<\/span> screenshot\/video + console<\/span>\/network logs.\n\n3.<\/span> WebPageTest\n For public page loading, waterfall, screenshot, and filmstrip reports.\n\n4.<\/span> PageSpeed Insights \/ Lighthouse\n For performance, SEO, accessibility, and best-practice audits.\n\n5.<\/span> WAVE or axe DevTools\n For accessibility testing.\n\n6.<\/span> CLAUDE.md \/ CODEX.md browser verification rules\n To stop the AI from<\/span> pretending it tested the browser.\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThis gives the best balance of:<\/p>\n\n\n
Low cost\nPractical evidence\nLocal development support\nPublic<\/span> website support\nClaude\/Codex compatibility\nRepeatable workflow\nLess hallucination\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n6. Solution 1: Python + Playwright + Chromium<\/h1>\n\n\n\n
This is the best free local solution.<\/p>\n\n\n\n
Playwright can control Chromium, Firefox, and WebKit. For vibe coding, I recommend Chromium first because it is fast, stable, and close to Chrome behavior.<\/p>\n\n\n\n
What this solves<\/h2>\n\n\n\n
It can check:<\/p>\n\n\n
Page loads or not\nDesktop screenshot\nTablet screenshot\nMobile screenshot\nConsole errors\nJavaScript runtime errors\nFailed API\/network requests\nResponsive layout\nBasic visual evidence\n<\/code><\/span><\/pre>\n\n\nCost<\/h2>\n\n\n
Playwright: Free\nChromium through Playwright: Free\nPython script: Free\nAI usage: depends on your Claude\/Codex\/Cursor plan\n<\/code><\/span><\/pre>\n\n\nInstall<\/h2>\n\n\n
pip install playwright\nplaywright install chromium\n<\/code><\/span><\/pre>\n\n\nCreate a browser check script<\/h2>\n\n\n\n
Create this file:<\/p>\n\n\n
tools\/browser_check.py\n<\/code><\/span><\/pre>\n\n\nAdd this code:<\/p>\n\n\n
from playwright.sync_api import sync_playwright\nfrom pathlib import Path\n\nURL = \"http:\/\/127.0.0.1:3000\"<\/span>\n\nVIEWPORTS = {\n \"desktop\"<\/span>: {\"width\"<\/span>: 1440<\/span>, \"height\"<\/span>: 900<\/span>},\n \"tablet\"<\/span>: {\"width\"<\/span>: 768<\/span>, \"height\"<\/span>: 1024<\/span>},\n \"mobile\"<\/span>: {\"width\"<\/span>: 390<\/span>, \"height\"<\/span>: 844<\/span>},\n}\n\noutput_dir = Path(\"browser-report\"<\/span>)\noutput_dir.mkdir(exist_ok=True<\/span>)\n\nwith sync_playwright() as<\/span> p:\n browser = p.chromium.launch(headless=True<\/span>)\n\n for<\/span> name, viewport in VIEWPORTS.items():\n print<\/span>(f\"Checking {name} viewport...\"<\/span>)\n\n page = browser.new_page(\n viewport=viewport,\n is_mobile=(name == \"mobile\"<\/span>)\n )\n\n console_errors = []\n failed_requests = []\n\n page.on(\n \"console\"<\/span>,\n lambda msg: console_errors.append(msg.text)\n if<\/span> msg.type == \"error\"<\/span>\n else<\/span> None\n )\n\n page.on(\n \"pageerror\"<\/span>,\n lambda error: console_errors.append(str(error))\n )\n\n page.on(\n \"requestfailed\"<\/span>,\n lambda request: failed_requests.append(request.url)\n )\n\n page.goto<\/span>(URL, wait_until=\"networkidle\"<\/span>)\n\n screenshot_path = output_dir \/ f\"{name}.png\"<\/span>\n page.screenshot(path=str(screenshot_path), full_page=True<\/span>)\n\n report_path = output_dir \/ f\"{name}-report.txt\"<\/span>\n\n with open(report_path, \"w\"<\/span>, encoding=\"utf-8\"<\/span>) as<\/span> f:\n f.write(f\"URL: {URL}\\n\"<\/span>)\n f.write(f\"Viewport: {viewport}\\n\\n\"<\/span>)\n\n f.write(\"Console Errors:\\n\"<\/span>)\n if<\/span> console_errors:\n for<\/span> error in console_errors:\n f.write(f\"- {error}\\n\"<\/span>)\n else<\/span>:\n f.write(\"No console errors found.\\n\"<\/span>)\n\n f.write(\"\\nFailed Requests:\\n\"<\/span>)\n if<\/span> failed_requests:\n for<\/span> request in failed_requests:\n f.write(f\"- {request}\\n\"<\/span>)\n else<\/span>:\n f.write(\"No failed requests found.\\n\"<\/span>)\n\n page.close()\n\n browser.close()\n\nprint<\/span>(\"Done. Check the browser-report folder.\"<\/span>)\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nRun it<\/h2>\n\n\n
python tools\/browser_check.py\n<\/code><\/span><\/pre>\n\n\nIt will create:<\/p>\n\n\n
browser-report\/\n desktop.png\n desktop-report.txt\n tablet.png\n tablet-report.txt\n mobile.png\n mobile-report.txt\n<\/code><\/span><\/pre>\n\n\nNow you have evidence.<\/p>\n\n\n\n
\n\n\n\n7. How to Give This Report to Claude\/Codex<\/h1>\n\n\n\n
After generating the report, tell Claude or Codex:<\/p>\n\n\n
I ran browser verification using Python Playwright + Chromium.\n\nCheck the browser-report folder:\n- desktop.png\n- tablet.png\n- mobile.png\n- desktop-report.txt\n- tablet-report.txt\n- mobile-report.txt\n\nAnalyze the screenshots, console<\/span> errors, failed network requests, and responsive layout.\n\nFind the exact frontend\/component\/CSS\/API issue.\nFix the code.\nThen explain:\n1.<\/span> What was wrong\n2.<\/span> Which files were changed\n3.<\/span> How the fix was verified\n4.<\/span> Whether any browser issue still remains\n\nDo not say done unless browser verification passes.\n<\/code><\/span>