storybook-addon-user-agent

此 Storybook 插件允许您使用不同的用户代理查看组件渲染效果。

入门指南

首先，安装插件

yarn add -D storybook-addon-user-agent

注册插件

// addons.js
import 'storybook-addon-user-agent/dist/register';

完成！

与 bowser 配合使用

有时我们在项目中使用 bowser 进行浏览器检测，这依赖于用户代理识别。由于我们希望在选择新的用户代理后立即重新解析当前的用户代理（这在当前的 bowser 主版本 v1.x 中可能无法实现，并且看起来将在 v2 中实现。我不确定这一点，如果您发现我遗漏了什么，请告诉我 🙏）。
在这种情况下，您可以使用我们在此处提供的 bowser 模块。事实上，它只是一个扩展了原始 bowser 的模块，用于检测您是否在 storybook 中工作，如果是，则每次执行时都会解析 user-agent，否则，它将像往常一样工作。

// change
import bowser from 'bowser';
// to
import bowser from 'storybook-addon-user-agent/bowser';

// usage is same as usual
// bowser.mobile, ...