Discourse開発者ツールバーの紹介

開発
1

開発環境で最新バージョンの Discourse coreを実行すると、画面左側に新しいツールバーが表示されることに気づくでしょう。

Developer Tools
Developer Tools804×536 21.7 KB

これにより、一般的に必要とされる開発者ツールにワンクリックでアクセスできます。現時点では、以下のツールがあります。

:electric_plug: プラグアウトのデバッグ

すべてのプラグアウトを表示し、ツールチップですべての @outletArgs のリアルタイム値が表示されます。

これは、人気のプラグアウトの場所テーマコンポーネントと、その前のプラグアウトに触発されたものです。しかし、それらとは異なり、コアとの緊密な統合により、最新のプラグアウトと引数で常に100％最新の状態に保つことができます。

:ambulance: セーフモード

セーフモードのオン/オフを切り替えます。

:scroll: 詳細なローカライゼーション

詳細なローカライゼーション機能を切り替えます。

開発環境では、これはデフォルトで有効になっており、「X」ボタンを使用して無効にすることができます。

本番環境では、ブラウザコンソールで enableDevTools() を実行することで有効にできます。Metaでも試すことができます！ enableDevTools() が利用できない場合は、完全なEmberアプリをロードしないエラーページにいる可能性があります。

今後数週間/数ヶ月でさらに多くのツールを追加する予定ですので、ご期待ください！フィードバックやツールのアイデアがあれば、以下にお知らせください！

「いいね！」 49
2

:electric_plug: アイコンをクリックしてアウトレットを表示すると、Chrome がクラッシュし、ページ/タブが応答しなくなります。Chrome 拡張機能を無効にしましたが、それでもクラッシュします。

具体的には、トピック（メタだけでなく）でアイコンをクリックするとクラッシュします。

Firefox/Edge では動作しますが、コンソールにエラーが表示されます。

discovery-list-area のアウトレットに複数のコネクタが登録されました。最初のものが使用されます。
Array [ undefined, "discovery-list-area/kanban-board (discourse/theme-351/discourse/connectors/discovery-list-area/kanban-board)" ]
「いいね！」 3
3

Metaでも再現できます。

Firefoxでは、レンダリングの無限ループも確認できます。

The image displays a JavaScript console error message "Uncaught (in promise) Error: infinite rendering invalidation detected" next to a list of numbers and strings: '7', '29', '_trigger', 'end', 'endor;' which appear to be part of a code line. (Captioned by AI)
The image displays a JavaScript console error message "Uncaught (in promise) Error: infinite rendering invalidation detected" next to a list of numbers and strings: '7', '29', '_trigger', 'end', 'endor;' which appear to be part of a code line. (Captioned by AI)518×206 2.51 KB

ローカルの開発環境では、Kanbanを有効にしても問題なく動作します。同じエラーが表示されますが、レンダリングループは発生しません。

ちなみに、このツールを持ってきてくれてありがとうございます。とても便利で気に入っています！

「いいね！」 3
4

数日前は確かに機能していたのに、今は同じエラーが表示されます。調査します。報告ありがとうございます！

「いいね！」 6
6

このコミット (FIX: Avoid possible rendering infinite-loop in post-menu (#30873) · discourse/discourse@89df65e · GitHub) をマージしました。これにより、トピックページでの無限再レンダリングが修正されます。

「いいね！」 8
8

モバイルではその方法が見当たらないため、ヘッダーにボタンを追加するシンプルなTC（プラグインアウトレットTCに触発された）を作成しています。

9

モバイルで開発環境を表示すると、ツールバーが画面の左側に表示され、通常どおり使用できます。

本番環境では、ツールバーをオンにするために、コンソール（またはテーマ/テーマコンポーネントのJavaScript）からenableDevTools()を呼び出す必要があります。これはパフォーマンスコストがかかるため、実際の運用サイトですべてのユーザーに対して行うべきではありません。

「いいね！」 2
10

はい。ユーザーはボタンをクリックして、自分自身のために開発者ツールを有効にすることができます。すべてのユーザーのためではありません。

「いいね！」 1
11

こちらです：

「いいね！」 1
12

mobile_view のトグルはありますか？時々、このビューを素早く確認したいことがあります。
もしあれば、PRを作成できます！

「いいね！」 3
13

それなのに、サイドバーの切り替えはなぜですか？

「いいね！」 1
14

デスクトップモードではモバイルトグルが表示されません。モバイルまたはタブレットでのみ表示されると思われます。
また、これはすべてのボタンを同じ場所に配置することの利便性に関するものです。

「いいね！」 2
15

はい、モバイルモードは追加するのに良いもののように聞こえますね :+1:

「いいね！」 3
16

これで完了です。

「いいね！」 2
17

この便利な開発ツールについて、ぜひお礼を言いたくてご連絡しました。

利用可能なプラグインのアウトレットを特定したり、ローカライゼーション文字列を特定したりするのが、今ではとても簡単になりました。

ありがとうございます！ :smiley:

「いいね！」 6
18

しかし、404ページでは機能しませんか？

https://meta.discourse.org/ewfsezfef にアクセスし、F12 を押し、開発者ツールを有効にして、

image
image270×115 5.77 KB

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

そのページにテキストを追加したいと思っていました。

「いいね！」 3
19

現在、404ページではEmberアプリのJavaScriptが読み込まれていません。bootstrap_error_pagesという非表示のサイト設定を有効にすると、404ページをEmberアプリのフルページにすることができます。

将来的にはこれをデフォルトにするかもしれませんが、現時点では最優先事項ではありません。

「いいね！」 2
20

なるほど。OPに追加しますか？できます。

「いいね！」 1
21

はい、追加しました。

「いいね！」 3