Video summary
The video introduces an updated version of the open-source tool Lighthouse, now integrated directly into Chrome DevTools for Agents to enhance web development workflows. While traditional maritime lighthouses have evolved over centuries, this digital utility remains a critical asset for developers by providing automated audits across five key categories: performance, accessibility, SEO, best practices, and a new experimental browsing category designed specifically for AI agents. This integration allows coding agents to operate autonomously with deep context from over 140 checks, eliminating the need for manual data transfer between DevTools panels and agent environments.
In terms of functionality, the tool offers specialized insights that go beyond simple scoring systems; for instance, performance audits provide raw runtime tracing data rather than just a single score, giving agents precise details to optimize speed. The system streamlines quality assurance by enabling developers to prompt their coding agents to run specific checks, such as accessibility or SEO evaluations, and immediately fix identified issues like missing meta descriptions, poor color contrast, or broken heading structures without human intervention. This closed feedback loop ensures that problems are detected and resolved in real-time before code is pushed to production, significantly reducing the time spent on manual debugging and verification.
A particularly significant addition highlighted in the video is the new agentic browsing audit category, which addresses unique challenges faced by AI agents navigating websites. Agents rely heavily on stable layouts, well-formed accessibility trees, and descriptive tools to interact with web content; any unexpected layout shifts or malformed elements can break an entire workflow. By running these specific audits, developers can ensure their sites are robust enough for the emerging agentic web, where a coding agent might identify issues such as missing tool definitions in single-page applications or inaccessible car configurators before they impact automated tasks.
Ultimately, Lighthouse serves as a powerful bridge between human oversight and autonomous AI capabilities, allowing teams to meet tight deadlines while maintaining high standards of quality and inclusivity. The video concludes by encouraging developers to explore these new use cases through official documentation and share their own experiences with coding agents surfacing issues via Lighthouse audits. Whether optimizing for search engine crawlers or ensuring seamless navigation for automated bots, this tool provides the necessary context and actionable advice to build faster, more reliable web applications that work seamlessly for all users and machines alike.
Read the full video transcript
Did you know the first lighthouse in
recorded history, the Pharos of
Alexandria, was built in the 3rd century
BCE?
Over 23 centuries later, maritime
lighthouses might feel a bit outdated
for actual nautical navigation. But the
lighthouse tool that developers rely on,
that is still fresh and is now available
in DevTools for Agents, including the
new experimental browsing audit
category,
all built by the same team that
maintains Chrome DevTools.
Welcome to Developer Tooling Tips. I'm
Mathias, let's dive in.
>> [music]
[music]
>> As a quick recap, Lighthouse is an
open-source tool helping you improve the
quality of web pages across a set of
five distinct categories:
performance, accessibility, SEO, best
practices, and now new experimental
browsing.
You can run Lighthouse through the
DevTools UI in the dedicated panel,
through the command line, or as we'll
explore today, through Chrome DevTools
for Agents.
Across these categories, Lighthouse
packs a massive punch with over 140
automated checks total,
with a straightforward advice.
Excellent starting ground as context for
your coding agent.
For performance, DevTools for Agents has
specialized performance tracing tools
instead of Lighthouse, giving your agent
the raw, more accurate runtime data than
the single 0 to 100 score familiar from
Lighthouse.
And performance insights as part of the
trace bring the same context as the
original Lighthouse audits.
Learn more about them through this link.
By using Lighthouse, your agent gets
targeted advice based on the live
runtime completely autonomously.
And after it's done, use the info from
those audits to immediately start
working on failed audits instead of
waiting on you to manually copy-paste
them from DevTools into your agent.
Let's explore some examples.
When you're working on a page
intensively, trying to meet deadlines
and fulfill client requirements,
accessibility is sometimes, even
unintentionally, deprioritized.
But, we want to make sure your website
works seamlessly for as many people as
possible.
So, after finalizing a change, you can
ask your agent to do a final
accessibility check with Lighthouse and
fix up your work before you push it to
your users.
In your coding agent, just prompt,
"Please run a Lighthouse accessibility
audit on this URL."
In this example, with our demo news
site, DevTools for agents identifies
missing button names, bad color
contrast, images without alternative
text, and non-ideal touch targets.
With a follow-up prompt like, "Fix all
findings," we can send our coding agent
straight to work and have it fix those
findings on its own without any manual
intervention other than the final code
review.
On to the next use case.
When building a web app, it is easy to
overlook search engine fundamentals like
missing meta descriptions or skip
heading levels.
Before deploying, you can ask your agent
to evaluate your page's discoverability
using Lighthouse's SEO audits to ensure
crawlers can effectively index your
content.
As for any other Lighthouse category,
just prompt,
"Please run a Lighthouse SEO audit on
this URL and fix all findings."
With the same demo site as in the
previous example, Anti-Gravity is our
agent found missing meta description
tags across various different layouts.
Easy to forget and for an LLM, just as
easy to fix.
By adding "Fix all findings" to the
original prompt, rather than sending it
as a follow-up prompt, we created a
closed feedback loop this time.
The agent identified issues and can jump
straight into fixing them before running
the same audits again to verify its
fixes.
For the last example, let's take a look
at the new agentic browsing category in
Lighthouse.
Agents accessing websites rely heavily
on a well-formed accessibility tree,
descriptive tools, and stable layouts to
navigate and interact with your website.
A malformed tool or unexpected layout
shift can completely break an agentic
workflow.
To ensure your site is ready for the
agentic web, ask your coding agent to
run the new agentic browsing audits.
To do so, you can prompt,
"Please run a Lighthouse agentic
browsing audit on this URL."
On this example site with a Web MCP
enabled car configurator, the tool
definitions look all right, and as it's
a single-page demo application, it
doesn't have a LLM's.txt file.
I got some work to do on accessibility,
though.
This is how you can run Lighthouse
audits with Chrome DevTools for agents
and when it's useful to do so.
To learn more about these and other use
cases of DevTools for agents, visit our
documentation at this link.
Let us know in the comments which issues
your coding agent was able to surface
with Lighthouse.
Or just leave your recommendation for
your favorite real-world Lighthouse.
Mine is Point Bonita in California.
As always, thanks for watching and see
you next time.
>> [music]
[music]