AI导哈

Chrome DevTools 命令行工具

一个用于连接和与Chrome DevTools交互的命令行界面，提供交互式REPL和无头执行模式以实现程序化浏览器控制。

  • by hesedcasa
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 hesedcasa/chrome-devtools-cli

使用说明

Chrome DevTools命令行界面

用于连接到Chrome DevTools并与之交互的命令行界面。此CLI为程序化浏览器控制提供了交互式REPL和无头执行模式。

特性

  • 📡 与Chrome DevTools MCP服务器的持续连接
  • 💻 用于浏览器控制的交互式REPL
  • 🚀 无头模式用于一次性命令执行
  • 🛠️ 26个浏览器控制工具（导航、交互、截图、性能等）
  • 🔧 命令特定的帮助和文档

需求

安装

npm install -g chrome-devtools-cli

快速开始

启动Chrome浏览器

在启用远程调试端口9222的情况下启动Chrome浏览器。启动前，请确保关闭所有正在运行的Chrome实例。

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

视窗

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

交互模式

启动CLI并通过REPL与Chrome交互：

npx chrome-devtools-cli

一旦开始，您将看到 chrome> 提示：

Chrome DevTools CLI

Usage:

commands         list all the available commands
<command> -h     quick help on <command>
<command> <arg>  run <command> with argument
clear            clear the screen
exit, quit, q    exit the CLI

chrome> commands
# Lists all 26 available commands

chrome> navigate_page {"url":"https://example.com","type":"url"}
# Navigates to the specified URL

chrome> take_screenshot {"fullPage":true,"filePath":"./screenshot.png"}
# Takes a full-page screenshot

chrome> exit

无头模式

在不启动交互式REPL的情况下执行单个命令：

# General format
npx chrome-devtools-cli <command> '<json_arguments>'

# Examples
npx chrome-devtools-cli navigate_page '{"url":"https://google.com","type":"url"}'
npx chrome-devtools-cli take_screenshot '{"fullPage":true,"filePath":"./test.png"}'
npx chrome-devtools-cli list_pages

# With headless browser flag
npx chrome-devtools-cli navigate_page '{"url":"https://example.com","type":"url"}' --headless

命令行选项

# Show version
npx chrome-devtools-cli --version
npx chrome-devtools-cli -v

# List all commands
npx chrome-devtools-cli --commands

# Get help for specific command
npx chrome-devtools-cli navigate_page -h

# General help
npx chrome-devtools-cli --help
npx chrome-devtools-cli -h

可用工具

CLI公开 26个浏览器控制工具 从Chrome DevTools MCP服务器：

导航和页面

  • navigate_page -导航到URL、后退/前进或重新加载
  • list_pages -获取浏览器中打开的页面列表
  • new_page -创建新页面
  • close_page -按索引关闭页面
  • select_page -选择一个页面作为未来命令的上下文
  • resize_page -将页面窗口调整为指定尺寸

用户交互

  • click -点击一个元素（支持双击）
  • hover -将鼠标悬停在元素上
  • type -在输入/文本区域键入文本或选择选项
  • fill -填写单个表单元素
  • fill_form -一次填写多个表单元素
  • drag -将一个元素拖到另一个元素上
  • press_key -按一个键或组合键

内容和截图

  • take_screenshot -截图（PNG/JPEG/WebP）
  • take_snapshot -基于可访问性树拍摄文本快照
  • get_page_content -提取页面内容
  • get_page_info -获取当前页面信息

JavaScript执行

  • evaluate_script -在浏览器上下文中执行JavaScript

控制台和网络

  • list_console_messages -列出当前页面的控制台消息
  • get_console_message -按ID获取特定控制台消息
  • list_network_requests -列出当前页面的网络请求
  • get_network_request -通过ID获取特定的网络请求

演出

  • performance_start_trace -开始性能跟踪记录
  • performance_stop_trace -停止性能跟踪记录
  • performance_analyze_insight -获取详细的性能见解

高级功能

  • handle_dialog -处理浏览器对话框（接受/关闭）
  • upload_file -通过文件输入元素上传文件
  • wait_for -等待指定文本出现在页面上
  • emulate -模拟网络条件和CPU限制

许可证

阿帕奇-2.0

相关 MCP