# @canonical/styles-debug 中文文档

规范地址：https://npmcn.com/package/%40canonical/styles-debug/

版本：0\.45\.0
npm 元数据更新时间：2026-10-23T01:44:23.138Z
中文译文更新时间：2026-11-09T01:15:52.358Z
软件包许可：LGPL-3\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40canonical/styles-debug
原文对照：https://npmcn.com/package/%40canonical/styles-debug/?lang=original
项目主页：https://github.com/canonical/pragma-web#readme
源码仓库：https://github.com/canonical/pragma-web

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

- 包体积（解压后）：16.1 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：@canonical/design-tokens \>=0\.10\.0 \<1\.0\.0
- 首次发布：2025-04-28T16:18:51.070Z
- 最新版本发布：2026-10-23T01:44:22.708Z
- 近 30 天下载量：10078（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：42（近 12 个月 36 个）

## 中文简介

Canonical的调试风格. 这些不包含在其它样式中,但可用于调试目的.

## 安装

```sh
npm install @canonical/styles-debug
```

也可以使用：`pnpm add @canonical/styles-debug`、`yarn add @canonical/styles-debug`、`bun add @canonical/styles-debug`

## README

## 条形调试样式

此套件包括一组可快速识别并调试您中的问题的 Canonic 调试样式 代码. 它们不包含在基底样式包中,但可以与之并用. 它们被刻意地不加分层:一个叠加必须战胜每一个分层的规则.

### 开始

1.  安装软件包 : `npm install @canonical/styles-debug`
2.  导入所需的样式 :

```css
/* CSS Import */
/* To import all styles */
@import url("@canonical/styles-debug");

/* To import only certain styles */
@import url("@canonical/styles-debug/baseline-grid");
```

如果使用像Vite这样的捆绑工具,您也可以直接导入组件文件中的样式 :

```tsx
import "@canonical/styles-debug"; // import all debug styles
// import "@canonical/styles-debug/baseline-grid"; // for baseline grid only
```

### 调试工具

#### 基线网格

基线网格功能允许您在应用程序中可视化基线网格. 要使用它,请添加 `with-baseline-grid` 分类到任意元素. 它每周期画出五个严格硬化的带子——每个基线行都画出平平的4px 从晕倒(一级)到强(五级),每5次重复一次 基线( 4px 默认时为 20px) —— 因此, 节奏和位置在周期内 读一览.

基准高度在工具本身被击至 4px 并且故意不 读取自 `--baseline-height` (打印引擎来自 设计符号,目前仍为8px. 覆盖 `--baseline-grid-height` 更改 或设置 `--baseline-grid-height: var(--baseline-height)` 跟着应用程序 活电网.

##### 自定义

此工具可以通过设置以下 CSS 变量来定制 :

| 变量 | 说明 | 默认值 |
| --- | --- | --- |
| `--baseline-grid-color` | 基色是波纹的由来 | 品牌边框颜色 |
| `--baseline-grid-height` | 基线行高 | `0.25rem` (4px) (中文(简体) ) |
| `--baseline-shift` | 网格垂直冲抵 | `0` |

##### 示例

```html
<link rel="stylesheet" href="https://unpkg.com/@canonical/styles-debug/src/baseline-grid.css">
<style>
    :root {
        --baseline-grid-color: teal;
    }
</style>
<div class="with-baseline-grid">
    <p>Some text</p>
    <p>Some more text</p>
</div>
```

## 常见问题

### @canonical/styles-debug 是什么？

Canonical的调试风格\. 这些不包含在其它样式中,但可用于调试目的\.

### 如何安装 @canonical/styles-debug？

在项目目录运行 npm install @canonical/styles-debug，或使用 pnpm add / yarn add / bun add。

### @canonical/styles-debug 支持 TypeScript 吗？

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

### @canonical/styles-debug 支持 ESM 还是 CommonJS？

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

### @canonical/styles-debug 可以商用吗？

@canonical/styles-debug 使用 LGPL-3\.0 许可。弱 Copyleft：作为库被调用时通常不要求开源你自己的代码，但修改库本身需以 LGPL 开源；前端打包合并后的适用边界存在不同理解。以上为概括，不构成法律意见，请以许可原文为准。

### @canonical/styles-debug 的下载量有多少？

根据 npm 官方下载统计，@canonical/styles-debug 在 2026/10/09 – 2026/11/07 这 30 天内被下载 10,078 次，日均约 336 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @canonical/styles-debug 还在维护吗？

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