Tools zum selektiven Kopieren von HTML + CSS + JS von vorhandenen Websites [geschlossen]

403

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?

Kenwarner
quelle
4
Ich wollte nur hinzufügen (kein Werkzeug, wie Sie es beschreiben, also keine Antwort geben). Wenn Sie Chrome verwenden, können Sie ein Element auswählen und den "Berechneten Stil" rechts im CSS-Abschnitt anzeigen. Sie können die gesamte Liste kopieren und in einen Stil einfügen. Es ist ein zusätzlicher Schritt von einem Tool, das Sie möchten, aber es gibt Ihnen das CSS, das Sie suchen.
Riv_rec
1
Keine vollständige Antwort auf Ihre Frage, aber F2 in den Chrome-Entwicklungstools auf der Registerkarte "Elemente" öffnet das ausgewählte DOM-Element und den Teilbaum für die Inline-Bearbeitung (und das Kopieren, wenn Sie möchten).
10gistic
Eine sehr interessante Erweiterung von Chrome ist "Save All Resources". Installieren Sie es und navigieren Sie dann zu "Resources Saver" auf der Registerkarte "Chrome Dev Tool" und laden Sie es herunter!
Dimeros

Antworten:

580

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!

SnappySnippet Chrome-Erweiterung

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 .

Konrad Dzwinel
quelle
@KonradDzwinel, ich suche nach einer Möglichkeit, dies programmgesteuert innerhalb einer Seite zu tun (Um einen bestimmten DOM-Teilbaum zu drucken, kopieren Sie ihn einfach in ein neues Fenster und print()). Wie schwer wäre es (für Sie oder für jemanden, Ihr Repo zu teilen), dies allein in JS als aufrufbare Funktion zu machen?
Hashbrown
@ Hashbrown Mailen Sie mir und wir können Details besprechen - ich denke, es wird ziemlich einfach sein.
Konrad Dzwinel
@KonradDzwinel Vielen Dank für die Mühe, aber was ist, wenn ich das Knotenelement mit der PHP-Funktion 'file_get_contents ($ url)' erhalten möchte, gibt es eine Lösung, hier ist mein Beitrag: stackoverflow.com/questions/21419857/ …
Yassine edouiri
Gute Arbeit! Aber ist es möglich, den js-Code einzuschließen, der auf das Element wirkt?
t31321
1
@KonradDzwinel jemand hat mich schon geschlagen: github.com/kdzwinel/SnappySnippet/issues/37 .
David Keaveny
52

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)

Elementquelle mit Stil

Ergebnis:

Elementquelle mit Style-Ergebnis

Kenwarner
quelle
5
IE11 funktioniert auch. Die Option ist jedoch verfügbar, wenn Sie mit der rechten Maustaste direkt auf das Element klicken.
Rodolfo Jorge Nemer Nogueira
15
Wow, endlich ein Beispiel, wo IE-Devtools überlegen sind!
dmnd
7
Beste Lösung, die ich versucht habe, mit allen anderen auf dieser Seite aufgeführten zu vergleichen. Das generierte CSS + HTML ist super sauber, während die ursprünglichen CSS-Namen beibehalten werden, was bedeutet, dass das HTML mit dem Original identisch ist.
Xoofx
Heiliger Mist, das ist großartig. Kann die Ergebnisse von @xoofx bestätigen, dass das HTML-Markup das gleiche bleibt, wollte aber weiter kommentieren, dass es auch übergeordnete Skeleton-Wrapping-Elemente ausgibt, die erforderlich sind, um wirklich dem Stil zu entsprechen.
Daniel Sokolowski
Benutzte dies. Das bissige Snippet konnte nicht richtig funktionieren (komplexes HTML & CSS). Ich kann nicht glauben, dass das tatsächlich funktioniert hat. Und nur damit die Leute wissen, habe ich diese Funktion im Edge-Explorer nicht gesehen.
Watson
51

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.

Kollektive Erkenntnis
quelle
3
Tolle Antwort, aber ... unabhängig von der tatsächlichen Antwort, was ist mit der for ... -Schleifensyntax? Es liest sich für mich als verschleiert.
Steve Campbell
1
Das ist großartig, es fehlt nur das Wurzelelement. Fügen Sie dies ebenfalls hinzu: el.setAttribute ("style", window.getComputedStyle (el) .cssText);
Karman Kertesz
In der Chrome-Konsole hat .querySelector für mich null zurückgegeben. Ändern Sie es also wie folgt und es hat funktioniert: var el = document.getElementById ("# someid"); el.setAttribute ("style", window.getComputedStyle (el) .cssText); var els = el.getElementsByTagName ("*"); für (var i = -1, l = els.length; ++ i <l;) {els [i] .setAttribute ("style", window.getComputedStyle (els [i]). cssText); }
Viktor Tango
30

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.

Florentin
quelle
Genau das brauche ich gerade. Vielen Dank ...
ich
25

Dies kann durch das Firebug Plugin namens Scrapbook erfolgen

Sie können die Option Javascript in der Einstellung aktivieren

Geben Sie hier die Bildbeschreibung ein

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.

Jitendra Vyas
quelle
Scrapbook sieht gut aus - leider würden sowohl die neueste Version (1.4.5) als auch eine in den Testberichten (1.4.3) empfohlene Version unter OSX / FF3.6.1 für mich nicht funktionieren. Hat jemand das funktioniert?
Peteorpeter
Ich wünschte, ich könnte einen Knoten zum Speichern genauer auswählen, aber das funktionierte ziemlich gut
Kenwarner
1
Dies ist ein bisschen hilfreich, hat aber meine Notwendigkeit, ein Seitenelement mit dem erforderlichen CSS auf eine andere Seite zu verschieben, nicht gelöst. Scrapbook kopiert alle CSS-Seiten, unabhängig davon, ob sie für den ausgewählten Teil der Seite benötigt werden oder nicht, und schreibt die CSS nicht neu, um zu vermeiden, dass die Stile mit der CSS einer anderen Seite kollidieren.
Mc0e
13

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.

ato3787045
quelle
tolle Sache! klappt wunderbar! Ich habe einige Modifikationen vorgenommen, damit es nur in Chrom laufen kann. Entfernen Sie einfach die Abhängigkeit 'export' und 'require' und kopieren Sie sie in das Chrome-Snippet. Geben Sie dann in die Konsole ein, copy(divclip.bySel('.topbar'))was die verarbeitete Ausgabe in die Zwischenablage kopieren soll! ;)
Ken
Fehler: shellprod.msocdn.com/16.00.1692.002/en-US/JSC/O365ShellG2Plus.js:21 Fehler beim Ausführen von 'postMessage' in 'DOMWindow': Der angegebene Zielursprung (' portal.office.com' ) tut dies stimmt nicht mit dem Ursprung des Empfängerfensters überein ('null').
Slava
10

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;
}
GarryOne
quelle
Wow, das hat in Microsoft Edge perfekt funktioniert. Versuchte htmlclipper und snappysnippet, hatte aber Probleme, die Reaktionsfähigkeit der Elemente, die ich zu kopieren versuche, beizubehalten.
Matt
Das ist erstaunlich, funktioniert perfekt.
snit80
5

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

Melwyn Pawar
quelle
Mir gefällt, wie dies alle Selektoren wie im Original hält.
Hajamie
1
Wie ist das im Vergleich zu einer bissigen Snippet-Chrom-Erweiterung?
Patoshi
3

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.

Das Ergebnis "Stilinformationen anzeigen" stammt aus der Web Developer Extension

GmonC
quelle
Dies ist, was ich tue, aber es beinhaltet das manuelle Kopieren des CSS für jedes Element. Ich denke, das OP möchte im Idealfall etwas, das die CSS-Stile kopieren kann, die sich auf ein Element und alle verschachtelten Elemente auswirken. Kopieren Sie es auf einmal, wie Sie es für HTML tun.
Muhd
3

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.

Acyra
quelle
3

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.

Moin Zaman
quelle
2

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.

Kevin Siji
quelle
2
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()

geekbytes0xff
quelle
Für meine Bedürfnisse sieht dies ziemlich vielversprechend aus, da es die Einschränkungen von getComputedStyle vermeidet. Ich bin einfach zu sehr ein Javascript-Neuling, um sicher zu sein, wie man es benutzt, um den eigentlichen Text des CSS zu erhalten.
Mc0e
Ich habe die Verwendung geändert, um jQuerystatt zu verwenden $, was mich ein wenig bringt, aber jetzt bekomme ich SecurityError: The operation is insecure. irgendwelche Hinweise?
Mc0e
0

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.

ripper234
quelle
1
Gibt einen Fehler: Fehler: SyntaxError: nicht abgeschlossenes String-Literal
Barney
@Barney: Er meint, du solltest die Antwort dort kopieren und daraus einen Ausschnitt machen. Es ist nicht die Antwort, aber ich schlage vor, einen Kommentar anstelle einer Antwort zu machen
Mo Hrad A
0

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

Chris Abrams
quelle
Hoppla! Wir können diese Seite nicht finden.
Hamza Zafeer
0

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.
Amit Kumar Gupta
quelle