{
"title": "写了一个 chrome extension 尝试解决 xLog custom css 调试困难",
"tags": [
"post",
"xLog",
"Programming"
],
"summary": "在 xLog 中，要定制页面需要通过设置中的自定义 CSS 功能。然而，目前在设置界面编写 CSS 时无法实时预览效果，而通过浏览器的检查功能进行调试也并非一个良好的体验。所以下午一边补番一边撸了这个插件。 目前这个插件有两个功能：\n\n实时预览调试你的自定义 css 查看他人的自…",
"sources": [
"xlog"
],
"external_urls": [
"https://birdgg.me/xlog-custom-css-debugger"
],
"date_published": "2023-04-30T17:04:43.970Z",
"content": "在 xLog 中，要定制页面需要通过设置中的自定义 CSS 功能。然而，目前在设置界面编写 CSS 时无法实时预览效果，而通过浏览器的检查功能进行调试也并非一个良好的体验。所以下午一边补番一边撸了这个插件。\n\n目前这个插件有两个功能：\n1. 实时预览调试你的自定义 css\n2. 查看他人的自定义 css ~~然后把 css 大佬的样式直接抄过来~~\n\n视频演示\n\n::youtube{#M0j1tyiordg}\n\n目前这个插件 bug 可能比较多，已经有重构计划， [下载地址](https://github.com/birdgg/xLog-custom-css-debugger/releases/download/0.1.0/dist.zip)。\n使用方法： 下载后解压，在 extension manage 页面打开开发者模式，load unpacked 加载 dist 文件夹\n\nps: 我发现官方也在做这个[功能](https://github.com/Crossbell-Box/xLog/tree/feat/preview-css)了",
"attributes": [
{
"value": "xlog-custom-css-debugger",
"trait_type": "xlog_slug"
}
]
}
