An automated utility to capture and analyze browser console, network, and performance data for professional frontend debugging.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install qtada-browser-devtools-inspector
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install qtada-browser-devtools-inspector using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Browser DevTools Inspector?
The Browser DevTools Inspector is a robust tool designed to provide deep visibility into the runtime behavior of web applications. By leveraging Puppeteer and the Chrome DevTools Protocol, this skill allows developers and automated agents to programmatically extract logs, network traffic, and performance metrics. It is an essential component for any developer looking to expand their library of Openclaw Skills with automated diagnostic capabilities.
This skill eliminates the need for manual browser inspection by providing a CLI-driven interface to capture real-time data. It is particularly effective for diagnosing issues that only appear in specific environments, such as CORS misconfigurations, slow API responses, or uncaught JavaScript exceptions in production-like settings.
Browser DevTools Inspector Use Cases
- Identifying failed API requests and diagnosing CORS policy blocks in modern web applications.
- Auditing frontend performance metrics like Time to First Byte (TTFB) and DOM Content Loaded to improve SEO.
- Monitoring production storefronts for uncaught exceptions, React/Vue warnings, and broken assets.
- Automating the collection of structured console logs for regression testing or bug reporting within Openclaw Skills workflows.
How Browser DevTools Inspector Works
- The skill initializes a headless or headful Chromium instance using Puppeteer to load the target application URL.
- It attaches listeners to the Chrome DevTools Protocol (CDP) to monitor Console, Network, and Performance domains.
- Scripts capture specific events such as network request failures, console errors, and resource loading timestamps.
- Data is filtered based on user-defined parameters, such as error levels or specific URL patterns for API monitoring.
- The results are formatted into a clean, structured JSON object, making it easy to pipe data into other tools or display for developer review.
Browser DevTools Inspector Setup
To get started with this skill, ensure you have Node.js 14+ installed and follow these steps:
# Navigate to the scripts directory within the skill
cd scripts
# Install the required dependencies, including Puppeteer
npm install
# Optional: If you are on Windows and the browser isn't found, set the executable path
set PUPPETEER_EXECUTABLE_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"
Browser DevTools Inspector Data Schema & Taxonomy
The skill produces structured JSON output to ensure compatibility with modern development pipelines. The schema typically includes:
| Property | Type | Description |
|---|---|---|
url |
string | The specific page URL being inspected. |
timestamp |
string | ISO 8601 timestamp of the inspection event. |
logs |
array | List of console entries including level, message, and line number. |
requests |
array | List of network requests including status, method, type, and timing. |
summary |
object | Aggregated counts of errors, warnings, and performance metrics. |
Browser DevTools Inspector Advanced Features
- Pattern-based filtering to isolate network requests for specific API endpoints or microservices.
- Dedicated CORS diagnostic scripts that analyze preflight failures and header mismatches.
- Performance bottleneck detection for identifying blocking scripts or assets exceeding size thresholds.
- Seamless integration with jq for command-line filtering and automated reporting within Openclaw Skills environments.
SKILL.md
Loading
Related Openclaw Skills
YaCy Skill
Manage and integrate a local, decentralized YaCy search engine into your AI workflows for private web searches.
tokenQrusher
tokenQrusher is a high-performance optimization system that drastically reduces AI agent token usage through intelligent context filtering and heartbeat management.
Token Optimizer
A comprehensive toolkit designed to drastically reduce token usage and API expenditures through intelligent context management and task-based model routing.
Session State Tracker
A robust lifecycle management tool that prevents context loss by automatically persisting and restoring AI agent state across compactions and restarts.
Economic Calendar
A specialized scraping utility that retrieves macro-economic events and financial indicators from Investing.com without an API key.
zugferd-invoice
A specialized tool for generating ZUGFeRD 2.1 and Factur-X compliant electronic invoices with support for visible multi-page PDF merging.
Featured*
