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가 아닌 특정 주제(topic) 페이지에서 아이콘을 클릭할 때 충돌이 발생합니다.

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

메타에서도 재현할 수 있습니다.

파이어폭스에서는 무한 렌더링 루프가 발생한다는 것도 확인할 수 있습니다:

이미지에는 숫자 및 문자열 목록: '7', '29', '_trigger', 'end', 'endor;' 옆에 "Uncaught (in promise) Error: infinite rendering invalidation detected"라는 자바스크립트 콘솔 오류 메시지가 표시되어 있습니다. 이는 코드 라인의 일부로 보입니다. (AI가 캡션을 추가함)
이미지에는 숫자 및 문자열 목록: '7', '29', '_trigger', 'end', 'endor;' 옆에 "Uncaught (in promise) Error: infinite rendering invalidation detected"라는 자바스크립트 콘솔 오류 메시지가 표시되어 있습니다. 이는 코드 라인의 일부로 보입니다. (AI가 캡션을 추가함)518×206 2.51 KB

로컬 개발 환경에서는 카んばん이 활성화된 상태에서도 정상적으로 작동합니다. 동일한 오류가 보이지만 렌더링 루프는 발생하지 않습니다.

참고로, 이 도구를 가져와 주셔서 감사합니다. 정말 편리해서 좋아합니다!

4

아! 며칠 전까지는 분명히 잘 작동했는데, 지금은 동일한 오류가 발생하네요. 조사해 보겠습니다. 보고해 주셔서 감사합니다!

6

이 커밋을 방금 병합했는데, 이 커밋은 토픽 페이지의 무한한 재렌더링 문제를 수정합니다.

8

모바일에서 이 작업을 수행할 방법을 찾지 못해, 헤더에 버튼을 추가하는 간단한 TC를 만들고 있습니다. (Plugin Outlets TC에서 영감을 받았습니다.)

9

모바일에서 개발 환경을 볼 때, 툴바가 화면 왼쪽에 표시되므로 평소와 같이 사용할 수 있습니다.

프로덕션 환경에서는 콘솔(또는 theme/theme-component의 JavaScript)에서 enableDevTools()를 호출하여 툴바를 활성화해야 합니다. 이 작업에는 성능 비용이 발생하므로 실제 프로덕션 사이트에서 모든 사용자에게 실행하지 않는 것이 좋습니다.

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

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

20

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

21

네! 추가했습니다:

23

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

image
image548×116 3.63 KB

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