Come la maggior parte degli sviluppatori web, a volte mi piace guardare la fonte dei siti Web per vedere come è costruito il loro markup. Strumenti come Firebug e Chrome Developer Tools facilitano l'ispezione del codice, ma se voglio copiare una sezione isolata e giocarci intorno localmente, sarebbe un problema copiare tutti i singoli elementi e i loro CSS associati. E probabilmente altrettanto lavoro per salvare l'intera fonte e tagliare il codice non correlato.

Sarebbe bello se potessi fare clic con il pulsante destro del mouse su un nodo in Firebug e avere un'opzione "Salva HTML + CSS per questo nodo". Esiste un tale strumento? È possibile estendere gli strumenti per sviluppatori Firebug o Chrome per aggiungere questa funzione?

SnappySnippet

Finalmente ho trovato del tempo per creare questo strumento. Puoi installare SnappySnippet da Github. Consente una facile estrazione HTML + CSS dal nodo DOM specificato (ultimo controllo). Inoltre, è possibile inviare il codice direttamente a CodePen o JSFiddle. Godere!

Altre caratteristiche

• pulisce HTML (rimuove gli attributi non necessari, corregge il rientro)
• ottimizza CSS per renderlo leggibile
• completamente configurabile (tutti i filtri possono essere disattivati)
• funziona con ::beforee ::afterpseudo-elementi
• bella interfaccia utente grazie ai progetti Bootstrap e Flat-UI

Codice

SnappySnippet è open source e puoi trovare il codice su GitHub .

Implementazione

Dato che ho imparato parecchio mentre lo facevo, ho deciso di condividere alcuni dei problemi che ho riscontrato e le mie soluzioni, forse qualcuno lo troverà interessante.

Primo tentativo: getMatchedCSSRules ()

All'inizio ho provato a recuperare le regole CSS originali (provenienti dai file CSS sul sito Web). Abbastanza sorprendentemente, questo è molto semplice grazie window.getMatchedCSSRules(), tuttavia, non ha funzionato bene. Il problema era che stavamo prendendo solo una parte dei selettori HTML e CSS che corrispondevano nel contesto dell'intero documento, che non corrispondevano più nel contesto di uno snippet HTML. Poiché l'analisi e la modifica dei selettori non sembravano una buona idea, ho rinunciato a questo tentativo.

Secondo tentativo - getComputedStyle ()

Quindi, sono partito da qualcosa che suggeriva @CollectiveCognition - getComputedStyle(). Tuttavia, volevo davvero separare i CSS dall'HTML invece di includere tutti gli stili.

Problema 1: separazione dei CSS dall'HTML

La soluzione qui non è stata molto bella ma abbastanza semplice. Ho assegnato gli ID a tutti i nodi nella sottostruttura selezionata e ho usato quell'ID per creare le regole CSS appropriate.

Problema 2: rimozione di proprietà con valori predefiniti

L'assegnazione degli ID ai nodi ha funzionato bene, tuttavia ho scoperto che ciascuna delle mie regole CSS ha ~ 300 proprietà che rendono illeggibile l'intero CSS.
Risulta che getComputedStyle()restituisce tutte le possibili proprietà CSS e valori calcolati per l'elemento dato. Alcuni di essi erano vuoti, altri avevano valori predefiniti del browser. Per rimuovere i valori predefiniti ho dovuto prima scaricarli dal browser (e ogni tag ha valori predefiniti diversi). La soluzione è stata quella di confrontare gli stili dell'elemento proveniente dal sito Web con lo stesso elemento inserito in uno spazio vuoto <iframe>. La logica qui era che non ci sono fogli di stile in un vuoto<iframe> , quindi ogni elemento che ho aggiunto lì aveva solo stili di browser predefiniti. In questo modo sono stato in grado di sbarazzarmi della maggior parte delle proprietà che erano insignificanti.

Problema 3: mantenere solo le proprietà stenografiche

La prossima cosa che ho notato è che le proprietà con equivalente stenografia sono state inutilmente stampate (ad esempio, c'era border: solid black 1pxe poi border-color: black;, e così via border-width: 1px).
Per risolvere questo, ho semplicemente creato un elenco di proprietà che hanno equivalenti di stenografia e le hanno filtrate dai risultati.

Problema 4 - rimozione delle proprietà con prefisso

Il numero di immobili a ogni regola è stata inferiore in modo significativo dopo l'operazione precedente, ma ho scoperto che ho davanzale avuto un sacco di -webkit-proprietà con il prefisso che non ho mai sentito di ( -webkit-app-region? -webkit-text-emphasis-position?).
Mi chiedevo se avrei dovuto mantenere una di queste proprietà perché alcune sembravano utili ( -webkit-transform-origin, -webkit-perspective-originecc.). Non ho capito come verificarlo, però, e poiché sapevo che la maggior parte delle volte queste proprietà sono solo spazzatura, ho deciso di rimuoverle tutte.

Problema 5: combinazione delle stesse regole CSS

Il problema successivo che ho notato è che le stesse regole CSS vengono ripetute più e più volte (ad es. Per ognuna <li>con gli stessi identici stili c'era la stessa regola nell'output CSS creato).
Si trattava solo di confrontare le regole tra loro e di combinarle esattamente con lo stesso insieme di proprietà e valori. Di conseguenza, invece di #LI_1{...}, #LI_2{...}me #LI_1, #LI_2 {...}.

Problema 6: ripulire e correggere il rientro dell'HTML

Dato che ero soddisfatto del risultato, sono passato all'HTML. Sembrava un disastro, soprattutto perché la outerHTMLproprietà lo mantiene formattato esattamente come è stato restituito dal server.
L'unica cosa che è stata presa dal codice HTML outerHTMLera una semplice riformattazione del codice. Dal momento che è qualcosa disponibile in ogni IDE, ero sicuro che esiste una libreria JavaScript che fa esattamente questo. E si scopre che avevo ragione (jquery-clean) . Inoltre, ho ulteriori extra di rimozione degli attributi ( style, data-ng-repeatecc.).

Problema 7: filtri che interrompono i CSS

Poiché esiste la possibilità che in alcuni casi i filtri sopra menzionati possano spezzare i CSS nello snippet, li ho resi opzionali. Puoi disabilitarli dal menu Impostazioni .

Inizialmente avevo posto questa domanda che cercavo una soluzione Chrome (o FireFox), ma mi sono imbattuto in questa funzione negli strumenti di sviluppo di Internet Explorer. Praticamente quello che sto cercando (tranne per il javascript)

Risultato:

I browser Webkit (non sono sicuri di FireBug) consentono di copiare facilmente l'HTML di un elemento, quindi questa è una parte del processo.

L'esecuzione di questo (nella console javascript) prima di copiare l'HTML per un elemento sposta tutti gli stili calcolati per l'elemento genitore fornito, nonché tutti gli elementi figlio, nell'attributo di stile inline che sarà quindi disponibile come parte dell'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);

}

È un hack totale e avrai un sacco di attributi CSS "junk" da superare, ma almeno dovresti iniziare.

Ho creato questo strumento anni fa per lo stesso scopo:
http://www.betterprogramming.com/htmlclipper.html

Sei il benvenuto per usarlo e migliorarlo.

Questo può essere fatto dal plugin Firebug chiamato scrapbook

È possibile selezionare l'opzione Javascript nell'impostazione

Modificare:

Questo può anche aiutare

Firequark è un'estensione di Firebug per facilitare il processo di scraping dello schermo HTML. Firequark estrae automaticamente il selettore css per uno o più nodi html da una pagina Web usando Firebug (un plugin di sviluppo web per Firefox). Il selettore CSS generato può essere fornito come input per i raschiatori di schermate html come Scrapi per estrarre informazioni. Firequark è costruito per liberare la potenza del selettore css per l'uso dello scraping dello schermo html.

divclip è una versione aggiornata di htmlclipper di Florentin Sardan

con miglioramenti moderni: ES5, HTML5, CSS con ambito ...

puoi estrarre programmaticamente un div stilizzato con:

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

Godere.

Non sono necessari plugin. Può essere fatto molto semplicemente con gli strumenti di sviluppo nativi di Internet Explorer 11 con un solo clic, molto pulito. Basta inserire un elemento e ispezionarlo, fare clic con il tasto destro su un blocco e scegliere "Copia elemento con stili". Puoi vederlo nell'immagine qui sotto.

Fornisce il codice CSS molto pulito, come

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

Ultimamente ho creato un'estensione Chrome "eXtract Snippet" per copiare l'elemento ispezionato, html e solo le query CSS e multimediali pertinenti da una pagina. Tieni presente che ciò ti darebbe l'effettivo CSS pertinente

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

Non sono a conoscenza di uno strumento con un'unica soluzione, ma puoi utilizzare l' estensione Firebug e Web Developer contemporaneamente l' .

Usa Firebug per copiare la sezione html di cui hai bisogno (Inspect Element) e Web Developer per vedere quale css è associato a un elemento (Calling Web Developer "Visualizza informazioni sullo stile" - funziona come "Inspect Element" di Firebug, ma invece di mostrare l'html markup mostra il CSS associato a quel markup).

Non è esattamente quello che vuoi (un clic per tutto), ma è abbastanza vicino e almeno intuitivo.

Ho anche bisogno di questa funzione su Firebug! Fino ad allora, un altro approccio consiste nell'utilizzare questo servizio online per rimuovere le classi e convertire i CSS in stili incorporati.

http://clipboardjs.com fa questo e abbastanza bene. Sebbene le tue aspettative sulla versione copiata siano esattamente come sull'originale, così puoi giocare e imparare con esso, potrebbe non essere realistico.

Basta copiare la parte desiderata dalla pagina Web e incollarla nell'editor wysiwyg. Controlla la fonte html facendo clic sul pulsante "fonte" sulla barra degli strumenti dell'editor.

Ho trovato questo il modo più semplice quando stavo lavorando su un sito Drupal. Uso 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;
}
});

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

Ho adattato la risposta più votata come bookmarklet trascinabile.

Basta visitare questa pagina e trascinare il pulsante "Esegui codice jQuery" sulla barra dei segnalibri.

C'è un plugin per Firefox che salva l'HTML, i CSS, ecc. Dell'intera pagina, ma non ne ho visto uno che esegua un salvataggio parziale.

Ricordo che IE 5.5 aveva quello che stavi cercando;)

Ho esaminato tutti gli strumenti citati come risposta qui. Ma forniscono CSS HTML ripetuti e sporchi con un bel viso su cui stavi fissando. Non ti danno JS.

Quello che faccio:

1. In primo luogo filtrare gli annunci che non sono richiesti nella pagina
2. Quindi, salva la pagina Web completa insieme alle risorse di collegamento.
3. Rimuovi HTML, CSS e JS non necessari
4. continua a scollegare attentamente le risorse una per una.