Video summary
The video introduces a new capability within Chrome DevTools for Agents that allows developers to create custom third-party tools, effectively upgrading the standard debugging environment from a basic Swiss Army knife into a specialized instrument tailored for complex web applications. While out-of-the-box features like DOM inspection and network request access provide a solid foundation, they often fall short when an agent needs to interact with highly specific internal states or bypass standard limitations. By exposing custom aspects of an application through plain JavaScript, developers can enable agents to modify state, inspect data, or interact with internal components like routers without requiring additional glue code or complex integrations.
One primary use case highlighted is the efficient monitoring of runtime issues such as silent cache misses or long-running database queries, which are difficult to detect using standard logs alone. Instead of cluttering the console with noise that makes it hard for both humans and agents to sift through data, developers can build lightweight services to track specific metrics and expose them via custom tools. When an agent navigates to a site, it discovers these tools and utilizes them only when necessary; for instance, in a demo CRM application, an agent used a custom tool to investigate cache statistics, instantly identifying a full cache miss that triggered unnecessary database latency without any guesswork or manual log analysis.
Another significant benefit is the simplification of role-based access control verification, which traditionally involves tedious manual logging in and out, wasting tokens and risking credential leaks. Custom tools allow agents to seamlessly switch user profiles on the fly using an impersonation function, enabling them to verify UI differences between sales and admin roles in a single pass. This approach not only saves computational resources but also ensures safety by keeping sensitive debugging functionality restricted to non-production environments, while still allowing agents to confirm that specific panels are hidden or buttons are disabled for different user types instantly.
Beyond individual applications, this functionality is particularly valuable for framework authors and library maintainers who can implement built-in tools to help agents debug complex systems more efficiently. Partnerships with teams like Angular have already resulted in tools that visualize dependency injection and signal graphs to identify rogue dependencies, while other libraries could offer custom controls for animation playback or content management system seeding. The video concludes by directing developers to the documentation for schema requirements and experimental flags needed to enable these features, encouraging framework authors to collaborate on expanding the ecosystem of available debugging tools for agents.
Read the full video transcript
Did you know the very first Swiss Army
knife produced in 1891 didn't actually
have a corkscrew?
It featured just a blade, a reamer, a
can opener, and a screwdriver.
Powerful, but strictly standard issue.
When building complex web apps, standard
developer tools can feel a bit like that
original knife.
But what if your coding agent could use
custom attachments?
Enter custom third-party developer tools
for Chrome DevTools for Agents.
Welcome back to Developer Tooling Tips.
I'm Matthias. Let's dive in.
>> [music]
[music]
>> DevTools for Agents out-of-the-box tools
like DOM inspection, access to network
requests, and console logs, and
interaction tools already bring your
coding agent a really long way.
But they still don't allow your agent to
interact with your application's highly
specific internal state at runtime.
With third-party developer tools, you
can now expose any aspect of your app to
your coding agent.
All through plain JavaScript and
DevTools for Agents. No additional glue
needed.
Allow your agent to modify and inspect
state, bypass authentication, or as a
framework and library author, interact
with internal components like routers or
rendering.
Let's look at some use cases.
Runtime issues like silent cache misses
or long-running database queries are
difficult for coding agents to spot
using just standard network logs.
Now, you could go in and plaster your
app with console logs and performance
now calls,
though that would just create noise in
your console. Both you and your agent
would have a hard time sifting through.
Instead, you can create a little service
that keeps track of the metrics for you,
and then expose the service to your
coding agent through DevTools for agents
to query it only when it needs this
data. Here's an example implementation.
We respond to the DevTools discovery
event with an object that holds our
tool, get cache statistics in this case,
alongside a tool description making it
easy for your agent to understand when
it might be useful.
The actual implementation comes down to
your specific application.
The actual tool is abstracted away
behind an anonymous API service.
Now, when your coding agent navigates to
the site, it will discover this tool,
and if your prompt applies to the tool
description, it will use it to fulfill
your request.
For example, this is a demo CRM
application which has such a tool
implemented.
Now, we can prompt our agent to
investigate cache hits and misses.
Enter Gravity first uses DevTools for
agents interaction tools to navigate the
page, and then uses the custom DevTools
tool to understand if the cache was
queried as expected.
Unfortunately, in this case, it
discovered a full cache miss with the
app bypassing local updates and
triggering a fake 1.8 second database
latency.
So, no guesswork required here. On to
the next use case.
Verifying role-based access usually
means tedious manual logging in and out
to check what different users can see,
and when working with coding agents, it
can mean repeatedly spending tokens just
to navigate to sign out, then filling
the sign-in form, and leaking
credentials along the way.
Custom developer tools offer a cleaner
way. For example, for the same CRM app
we used in the previous example, we can
implement an impersonate tool, allowing
your agent to seamlessly switch user
profiles on the fly.
The implementation is the same as
before.
Write a small JavaScript function that
handles the actual authentication logic,
for example, by calling an impersonation
API endpoint.
Then, respond to the DevTools tool
discovery event with this function and a
tool description.
And before we continue, a brief call
out.
When implementing sensitive debugging
functionality like this, make sure it's
not available in any production
environments to keep your data and users
safe.
Having this tool in our example app, we
can prompt our coding agent to
seamlessly verify the UI for the sales
and admin roles all in one go and
without our agent navigating login pages
in between.
It just instantly swapped to the sales
profile using the impersonation tool.
Our agent confirms admin panels are
hidden and added buttons are disabled
before swapping back to the admin
profile.
Token saved with just a few lines of
JavaScript. Let's move on.
While you can use this functionality to
build fully custom tools specific to
your own app, the same functionality can
be used by framework authors. We
partnered with the Angular team to
implement built-in tools for agents to
efficiently debug dependency injection
and the signal graph, helping agents to
visualize the logical relationship
between state and the view,
allowing them to identify rogue
dependencies.
But, there are dozens of other libraries
where this can be useful to make
debugging with agents and DevTools for
agents more efficient. For example,
animation libraries could give agents
custom tools to change the play state of
animations and pause, resume, or fast
forward them.
Content management systems could ship
tools for your agent to efficiently seed
them with demo content without
interacting with the raw database or
complex migration scripts.
If you have other ideas for the
frameworks and libraries you use, let us
know in the comments below.
And if you're maintaining a framework or
library and want to get started, please
reach out and we are happy to partner.
Now, to get started building and using
custom tools, first check out
documentation through this link.
If custom tools are still experimental,
make sure to enable the flag in your MCP
server config file.
Our docs are also where you can find
exact documentation on the required
schema for your tools to be successfully
picked up by DevTools for agents.
Thanks for tuning in and see you next
time.
>> [music]
[music]