웹 구성 요소 DevTools Chrome OffiDocs와 함께

기술

웹 구성 요소 및 웹 구성 요소 라이브러리를 위한 개발자 도구 웹 구성 요소 DevTools는 웹 구성 요소를 사용하는 모든 개발자를 대상으로 합니다.

제공된 도구는 현재 페이지의 사용자 정의 요소를 빠르게 살펴보고 해당 구성 요소의 속성 및 속성을 수정할 수 있는 새로운 Chrome Devtools 패널을 생성합니다.

웹 구성 요소 DevTools는 사용자 정의 요소 매니페스트(https://github.

com/webcomComponents/custom-elements-manifest) 웹 구성 요소를 분석합니다.

기능: 웹 구성 요소 DevTools는 브라우저의 UI에서 바로 다음과 같은 고급 기능을 개발자에게 제공합니다. - 페이지의 사용자 정의 요소 나열 및 페이지 내부의 액세스 가능한 iframe 나열 - 목록의 사용자 정의 요소 필터링 - 속성 검사 및 수정 사용자 정의 요소 - 사용자 정의 요소의 속성(객체 및 배열 포함) 검사 및 수정 - 전달된 이벤트 관찰 - 사용자 정의 요소의 함수 호출 및 반환 값 기록 - 페이지에서 웹 구성 요소의 소스 코드 보기 - 웹 구성 요소와 직접 상호 작용 콘솔을 통해 왜? 웹 구성 요소를 개발하는 과정에서 Lit와 같은 라이브러리가 있든 없든 일반 브라우저 개발 도구가 제공하는 것보다 구성 요소를 좀 더 제어하고 싶은 상황이 발생할 수 있습니다.

예를 들어 다음과 같이 할 수 있습니다. 요소의 속성 토글 요소의 속성 토글 요소에서 이벤트가 전달될 때 모니터링 기능 호출 그리고 웹 구성 요소로 작업할 때 일반적으로 Shadow DOM이 존재하므로 이를 수행하기가 상당히 어렵습니다. 요소의 경로를 찾으십시오.

그리고 경로를 얻었더라도 문서를 작성해야 합니다.

querySelector("내 선택기 문자열 > 요소 이름").

setAttribute("my-attr", "foo") 값을 수정하려고 할 때마다 매우 번거롭습니다.

이 사용 사례를 위해 웹 구성 요소 DevTools가 만들어졌습니다. 개발자가 버튼 클릭만으로 devtools 창에서 바로 속성, 속성 및 해당 요소의 상태를 쉽게 수정할 수 있도록 하기 위함입니다.

문제: DevTools를 사용하는 동안 발생하는 모든 문제는 GitHub 리포지토리(https://github.

com/Matsuuu/web-comComponent-devtools/issues).

추가 정보 :

- Matsuuu 제공
- 평균 평점: 별 5개(좋아요)
-개발자 이 이메일 주소는 스팸봇으로부터 보호됩니다. 당신은 자바 스크립트를 활성화해야합니다.

웹 구성 요소 DevTools 웹 extension OffiDocs와 통합 Chromium 온라인