# chrome-devtools-frontend 中文文档

规范地址：https://npmcn.com/package/chrome-devtools-frontend/

版本：1\.0\.1732418
npm 元数据更新时间：2026-11-03T06:18:39.346Z
中文译文更新时间：2026-11-03T07:55:14.573Z
软件包许可：BSD-3-Clause

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/chrome-devtools-frontend
原文对照：https://npmcn.com/package/chrome-devtools-frontend/?lang=original
项目主页：https://devtools.chrome.com/
源码仓库：https://github.com/ChromeDevTools/devtools-frontend

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：69.7 MB，4859 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2016-02-04T08:23:17.496Z
- 最新版本发布：2026-11-03T06:18:39.015Z
- 已发布版本数：2256（近 12 个月 194 个）

## 中文简介

Chrome DevTools界面

## 安装

```sh
npm install chrome-devtools-frontend
```

也可以使用：`pnpm add chrome-devtools-frontend`、`yarn add chrome-devtools-frontend`、`bun add chrome-devtools-frontend`

## README

# Chrome DevTools前端

[![npm package](https://img.shields.io/npm/v/chrome-devtools-frontend.svg)](https://npmjs.org/package/chrome-devtools-frontend)

这个存储库包含Chrome DevTools的客户端。它包含了所有 运行DevTools web应用的TypeScript和CSS代码。

### 源代码和文档

源代码已打开 [chromium.googlesource.com](https://chromium.googlesource.com/devtools/devtools-frontend).

这个 [Chromium DevTools文档](http://goo.gle/chromium-devtools) 告诉你如何完成这些任务：

-   [设置](https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/get_the_code.md) DevTools前端签出。
-   使用DevTools的前端签出。
-   维护DevTools前端检出。

文档还包含设计指南和体系结构 文档。

其他文档:

-   DevTools用户文档： [devtools.chrome.com](https://devtools.chrome.com/)
-   Chrome DevTools协议文档： [chromedevtools.github.io / devtools-protocol](https://chromedevtools.github.io/devtools-protocol)
-   Chrome DevTools资源列表： [github.com/paulirish/awesome-chrome-devtools](https://github.com/paulirish/awesome-chrome-devtools)
-   如何贡献到Chrome DevTools： [goo.gle / devtools-contribution-guide](http://goo.gle/devtools-contribution-guide)
-   如何为Chrome DevTools协议做出贡献： [goo.gle / devtools-contribution-guide-cdp](https://goo.gle/devtools-contribution-guide-cdp)

### 源镜子

有一个DevTools前端存储库的镜像 [GitHub](https://github.com/ChromeDevTools/devtools-frontend).

DevTools前端也可以在npm上作为 [chrome-devtools-frontend](https://www.npmjs.com/package/chrome-devtools-frontend) 包中。该包不提供CJS模块或ES模块。因此，它可以是 很难在其他工具中使用这个包。为了举例说明如何使用它， 看到 [这个文件](https://github.com/paulirish/devtools-timeline-model/blob/master/index.js).

npm包的版本号(例如， `1.0.373466`)是 最新前端Git提交的Chromium提交位置。版本号 随着每次提交而增加。但是我们只发布包 大约每天一次。

### 联系我们

-   遵循 [@ChromeDevTools](http://x.com/ChromeDevTools) 在X上（以前是Twitter）。
-   发送消息到Chrome DevTools邮件列表： [g / google-chrome-developer-tools](https://groups.google.com/forum/#!forum/google-chrome-developer-tools)
-   报告一个新的DevTools错误： [goo.gle / devtools-bug](http://goo.gle/devtools-bug)

### 获取最新消息

要获得关于DevTools开发的最新消息，请执行以下一个或多个操作 步骤:

-   读 [DevTools有什么新功能](https://developer.chrome.com/docs/devtools/news).
    
-   读 [Umar的开发技巧](https://umaar.com/dev-tips).
    
-   关注X上的这些账户： [@umaar](https://x.com/umaar)， [@malyw](https://x.com/malyw)， [@kdzwinel](https://x.com/kdzwinel)， [@addyosmani](https://x.com/addyosmani)， [@paul\_irish](https://x.com/paul_irish)， [@samccone](https://x.com/samccone)， [@mathias](https://x.com/mathias)， [@mattzeunert](https://x.com/mattzeunert)， [@PrashantPalikhe](https://x.com/PrashantPalikhe)， [@ziyunfei](https://x.com/ziyunfei), [@bmeurer](https://x.com/bmeurer).
    
-   加入 [g / devtools-reviews@chromium.org](https://groups.google.com/a/chromium.org/forum/#!forum/devtools-reviews) 邮件列表。这个列表显示了所有 等待代码审查。
    
-   读了 [提交日志](https://chromium.googlesource.com/devtools/devtools-frontend/+log/main)，或跟随 [@DevToolsCommits](http://x.com/DevToolsCommits) 在X。
    
-   看到 [所有打开的DevTools bug](http://goo.gle/devtools-bugs) 在crbug.com上。
    
-   使用Chrome Canary进行实验。

## 常见问题

### chrome-devtools-frontend 是什么？

Chrome DevTools界面

### 如何安装 chrome-devtools-frontend？

在项目目录运行 npm install chrome-devtools-frontend，或使用 pnpm add / yarn add / bun add。

### chrome-devtools-frontend 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/chrome-devtools-frontend 是否存在。

### chrome-devtools-frontend 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### chrome-devtools-frontend 可以商用吗？

chrome-devtools-frontend 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。

### chrome-devtools-frontend 还在维护吗？

最新版本 1\.0\.1732418 发布于 2026/11/03（今天）；至今共发布 2256 个版本，其中过去 12 个月发布了 194 个；首次发布于 2016/02/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。