Discourse 개발자 도구 모음 소개

개발
1

개발 환경에서 최신 버전의 Discourse 코어를 실행하면 화면 왼쪽에 새로운 툴바가 표시되는 것을 확인할 수 있습니다:

Developer Tools
Developer Tools804×536 21.7 KB

이 툴바를 사용하면 일반적으로 필요한 개발 도구에 원클릭으로 접근할 수 있습니다. 현재까지 다음과 같은 기능이 제공됩니다:

:electric_plug: 플러그인 아웃렛 디버그

이 기능은 모든 플러그인 아웃렛을 표시하며, 모든 사용 가능한 @outletArgs의 실시간 값을 보여주는 툴팁을 제공합니다.

이 기능은 인기 있는 플러그인 아웃렛 위치 테마 컴포넌트와 이전에 나온 플러그인에서 영감을 받아 만들어졌습니다. 하지만 그들과는 달리 코어와의 긴밀한 통합 덕분에 항상 최신 아웃렛 및 인자와 100% 동기화되어 있습니다.

:ambulance: 안전 모드

안전 모드를 켜고 끌 수 있습니다.

:scroll: 상세 로컬라이제이션

상세 로컬라이제이션 기능을 켜고 끌 수 있습니다.

개발 환경에서는 기본적으로 활성화되어 있으며, ‘X’ 버튼을 사용하여 비활성화할 수 있습니다.

프로덕션 환경에서는 브라우저 콘솔에서 enableDevTools()를 실행하여 활성화할 수 있습니다. Meta에서도 직접 시도해 볼 수 있습니다. enableDevTools()가 사용 불가능한 경우, 전체 Ember 앱이 로드되지 않는 오류 페이지에 있는 것일 가능성이 큽니다.

앞으로 몇 주/몇 달 내에 더 많은 도구를 추가할 계획이므로 계속 지켜봐 주세요! 피드백이나 도구 아이디어가 있다면 아래에서 알려주세요!

2

Clicking the :electric_plug: icon to show outlets makes Chrome crash, making the page/tab unresponsive. I disabled my Chrome extensions, but it still crashes.

More specifically, it crashes when clicking the icon while on a topic (not only on meta).

On Firefox/Edge, it works but there’s an error in the console:

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

I can reproduce it on Meta as well.

On Firefox, you can see that there is also a rendering infinite loop:

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

It works fine on a local dev installation, even with Kanban enabled. I see the same error, but there is no rendering loop.

By the way, thanks for bringing this tool, it’s really convenient, love it!

4

Huh! It definitely worked a few days ago, but now I see the same error. I’ll investigate - thanks for the reports!

6

Just merged this commit which will fix the infinite-rerendering on the topic page

8

Since I don’t see any way to do this on mobile, I’m working on a simple TC to add a button to the header (inspired by the Plugin Outlets TC).

9

When viewing a development environment on mobile, the toolbar will appear on the left of the screen so you can use it as normal.

In production environments, you’ll need to call enableDevTools() from the console (or from theme/theme-component javascript) to turn on the toolbar. Note that this has a performance cost, so you shouldn’t do it for all users on a real production site.

10

Yep. Users can click the button to activate dev tools for them. Not for all users.

11

Here it is:

12

Can we have a toggle for mobile_view? Sometimes, I want to check quickly this view.
I can make a PR if so!

13

Why not the toggle in the sidebar though?

14

You don’t have the mobile toggle in desktop mode. I believe it appears only on mobile or tablet.
Also, this is about the convenience of having all the buttons in the same place.

15

Sure, mobile mode sounds like a good one to add :+1:

16

There we go:

https://github.com/discourse/discourse/pull/31369

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 페이지에서는 Ember 앱의 JS가 로드되지 않습니다. 숨겨진 사이트 설정인 bootstrap_error_pages를 활성화하면 404 페이지를 전체 Ember 앱 페이지로 만들 수 있습니다.

앞으로 이 설정을 기본값으로 변경할 수도 있지만, 현재 최우선 순위에는 있지 않습니다.

20

맞는 말이네요. 원글에 그걸 추가하면 어떨까요? 제가 할 수 있을 것 같습니다.

21

네! 추가했습니다:

23

이것은 여전히 작동하나요? Meta(또는 다른 사이트)에서 시도해 보면 다음과 같은 오류가 발생합니다:

image
image548×116 3.63 KB

그리고 도구 모음이 표시되지 않습니다.