Wie die meisten Webentwickler schaue ich gelegentlich gerne auf die Quelle von Websites, um zu sehen, wie deren Markup erstellt wird. Tools wie Firebug und Chrome Developer Tools erleichtern das Überprüfen des Codes. Wenn ich jedoch einen isolierten Abschnitt kopieren und lokal damit herumspielen möchte, ist es schwierig, alle einzelnen Elemente und das zugehörige CSS zu kopieren. Und wahrscheinlich genauso viel Arbeit, um die gesamte Quelle zu speichern und den nicht verwandten Code auszuschneiden.

Es wäre großartig, wenn ich mit der rechten Maustaste auf einen Knoten in Firebug klicken und die Option "HTML + CSS für diesen Knoten speichern" verwenden könnte. Gibt es ein solches Tool? Ist es möglich, Firebug- oder Chrome Developer Tools zu erweitern, um diese Funktion hinzuzufügen?

SnappySnippet

Ich habe endlich Zeit gefunden, dieses Tool zu erstellen. Sie können SnappySnippet von Github installieren . Es ermöglicht eine einfache HTML + CSS-Extraktion vom angegebenen (zuletzt überprüften) DOM-Knoten. Darüber hinaus können Sie Ihren Code direkt an CodePen oder JSFiddle senden. Genießen!

Andere Eigenschaften

• Bereinigt HTML (Entfernen unnötiger Attribute, Korrigieren von Einrückungen)
• optimiert CSS, um es lesbar zu machen
• vollständig konfigurierbar (alle Filter können ausgeschaltet werden)
• arbeitet mit ::beforeund ::afterPseudoelementen
• schöne Benutzeroberfläche dank Bootstrap & Flat-UI- Projekten

Code

SnappySnippet ist Open Source und Sie können den Code auf GitHub finden .

Implementierung

Da ich dabei ziemlich viel gelernt habe, habe ich beschlossen, einige der aufgetretenen Probleme und meine Lösungen für sie zu teilen. Vielleicht wird es jemand interessant finden.

Erster Versuch - getMatchedCSSRules ()

Zuerst habe ich versucht, die ursprünglichen CSS-Regeln abzurufen (die aus CSS-Dateien auf der Website stammen). Erstaunlicherweise ist dies sehr einfach window.getMatchedCSSRules(), da es jedoch nicht gut geklappt hat. Das Problem war, dass wir nur einen Teil der HTML- und CSS-Selektoren verwendeten, die im Kontext des gesamten Dokuments übereinstimmten und im Kontext eines HTML-Snippets nicht mehr übereinstimmten. Da das Parsen und Ändern von Selektoren keine gute Idee zu sein schien, gab ich diesen Versuch auf.

Zweiter Versuch - getComputedStyle ()

Dann habe ich von etwas ausgegangen, das @CollectiveCognition vorgeschlagen hat - getComputedStyle(). Ich wollte jedoch unbedingt CSS von HTML trennen, anstatt alle Stile einzubinden.

Problem 1 - CSS von HTML trennen

Die Lösung hier war nicht sehr schön, aber recht einfach. Ich habe allen Knoten im ausgewählten Teilbaum IDs zugewiesen und diese ID verwendet, um entsprechende CSS-Regeln zu erstellen.

Problem 2 - Entfernen von Eigenschaften mit Standardwerten

Das Zuweisen von IDs zu den Knoten hat gut funktioniert, aber ich habe festgestellt, dass jede meiner CSS-Regeln ~ 300 Eigenschaften hat, die das gesamte CSS unlesbar machen.
Es stellt sich heraus, dass getComputedStyle()alle möglichen CSS-Eigenschaften und -Werte zurückgegeben werden, die für das angegebene Element berechnet wurden. Einige von ihnen waren leer, andere hatten Browser-Standardwerte. Um Standardwerte zu entfernen, musste ich sie zuerst vom Browser abrufen (und jedes Tag hat andere Standardwerte). Die Lösung bestand darin, die Stile des von der Website stammenden Elements mit demselben Element zu vergleichen, das in ein leeres Element eingefügt wurde <iframe>. Die Logik hier war, dass es in einem leeren <iframe>Format keine Stylesheets gibt , sodass jedes Element, das ich dort angehängt habe, nur Standardbrowserstile hatte. Auf diese Weise konnte ich die meisten unbedeutenden Eigenschaften beseitigen.

Problem 3 - nur Kurzschrift-Eigenschaften beibehalten

Das nächste , was ich entdeckt habe , war , dass die Eigenschaften Stenografie - Äquivalent wurden unnötig ausgedruckt (zB da war border: solid black 1pxund dann border-color: black;, border-width: 1pxitd.).
Um dies zu lösen, habe ich einfach eine Liste von Eigenschaften mit Kurzschriftäquivalenten erstellt und diese aus den Ergebnissen herausgefiltert.

Problem 4 - Entfernen von Präfixeigenschaften

Die Zahl der Objekte in jeder Regel deutlich nach der vorherige Operation niedriger war, aber ich habe festgestellt , dass ich eine Menge habe Sill -webkit-vorane Eigenschaften , dass ich nie hören von haben ( -webkit-app-region? -webkit-text-emphasis-position?).
Ich habe mich gefragt , ob ich eine dieser Eigenschaften behalten sollte , weil einige von ihnen schien nützlich ( -webkit-transform-origin, -webkit-perspective-originetc.). Ich habe jedoch nicht herausgefunden, wie ich das überprüfen kann, und da ich wusste, dass diese Eigenschaften die meiste Zeit nur Müll sind, habe ich beschlossen, sie alle zu entfernen.

Problem 5 - Kombinieren derselben CSS-Regeln

Das nächste Problem, das ich entdeckt habe, war, dass dieselben CSS-Regeln immer wieder wiederholt werden (z. B. wurde für jede <li>mit genau denselben Stilen dieselbe Regel in der erstellten CSS-Ausgabe erstellt).
Hier ging es nur darum, Regeln miteinander zu vergleichen und diese zu kombinieren, die genau die gleichen Eigenschaften und Werte hatten. Infolgedessen #LI_1{...}, #LI_2{...}bekam ich statt #LI_1, #LI_2 {...}.

Problem 6 - Bereinigen und Korrigieren des Einrückens von HTML

Da ich mit dem Ergebnis zufrieden war, wechselte ich zu HTML. Es sah nach einem Durcheinander aus, vor allem, weil die outerHTMLEigenschaft die Formatierung genau so beibehält, wie sie vom Server zurückgegeben wurde.
Das einzige, was HTML-Code outerHTMLbenötigt, war eine einfache Neuformatierung des Codes. Da es in jeder IDE verfügbar ist, war ich mir sicher, dass es eine JavaScript-Bibliothek gibt, die genau das tut. Und es stellt sich heraus, dass ich recht hatte (sehr sauber) . Was mehr ist, habe ich unnötige Attribute Entfernung extra (bekam style, data-ng-repeatetc.).

Problem 7 - Filter brechen CSS

Da unter bestimmten Umständen die oben genannten Filter möglicherweise CSS im Snippet beschädigen, habe ich alle optional gemacht. Sie können sie im Menü Einstellungen deaktivieren .

Ich habe diese Frage ursprünglich gestellt. Ich habe nach einer Chrome- (oder FireFox-) Lösung gesucht, bin jedoch in den Internet Explorer-Entwicklertools auf diese Funktion gestoßen. Ziemlich genau das, wonach ich suche (außer dem Javascript)

Ergebnis:

Mit Webkit-Browsern (bei FireBug nicht sicher) können Sie den HTML-Code eines Elements einfach kopieren. Dies ist also ein Teil des Prozesses, der nicht im Weg steht.

Wenn Sie dies (in der Javascript-Konsole) ausführen, bevor Sie den HTML-Code für ein Element kopieren, werden alle berechneten Stile für das angegebene übergeordnete Element sowie alle untergeordneten Elemente in das Inline-Stilattribut verschoben, das dann als Teil des HTML-Codes verfügbar ist .

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);

}

Es ist ein totaler Hack und Sie werden eine Menge "Junk" CSS-Attribute haben, durch die Sie waten müssen, aber Sie sollten zumindest loslegen.

Ich habe dieses Tool vor Jahren für den gleichen Zweck erstellt:
http://www.betterprogramming.com/htmlclipper.html

Sie können es gerne nutzen und verbessern.

Dies kann durch das Firebug Plugin namens Scrapbook erfolgen

Sie können die Option Javascript in der Einstellung aktivieren

Bearbeiten:

Dies kann auch helfen

Firequark ist eine Erweiterung von Firebug, um den Prozess des HTML Screen Scraping zu unterstützen. Firequark extrahiert mithilfe von Firebug (einem Webentwicklungs-Plugin für Firefox) automatisch den CSS-Selektor für einen oder mehrere HTML-Knoten von einer Webseite. Der generierte CSS-Selektor kann als Eingabe für HTML-Bildschirmschaber wie Scrapi verwendet werden, um Informationen zu extrahieren. Firequark wurde entwickelt, um die Leistung des CSS-Selektors für die Verwendung von HTML-Screen-Scraping freizusetzen.

divclip ist eine aktualisierte Version von Florentin Sardans HTML - Clipper

mit modernen Verbesserungen: ES5, HTML5, CSS mit Gültigkeitsbereich ...

Sie können ein stilisiertes Div programmgesteuert extrahieren mit:

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

Genießen.

Es werden keine Plugins benötigt. Es kann sehr einfach mit den nativen Entwicklertools von Internet Explorer 11 mit nur einem Klick durchgeführt werden, sehr sauber. Klicken Sie mit der rechten Maustaste auf einen Block und wählen Sie "Element mit Stilen kopieren". Sie können es im folgenden Bild sehen.

Es bietet den CSS-Code sehr sauber, wie

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

In letzter Zeit habe ich eine Chrome-Erweiterung "eXtract Snippet" erstellt, um das inspizierte Element, HTML und nur die relevanten CSS- und Medienabfragen von einer Seite zu kopieren. Beachten Sie, dass Sie dadurch das tatsächlich relevante CSS erhalten

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

Ein Tool mit einer einzigen Lösung hierfür ist mir nicht bekannt, aber Sie können gleichzeitig die Firebug- und Web Developer-Erweiterung verwenden .

Verwenden Sie Firebug, um den benötigten HTML-Abschnitt (Inspect Element) und Web Developer zu kopieren, um festzustellen, welches CSS einem Element zugeordnet ist (Aufruf von Web Developer "View Style Information" - es funktioniert wie Firebugs "Inspect Element", zeigt jedoch nicht das HTML an Markup zeigt das diesem Markup zugeordnete CSS an.

Es ist nicht genau das , was Sie wollen (ein Klick für alles), aber es ist ziemlich nah und zumindest intuitiv.

Ich brauche diese Funktion auch bei Firebug! Bis dahin besteht ein anderer Ansatz darin, diesen Onlinedienst zu verwenden, um Klassen zu entfernen und das CSS in Inline-Stile zu konvertieren.

http://clipboardjs.com macht das und ganz gut. Obwohl Ihre Erwartung, dass die kopierte Version genau wie im Original ist, damit Sie damit spielen und lernen können, möglicherweise nicht realistisch ist.

Kopieren Sie einfach das gewünschte Teil von der Webseite und fügen Sie es in den wysiwyg-Editor ein. Überprüfen Sie die HTML-Quelle, indem Sie in der Editor-Symbolleiste auf die Schaltfläche "Quelle" klicken.

Ich habe diesen einfachsten Weg gefunden, als ich an einer Drupal-Site gearbeitet habe. Ich benutze 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;
}
});

Verwendungszweck:$("#login_wrapper").getStyles()

Ich habe die am häufigsten gewählte Antwort als Dragabble-Lesezeichen angepasst .

Besuchen Sie einfach diese Seite und ziehen Sie die Schaltfläche "jQuery-Code ausführen" in Ihre Lesezeichenleiste.

Es gibt ein Firefox-Plugin , das HTML, CSS usw. der gesamten Seite speichert, aber ich habe noch kein Plugin gesehen, das teilweise speichert.

Ich erinnere mich, dass IE 5.5 genau das hatte, wonach Sie gesucht haben;)

Ich habe alle hier als Antwort genannten Tools durchgesehen. Aber sie geben wiederholt schmutziges HTML-CSS mit einem schönen Gesicht, auf das Sie gestarrt haben. Sie geben dir nicht JS.

Was ich mache:

1. Zuerst filtere ich Anzeigen, die auf der Seite nicht benötigt werden
2. Speichern Sie dann die vollständige Webseite zusammen mit den Verknüpfungsressourcen.
3. Entfernen Sie unnötiges HTML, CSS und JS
4. Lösen Sie die Verknüpfung der Ressourcen nacheinander sorgfältig.