介绍 Discourse 开发者工具栏

在开发环境中运行 最新版本的 Discourse core 时,您会注意到屏幕左侧有一个新的工具栏:

这提供了对常用开发工具的单击访问。到目前为止,我们有:

:electric_plug: 插件出口调试

这会显示所有插件出口,工具提示显示所有可用 @outletArgs 的实时值。

这受到了流行的 插件出口位置 主题组件和 它之前的插件 的启发。但与它们不同的是,与核心的紧密集成意味着它可以始终与最新的出口和参数 100% 同步。

:ambulance: 安全模式

切换安全模式的开启和关闭

:scroll: 详细本地化

切换 详细本地化功能


在开发环境中,默认启用此功能,可以通过单击“X”按钮禁用。

在生产环境中,可以通过在浏览器控制台中运行 enableDevTools() 来启用。您甚至可以在 Meta 上尝试一下!如果 enableDevTools() 不可用,那可能是因为您处于未加载完整 Ember 应用程序的错误页面上。

我们希望在未来几周/几个月内添加更多工具,敬请关注!如果您有任何反馈或工具的想法,请在下方告知我们!

49 个赞

点击 :electric_plug: 图标显示插座会导致 Chrome 崩溃,使页面/选项卡无响应。我禁用了我的 Chrome 扩展程序,但它仍然崩溃。

更具体地说,在主题(不仅仅是 Meta)上点击图标时会崩溃。

在 Firefox/Edge 上,它可以工作,但控制台中有一个错误:

为 discovery-list-area 插件注册了多个连接器。使用第一个。
Array [ undefined, "discovery-list-area/kanban-board (discourse/theme-351/discourse/connectors/discovery-list-area/kanban-board)" ]
3 个赞

我也可以在 Meta 上复现此问题。

在 Firefox 上,您可以看到也存在渲染无限循环:

在本地开发安装上,即使启用了 Kanban,它也能正常工作。我看到相同的错误,但没有渲染循环。


顺便说一句,感谢您带来这个工具,它非常方便,我很喜欢!

3 个赞

咦!几天前肯定是可以的,但现在我看到了同样的错误。我会调查的——感谢各位的报告!

6 个赞

合并了此提交,这将修复主题页面上的无限重新渲染问题。

8 个赞

由于我在移动设备上看不到任何方法可以做到这一点,因此我正在创建一个简单的 TC 来在标题中添加一个按钮(受插件出口 TC 的启发)。

在移动设备上查看开发环境时,工具栏将出现在屏幕左侧,以便您可以正常使用它。

在生产环境中,您需要从控制台(或从主题/主题组件的 JavaScript)调用 enableDevTools() 来打开工具栏。请注意,这会产生性能成本,因此在真实的生产网站上不应将其用于所有用户。

2 个赞

是的。用户可以点击按钮为他们激活开发者工具。不是为所有用户。

1 个赞

这是:

1 个赞

我们可以为 mobile_view 添加一个切换开关吗?有时我想快速查看此视图。
如果可以的话,我可以提交一个 PR!

3 个赞

为什么不在侧边栏中的切换呢?

1 个赞

您在桌面模式下没有移动切换按钮。我认为它只出现在手机或平板电脑上。
另外,这是关于将所有按钮放在同一个地方的便利性。

2 个赞

当然,移动模式听起来是个不错的选择 :+1:

3 个赞

好了:

2 个赞

我只是想大声疾呼,并感谢您提供的这个便捷的开发工具。

现在,识别可用的插件插口或精确定位本地化字符串变得轻而易举……

谢谢! :smiley:

6 个赞

但是它在 404 页面上不起作用?

访问 https://meta.discourse.org/ewfsezfef,按 F12,启用开发者工具,然后

VM190:1 Uncaught ReferenceError: enableDevTools is not defined
    at <anonymous>:1:1

我希望在该页面上添加一些文本。

3 个赞

目前 404 页面不加载任何 ember app JS。有一个隐藏的站点设置 bootstrap_error_pages,您可以启用它来使它们成为完整的 ember app 页面。

也许将来我们会将其设为默认设置,但目前它不是我们优先列表的顶部。

2 个赞

说得有道理。也许可以把它加到 OP 里?看起来我可以做到。

1 个赞

当然!已添加:

3 个赞