DOM의 특정 요소에서 HTML + CSS + JS를 선택적으로 복사하는 도구

 

질문 : DOM의 특정 요소에서 HTML + CSS + JS를 선택적으로 복사하는 도구 [닫기]

---

대부분의 웹 개발자와 마찬가지로, 마크 업이 어떻게 작성되는지보기 위해 웹 사이트의 소스를 살펴 보는 것을 좋아합니다. Firebug 및 Chrome 개발자 도구와 같은 도구를 사용하면 코드를 쉽게 검사 할 수 있지만 특정 섹션을 복사하고 로컬에서 작업하려면 모든 개별 요소와 관련 CSS를 복사하는 것이 어려울 것입니다. 그리고 아마도 전체 소스를 저장하고 관련없는 코드를 잘라 내기 위해 많은 노력을 기울일 것입니다.

Firebug에서 요소를 마우스 오른쪽 버튼으로 클릭하고 "이 요소에 대해 HTML + CSS + JS 저장"옵션이 있으면 좋을 것입니다. 그러한 도구가 있습니까? 이 기능을 추가하기 위해 Firebug 또는 Chrome 개발자 도구를 확장 할 수 있습니까?

답변

---

SnappySnippet

마침내 이 도구를 만들 시간을 찾았습니다. Github에서 SnappySnippet 을 설치할 수 있습니다. 지정된 (마지막 검사 한) DOM 노드에서 HTML + CSS를 쉽게 추출 할 수 있습니다. 또한 코드를 CodePen 또는 JSFiddle로 직접 보낼 수 있습니다. 즐겨!

기타 기능

• HTML 정리 (불필요한 속성 제거, 들여 쓰기 수정)
• 읽을 수 있도록 CSS를 최적화합니다.
• 완전히 구성 가능 (모든 필터를 끌 수 있음)
• ::before 및 ::after 의사 요소와 함께 작동합니다.
• Bootstrap 및 Flat-UI 프로젝트 덕분에 멋진 UI

Code

SnappySnippet은 오픈 소스이며 GitHub에서 코드를 찾을 수 있습니다.

구현

나는 이것을 만드는 동안 꽤 많은 것을 배웠기 때문에 내가 경험 한 몇 가지 문제와 그에 대한 해결책을 공유하기로 결정했습니다. 누군가가 흥미로울 것입니다.

 

첫 번째 시도 - getMatchedCSSRules()

처음에는 원래 CSS 규칙 (웹 사이트의 CSS 파일에서 가져옴)을 검색해 보았습니다. window.getMatchedCSSRules() 덕분에 매우 간단하지만 잘 작동하지 않았습니다. 문제는 전체 문서의 컨텍스트에서 일치하는 HTML 및 CSS 선택기의 일부만 가져 갔고 HTML 스 니펫의 컨텍스트에서는 더 이상 일치하지 않는다는 것입니다. 선택자를 파싱하고 수정하는 것은 좋은 생각이 아니기 때문에이 시도를 포기했습니다.

두 번째 시도 - getComputedStyle()

그런 다음 @CollectiveCognition이 제안한 getComputedStyle() 에서 시작했습니다. 그러나 모든 스타일을 인라인하는 대신 CSS 양식 HTML을 분리하고 싶었습니다.

반응형

문제 1 - HTML에서 CSS 분리

여기에있는 해결책은 그리 아름답지는 않았지만 아주 간단했습니다. 선택한 하위 트리의 모든 노드에 ID를 할당하고 해당 ID를 사용하여 적절한 CSS 규칙을 만들었습니다.

문제 2 - 기본값이 있는 속성 제거

노드에 ID를 할당하는 것은 훌륭하게 진행되었지만 각 CSS 규칙에 ~ 300 개의 속성이있어 전체 CSS를 읽을 수 없다는 것을 알게되었습니다.
getComputedStyle() 은 주어진 요소에 대해 계산 된 가능한 모든 CSS 속성과 값을 반환합니다. 일부는 비어 있고 일부는 브라우저 기본값이 있습니다. 기본값을 제거하려면 먼저 브라우저에서 가져와야했습니다 (각 태그마다 기본값이 다릅니다). 해결책은 웹 사이트에서 가져온 요소의 스타일을 빈 <iframe> 삽입 된 동일한 요소와 비교하는 것이 었습니다. <iframe> 에는 스타일 시트가 없기 때문에 여기에 추가 한 각 요소에는 기본 브라우저 스타일 만 있습니다. 이렇게하면 중요하지 않은 대부분의 속성을 제거 할 수있었습니다.

문제 3 - 속기 속성만 유지

다음으로 내가 발견 한 것은 속기 동등한 속성이 불필요하게 인쇄되었다는 것입니다 (예 border: solid black 1px 그리고 border-color: black; border-width: 1px itd.).
이 문제를 해결하기 위해 간단히 등가 속성을 가진 속성 목록을 만들고 결과에서 필터링했습니다.

문제 4 - 접두사 속성 제거

각 규칙의 속성 수는 이전 작업 이후 상당히 적었지만, 내가 들어 -webkit- 접두사가 붙은 속성이 -webkit-app-region ? -webkit-text-emphasis-position ?).
이러한 속성 중 일부는 유용 해 보였기 때문에 유지해야하는지 궁금합니다 ( -webkit-transform-origin , -webkit-perspective-origin 등). 그래도이를 확인하는 방법을 알지 못했고 이러한 속성이 대부분 쓰레기 일 뿐이라는 것을 알고 있었기 때문에 모두 제거하기로 결정했습니다.

문제 5 - 동일한 CSS 규칙 결합

내가 발견 한 다음 문제는 동일한 CSS 규칙이 반복해서 반복된다는 것입니다 (예 : <li> 에 대해 생성 된 CSS 출력에 동일한 규칙이 있음).
이것은 규칙을 서로 비교하고 정확히 동일한 속성 및 값 세트를 가진 이들을 결합하는 문제였습니다. 대신 결과 #LI_1{...}, #LI_2{...} 내가 가진 #LI_1, #LI_2 {...} .

문제 6 - HTML 들여쓰기 정리 및 수정

결과에 만족했기 때문에 HTML로 옮겼습니다. outerHTML 속성이 서버에서 반환 된 것과 똑같은 형식을 유지하기 때문에 엉망처럼 보였습니다.
outerHTML 에서 가져온 HTML 코드는 간단한 코드 재 포맷 만 필요했습니다. 모든 IDE에서 사용할 수있는 것이기 때문에 정확히이를 수행하는 JavaScript 라이브러리가 있다고 확신했습니다. 그리고 내가 옳았다는 것이 밝혀졌습니다 (jquery-clean) . 또한 불필요한 속성 제거 기능 ( style , data-ng-repeat 등)이 있습니다.

문제 7 - 필터 CSS 손상

위에서 언급 한 필터가 스 니펫에서 CSS를 깨뜨릴 수있는 경우가 있으므로 모두 선택 사항으로 설정했습니다. 설정 메뉴에서 비활성화 할 수 있습니다.

출처 : https://stackoverflow.com/questions/4911338/tools-to-selectively-copy-htmlcssjs-from-a-specific-element-of-dom