Представляем панель разработчика Discourse

Разработка
1

При запуске последней версии ядра Discourse в среде разработки вы заметите новую панель инструментов в левой части экрана:

Developer Tools
Developer Tools804×536 21.7 KB

Она предоставляет одношаговый доступ к часто используемым инструментам для разработчиков. На данный момент доступны:

:electric_plug: Отладка выходных точек плагинов

Показывает все выходные точки плагинов, с всплывающими подсказками, отображающими значения в реальном времени всех доступных @outletArgs.

Эта функция была вдохновлена популярным тематическим компонентом расположение выходных точек плагинов и предыдущим плагином. Однако, в отличие от них, тесная интеграция с ядром означает, что она всегда может быть на 100% актуальной с последними выходными точками и аргументами.

:ambulance: Безопасный режим

Включает и выключает безопасный режим.

:scroll: Подробная локализация

Включает и выключает функцию подробной локализации.

В среде разработки эта функция включена по умолчанию и может быть отключена с помощью кнопки «X».

В рабочей среде её можно включить, выполнив enableDevTools() в консоли браузера. Вы даже можете попробовать это здесь, на Meta! Если enableDevTools() недоступна, скорее всего, вы находитесь на странице ошибки, где не загружается полное приложение Ember.

Мы планируем добавить больше инструментов в ближайшие недели и месяцы, так что следите за обновлениями! Если у вас есть отзывы или идеи для новых инструментов, дайте нам знать ниже!

2

При нажатии на иконку :electric_plug: для отображения слотов Chrome аварийно завершает работу, из-за чего страница/вкладка перестаёт отвечать. Я отключил расширения Chrome, но проблема сохраняется.

Если быть точнее, сбой происходит при нажатии на иконку, когда вы находитесь в теме (не только на Meta).

В Firefox/Edge всё работает, но в консоли появляется ошибка:

Multiple connectors were registered for the discovery-list-area outlet. Using the first. 
Array [ undefined, "discovery-list-area/kanban-board (discourse/theme-351/discourse/connectors/discovery-list-area/kanban-board)" ]
3

Я могу воспроизвести это и в Meta.

В Firefox видно, что также есть бесконечный цикл рендеринга:

На изображении отображается сообщение об ошибке в консоли JavaScript «Uncaught (in promise) Error: infinite rendering invalidation detected» рядом со списком чисел и строк: '7', '29', '_trigger', 'end', 'endor;', которые, похоже, являются частью строки кода. (Подписано ИИ)
На изображении отображается сообщение об ошибке в консоли JavaScript «Uncaught (in promise) Error: infinite rendering invalidation detected» рядом со списком чисел и строк: '7', '29', '_trigger', 'end', 'endor;', которые, похоже, являются частью строки кода. (Подписано ИИ)518×206 2.51 KB

В локальной установке для разработки всё работает нормально, даже при включённом Канбане. Я вижу ту же ошибку, но цикла рендеринга нет.

Кстати, спасибо за этот инструмент — он очень удобный, мне нравится!

4

Хм! Несколько дней назад это точно работало, но теперь я вижу ту же ошибку. Я разберусь — спасибо за сообщения!

6

Только что объединён этот коммит, который исправит бесконечную перерисовку на странице темы.

8

Поскольку я не вижу способа сделать это на мобильном устройстве, я работаю над простым TC для добавления кнопки в заголовок (вдохновлено TC Plugin Outlets).

9

При просмотре среды разработки на мобильном устройстве панель инструментов появится слева на экране, чтобы вы могли использовать её как обычно.

В производственных средах вам нужно вызвать enableDevTools() из консоли (или из JavaScript темы/компонента темы), чтобы включить панель инструментов. Обратите внимание, что это влияет на производительность, поэтому не следует делать это для всех пользователей на реальном производственном сайте.

10

Да. Пользователи могут нажать кнопку, чтобы включить инструменты разработчика для себя. Не для всех пользователей.

11

Вот оно:

12

Можно добавить переключатель для mobile_view? Иногда мне нужно быстро проверить этот вид.
Если нужно, я могу сделать PR!

13

Почему же не переключатель в боковой панели?

14

У вас нет переключателя мобильной версии в режиме рабочего стола. Я полагаю, он появляется только на мобильных устройствах или планшетах. Кроме того, речь идёт о удобстве расположения всех кнопок в одном месте.

15

Конечно, мобильный режим — отличная идея для добавления :+1:

16

Вот и всё:

17

Хочу просто поблагодарить вас за этот удобный инструмент для разработчиков.

Теперь определить доступные точки подключения плагинов или найти строки локализации — проще простого.

Спасибо! :smiley:

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

Я надеялся добавить на эту страницу какой-то текст.

19

В данный момент страницы 404 не загружают JS-файлы приложения Ember. Существует скрытая настройка сайта bootstrap_error_pages, которую можно включить, чтобы сделать их полноценными страницами приложения Ember.

Возможно, в будущем мы сделаем это настройкой по умолчанию, но в данный момент это не входит в число наших приоритетов.

20

Логично. Может, добавить это в исходный пост? Похоже, я могу это сделать.

21

Конечно! Добавлено:

23

Это всё ещё работает? Когда я пробую это на Meta (или любом другом сайте), у меня появляется следующее:

image
image548×116 3.63 KB

И никакой панели инструментов.