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

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

SnappySnippet

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

다른 특징들

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

암호

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를 읽을 수 없음을 알았습니다. 주어진 요소에 대해 계산 된 가능한 모든 CSS 속성과 값
을 getComputedStyle()반환합니다. 일부는 비어 있고 일부는 브라우저 기본값이 있습니다. 기본값을 제거하려면 먼저 브라우저에서 가져와야했습니다 (각 태그마다 다른 기본값이 있습니다). 해결책은 웹 사이트에서 오는 요소의 스타일을 빈 요소에 삽입 된 동일한 요소와 비교하는 것입니다 <iframe>. 여기서의 논리는 empty에 스타일 시트가 없으므로 거기에 <iframe>추가 한 각 요소에는 기본 브라우저 스타일 만 있습니다. 이렇게하면 중요하지 않은 대부분의 속성을 제거 할 수있었습니다.

문제 3-속기 속성 만 유지

내가 발견 한 다음 것은 속기 동등한 특성을 갖는 불필요하게 인쇄 된 것이 었습니다 (이 있었다 예를 들어, border: solid black 1px다음 border-color: black;, border-width: 1pxITD.).
이 문제를 해결하기 위해 간단히 해당 속성이있는 속성 목록을 만들고 결과에서 필터링했습니다.

문제 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속성은 서버에서 반환 된 것과 똑같이 서식을 유지 하기 때문에 혼란스러워 보입니다 .
HTML 코드가 outerHTML필요한 유일한 것은 간단한 코드 재 포맷이었습니다. 모든 IDE에서 사용할 수있는 것이기 때문에 정확히 수행하는 JavaScript 라이브러리가 있다고 확신했습니다. 그리고 그것은 옳았습니다 (jquery-clean) . 무엇보다, 나는 불필요한 속성을 제거 추가 (있어 style, data-ng-repeat등).

문제 7-CSS를 깨는 필터

경우에 따라 위에서 언급 한 필터가 스 니펫에서 CSS를 손상시킬 수 있으므로 모든 필터를 선택 사항으로 설정했습니다. 설정 메뉴 에서 비활성화 할 수 있습니다 .

원래 Chrome (또는 FireFox) 솔루션을 찾고 있었지만이 질문을했지만 Internet Explorer 개발자 도구 에서이 기능을 우연히 발견했습니다. 내가 찾고있는 것 (자바 스크립트 제외)

결과:

웹킷 브라우저 (FireBug에 대해 잘 모르겠 음)를 사용하면 요소의 HTML을 쉽게 복사 할 수 있으므로 프로세스의 일부가됩니다.

요소의 HTML을 복사하기 전에 이것을 자바 스크립트 콘솔에서 실행하면 주어진 부모 요소뿐만 아니라 모든 자식 요소에 대해 계산 된 모든 스타일이 인라인 스타일 속성으로 이동하여 HTML의 일부로 사용할 수 있습니다 .

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

그것은 전체 해킹이며 당신은 "정크"CSS 속성을 많이 가지게 될 것이지만 최소한 시작해야합니다.

몇 년 전 같은 목적으로이 도구를 만들었습니다.
http://www.betterprogramming.com/htmlclipper.html

사용하고 개선 할 수 있습니다.

이것은 스크랩북 이라는 Firebug 플러그인으로 수행 할 수 있습니다

설정에서 Javascript 옵션을 확인할 수 있습니다

편집하다:

이것은 또한 도움 이 될 수 있습니다

Firequark은 HTML 화면 스크래핑 프로세스를 지원하기 위해 Firebug의 확장입니다. Firequark은 Firebug (Firefox 용 웹 개발 플러그인)를 사용하여 웹 페이지에서 단일 또는 여러 html 노드에 대한 CSS 선택기를 자동으로 추출합니다. 생성 된 CSS 선택기는 정보를 추출하기 위해 Scrapi와 같은 html 화면 스크레이퍼에 대한 입력으로 제공 될 수 있습니다. Firequark은 HTML 화면 스크래핑 사용을 위해 CSS 선택기의 성능을 발휘하도록 제작되었습니다.

divclip 은 Florentin Sardan의 htmlclipper 의 업데이트 버전입니다

ES5, HTML5, 범위가 지정된 CSS ...

다음을 사용하여 프로그래밍 방식으로 스타일이 지정된 div를 추출 할 수 있습니다.

var html = require("divclip").bySel(".article-body");
console.log(html);

즐겨.

플러그인이 필요하지 않습니다. 클릭 한 번으로 Internet Explorer 11 기본 개발자 도구를 사용하여 매우 간단하게 수행 할 수 있습니다. 요소를 마우스 오른쪽 버튼으로 클릭하고 해당 요소를 검사하고 일부 블록을 마우스 오른쪽 버튼으로 클릭하고 "스타일 요소 복사"를 선택하십시오. 아래 이미지에서 볼 수 있습니다.

CSS 코드를 매우 깨끗하게 제공합니다.

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

최근에 검사 한 요소, html 및 페이지에서 관련 CSS 및 미디어 쿼리 만 복사하기위한 크롬 확장 프로그램 "eXtract Snippet"을 만들었습니다. 이것은 실제 CSS와 관련이 있습니다.

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=ko

이에 대한 단일 솔루션을 갖춘 도구는 모릅니다. 그러나 Firebug 및 Web Developer 확장 을 동시에 사용할 수 있습니다 .

Firebug를 사용하여 필요한 html 섹션 (요소 검사) 및 웹 개발자를 복사하여 요소와 연관된 CSS를 확인하십시오 (웹 개발자 "스타일 정보보기"-Firebug의 "요소 검사"와 유사하지만 HTML을 표시하는 대신 작동 함) 마크 업은 해당 마크 업과 관련된 CSS를 보여줍니다).

정확히 원하는 것은 아니지만 (한 번의 클릭으로 모든 것이 가능), 아주 가깝고 직관적입니다.

Firebug에서도이 기능이 필요합니다! 그때까지 다른 접근 방식은 이 온라인 서비스를 사용 하여 클래스를 제거하고 CSS를 인라인 스타일로 변환하는 것입니다.

http://clipboardjs.com 은 이것을 잘 수행합니다. 복사 한 버전에 대한 기대가 원본과 똑같아 서 연주하고 배울 수 있지만 현실적이지 않을 수 있습니다.

웹 페이지에서 원하는 부분을 복사하여 wysiwyg 편집기에 붙여 넣으십시오. 편집기 툴바에서 "소스"버튼을 클릭하여 HTML 소스를 확인하십시오.

Drupal 사이트에서 작업 할 때 가장 쉬운 방법을 찾았습니다. wysiwyg CKeditor를 사용합니다.

jQuery.fn.extend({
getStyles: function() {
    var rulesUsed = [];
    var sheets = document.styleSheets;
    for (var c = 0; c < sheets.length; c++) {
        var rules = sheets[c].rules || sheets[c].cssRules;
        for (var r = 0; r < rules.length; r++) {
            var selectorText = rules[r].selectorText.toLowerCase().replace(":hover","");
            if (this.is(selectorText) || this.find(selectorText).length > 0) {
                rulesUsed.push(rules[r]);
            }
        }
    }
    var style = rulesUsed.map(function(cssRule) {
        return cssRule.selectorText.toLowerCase() + ' { ' + cssRule.style.cssText.toLowerCase() + ' }';
    }).join("\n");
    return style;
}
});

용법:$("#login_wrapper").getStyles()

나는 적응 한 상단이 대답을 투표 dragabble 북마크로.

이 페이지를 방문 하여 "jQuery Code 실행"버튼을 북마크 바로 드래그하십시오.

가 파이어 폭스 플러그인전체 페이지의 HTML, CSS 등을 저장 이 있지만 부분 저장을 수행하는 을 보지 못했습니다.

IE 5.5는 당신이 찾고 있던 것을 기억합니다.)

여기에 답변으로 언급 된 모든 도구를 살펴 보았습니다. 그러나 그들은 당신이 쳐다보고있는 아름다운 얼굴로 반복되고 더러운 HTML CSS를 제공합니다. 그들은 당신에게 JS를주지 않습니다.

내가하는 일 :

1. 먼저 페이지에 필요없는 광고를 필터링합니다.
2. 그런 다음 링크 리소스와 함께 완전한 웹 페이지를 저장하십시오.
3. 불필요한 HTML, CSS 및 JS 제거
4. 자원을 하나씩 조심스럽게 연결 해제하십시오.