Como a maioria dos desenvolvedores da Web, ocasionalmente gosto de olhar a fonte dos sites para ver como sua marcação é criada. Ferramentas como o Firebug e as Ferramentas para desenvolvedores do Chrome facilitam a inspeção do código, mas se eu quiser copiar uma seção isolada e brincar com ela localmente, seria difícil copiar todos os elementos individuais e seus css associados. E, provavelmente, tanto trabalho para salvar a fonte inteira e cortar o código não relacionado.

Seria ótimo se eu pudesse clicar com o botão direito do mouse em um nó no Firebug e ter a opção "Salvar HTML + CSS para este nó". Existe uma ferramenta desse tipo? É possível estender o Firebug ou o Chrome Developer Tools para adicionar esse recurso?

SnappySnippet

Finalmente encontrei algum tempo para criar esta ferramenta. Você pode instalar o SnappySnippet no Github. Permite fácil extração de HTML + CSS do nó DOM especificado (última inspeção). Além disso, você pode enviar seu código diretamente para o CodePen ou JSFiddle. Aproveitar!

Outras características

• limpa HTML (removendo atributos desnecessários, corrigindo recuo)
• otimiza CSS para torná-lo legível
• totalmente configurável (todos os filtros podem ser desligados)
• trabalha com ::beforee ::afterpseudoelementos
• interface agradável graças aos projetos Bootstrap e Flat-UI

Código

O SnappySnippet é de código aberto e você pode encontrar o código no GitHub .

Implementação

Como aprendi bastante ao fazer isso, decidi compartilhar alguns dos problemas que tive e minhas soluções para eles, talvez alguém ache isso interessante.

Primeira tentativa - getMatchedCSSRules ()

No começo, tentei recuperar as regras CSS originais (provenientes de arquivos CSS no site). Surpreendentemente, isso é muito simples graças a window.getMatchedCSSRules(), no entanto, não deu certo. O problema era que estávamos usando apenas uma parte dos seletores HTML e CSS correspondentes no contexto de todo o documento, que não correspondiam mais no contexto de um snippet HTML. Como analisar e modificar seletores não parecia uma boa ideia, desisti dessa tentativa.

Segunda tentativa - getComputedStyle ()

Então, comecei de algo que o @CollectiveCognition sugeriu - getComputedStyle(). No entanto, eu realmente queria separar o HTML do formulário CSS em vez de incluir todos os estilos.

Problema 1 - separando CSS de HTML

A solução aqui não era muito bonita, mas bastante direta. Designei IDs para todos os nós na subárvore selecionada e usei esse ID para criar regras CSS apropriadas.

Problema 2 - removendo propriedades com valores padrão

Atribuir IDs aos nós funcionou bem, no entanto, descobri que cada uma das minhas regras CSS possui ~ 300 propriedades, tornando todo o CSS ilegível.
Acontece que getComputedStyle()retorna todas as propriedades e valores possíveis de CSS calculados para o elemento especificado. Alguns deles estavam vazios, outros tinham valores padrão do navegador. Para remover os valores padrão, tive que obtê-los do navegador primeiro (e cada tag possui valores padrão diferentes). A solução foi comparar os estilos do elemento proveniente do site com o mesmo elemento inserido em um vazio <iframe>. A lógica aqui era que não há folhas de estilo vazias <iframe>; portanto, cada elemento que eu anexei lá tinha apenas estilos de navegador padrão. Dessa forma, consegui me livrar da maioria das propriedades que eram insignificantes.

Problema 3 - mantendo apenas propriedades abreviadas

A próxima coisa que descobri foi que as propriedades com taquigrafia equivalente eram desnecessariamente impressas (por exemplo, havia border: solid black 1pxe então border-color: black;, border-width: 1pxitd.).
Para resolver isso, simplesmente criei uma lista de propriedades que possuem equivalentes abreviados e as filtramos dos resultados.

Problema 4 - removendo propriedades prefixadas

O número de propriedades em cada regra foi reduzir significativamente após a operação anterior, mas eu descobri que eu peitoril tinha um monte de -webkit-propriedades prefixadas que eu nunca ouvir de ( -webkit-app-region? -webkit-text-emphasis-position?).
Fiquei pensando se eu deveria manter alguma dessas propriedades porque algumas delas pareciam úteis ( -webkit-transform-origin, -webkit-perspective-originetc.). No entanto, não descobri como verificar isso e, como sabia que na maioria das vezes essas propriedades são apenas lixo, decidi removê-las.

Problema 5 - combinando as mesmas regras CSS

O próximo problema que vi foi que as mesmas regras CSS são repetidas várias vezes (por exemplo, para cada uma <li>com exatamente os mesmos estilos, havia a mesma regra na saída CSS criada).
Era apenas uma questão de comparar regras e combinar essas que tinham exatamente o mesmo conjunto de propriedades e valores. Como resultado, em vez de #LI_1{...}, #LI_2{...}eu ter #LI_1, #LI_2 {...}.

Problema 6 - limpando e corrigindo o recuo do HTML

Desde que fiquei feliz com o resultado, mudei para HTML. Parecia uma bagunça, principalmente porque a outerHTMLpropriedade a mantém formatada exatamente como foi devolvida do servidor.
A única coisa que o código HTML retirado outerHTMLera necessário: uma simples reformatação do código. Como é algo disponível em todo IDE, eu tinha certeza de que há uma biblioteca JavaScript que faz exatamente isso. E acontece que eu estava certa (limpa jquery) . Além do mais, eu tenho remoção extra de atributos desnecessários ( style, data-ng-repeatetc.).

Problema 7 - filtros quebrando CSS

Como existe a possibilidade de que, em algumas circunstâncias, os filtros mencionados acima possam quebrar o CSS no snippet, eu os tornei opcionais. Você pode desativá-los no menu Configurações .

Originalmente, fiz esta pergunta: estava procurando uma solução Chrome (ou FireFox), mas me deparei com esse recurso nas ferramentas de desenvolvedor do Internet Explorer. Praticamente o que estou procurando (exceto o javascript)

Resultado:

Os navegadores Webkit (não tenho certeza sobre o FireBug) permitem que você copie o HTML de um elemento facilmente, de modo que essa é uma parte do processo fora do caminho.

A execução disso (no console javascript) antes de copiar o HTML de um elemento moverá todos os estilos computados para o elemento pai fornecido, bem como todos os elementos filhos, para o atributo de estilo inline, que estará disponível como parte do 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);

}

É um hack total e você terá muitos atributos "lixo" do CSS para percorrer, mas pelo menos deve começar.

Eu criei essa ferramenta anos atrás com o mesmo objetivo:
http://www.betterprogramming.com/htmlclipper.html

Você pode usar e melhorar isso.

Isso pode ser feito pelo Firebug Plugin chamado scrapbook

Você pode verificar a opção Javascript na configuração

Editar:

Isso também pode ajudar

Firequark é uma extensão do Firebug para ajudar no processo de Raspagem de Tela HTML. O Firequark extrai automaticamente o seletor de css para um ou vários nós html de uma página da web usando o Firebug (um plug-in de desenvolvimento da web para o Firefox). O seletor de css gerado pode ser fornecido como entrada para os raspadores de tela html, como o Scrapi, para extrair informações. O Firequark foi desenvolvido para liberar o poder do seletor de css para uso de raspagem de tela html.

divclip é uma versão atualizada do htmlclipper de Florentin Sardan

com aprimoramentos modernos: ES5, HTML5, CSS com escopo definido ...

você pode extrair programaticamente uma div estilizada com:

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

Aproveitar.

Não há plugins necessários. Isso pode ser feito de maneira muito simples com as Ferramentas de Desenvolvedor nativas do Internet Explorer 11 com apenas um clique, muito limpas. Basta clicar em um elemento e inspecioná-lo. Clique com o botão direito do mouse em algum bloco e escolha "Copiar elemento com estilos". Você pode vê-lo na imagem abaixo.

Ele fornece o código css muito limpo, como

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

Ultimamente, criei uma extensão do Chrome "eXtract Snippet" para copiar o elemento inspecionado, html e apenas as consultas relevantes de CSS e mídia de uma página. Observe que isso forneceria o CSS relevante relevante

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

Desconheço uma ferramenta com uma solução única para isso, mas você pode usar a extensão Firebug e Web Developer ao mesmo tempo.

Use o Firebug para copiar a seção html que você precisa (Inspect Element) e o Web Developer para ver qual css está associado a um elemento (chamar o desenvolvedor da Web "Visualizar informações de estilo" - funciona como o "Inspect Element" do Firebug, mas em vez de mostrar o html marcação mostra o CSS associado a essa marcação).

Não é exatamente o que você deseja (um clique para tudo), mas é bem próximo e pelo menos intuitivo.

Eu também preciso desse recurso no Firebug! Até então, outra abordagem é usar esse serviço online para remover classes e converter o css em estilos embutidos.

http://clipboardjs.com faz isso e muito bem. Embora sua expectativa da versão copiada seja exatamente igual à original, para que você possa brincar e aprender com ela, pode não ser realista.

Basta copiar a parte desejada da página da Web e colá-la no editor wysiwyg. Verifique a fonte html clicando no botão "source" na barra de ferramentas do editor.

Eu achei a maneira mais fácil quando estava trabalhando em um site do Drupal. Eu uso o 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;
}
});

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

Eu adaptei o topo votou resposta como um bookmarklet dragabble.

Basta visitar esta página e arraste o botão "Executar código jQuery" para a barra de favoritos.

Existe um plugin do firefox que salva o HTML, CSS, etc. da página inteira, mas não vi nenhum que faça um salvamento parcial.

Lembro-me que o IE 5.5 tinha o que você estava procurando;)

Passei por todas as ferramentas mencionadas como resposta aqui. Mas eles fornecem CSS HTML sujo e repetido com um rosto bonito no qual você estava olhando. Eles não dão JS.

O que eu faço:

1. Primeiro eu filtro anúncios que não são obrigatórios na página
2. Em seguida, salve a página da web completa junto com os recursos de vinculação.
3. Remova HTML, CSS e JS desnecessários
4. continue a desvincular recursos um por um com cuidado.