Ferramentas para copiar seletivamente HTML + CSS + JS de sites existentes [fechado]

403

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?

Kenwarner
fonte
4
Só queria adicionar (não é uma ferramenta que você descreve, portanto, não responde), se você usa o chrome, pode selecionar um elemento e ver o "Estilo computado" à direita na seção css. Você seria capaz de copiar e colar a lista inteira em um estilo. É uma etapa extra de uma ferramenta que você deseja, mas fornece o css que você está procurando.
riv_rec
11
Não é uma resposta completa à sua pergunta, mas as ferramentas de desenvolvimento F2 do Chrome na guia "Elementos" abrirão o elemento DOM e a subárvore escolhidos para edição em linha (e cópia, se desejar).
10gistic
Uma extensão muito interessante do chrome é a "Save All Resources". Instale-o e navegue até "Economizador de recursos" na guia Ferramenta de desenvolvimento do Chrome e faça o download!
dimeros

Respostas:

580

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!

Extensão SnappySnippet Chrome

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 .

Konrad Dzwinel
fonte
@KonradDzwinel, estou procurando uma maneira de fazer isso programaticamente em uma página (para imprimir uma subárvore DOM específica, basta copiá-la para uma nova janela e print()). Quão difícil seria (para você ou alguém procurar bifurcar seu repositório) fazer isso apenas no JS como uma função que pode ser chamada?
Hashbrown
@Hashbrown Envie-me e podemos conversar sobre detalhes - acho que será bem simples.
Konrad Dzwinel
@KonradDzwinel muito obrigado pelo esforço, mas e se eu quiser obter o elemento node com a função php 'file_get_contents ($ url)', existe alguma solução, aqui está o meu post: stackoverflow.com/questions/21419857/ ...
Yassine edouiri
Ótimo trabalho! mas é possível incluir o código js que atua no elemento?
T31321
11
@KonradDzwinel alguém já me venceu: github.com/kdzwinel/SnappySnippet/issues/37 .
David Keaveny 01/02
52

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)

Origem do elemento com estilo

Resultado:

Origem do elemento com resultado de estilo

Kenwarner
fonte
5
IE11 também funciona. Mas a opção pode ser acessada com o botão direito do mouse diretamente no elemento.
Rodolfo Jorge Nemer Nogueira
15
Uau, finalmente, um exemplo em que as ferramentas do IE são superiores!
dmnd 3/09/14
7
Melhor solução que tentei comparar com todas as outras listadas nesta página. O CSS + HTML gerado é super limpo, mantendo os nomes css originais, o que significa que o html é o mesmo que o original.
xoofx
Caramba, isso é incrível. Pode confirmar as descobertas do @xoofx de que a marcação HTML permanece a mesma, mas gostaria de comentar ainda mais que ela também gera elementos de agrupamento de esqueleto pai necessários para realmente corresponder ao estilo.
precisa
Usou isso. Não foi possível obter o snippet rápido para funcionar corretamente (html e css complexos). Não acredito que isso realmente funcionou. E só para que as pessoas saibam, eu não vi esse recurso no Edge Just Explorer.
Watson
51

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.

Cognição Coletiva
fonte
3
Ótima resposta, mas ... não relacionada à resposta real, qual é a sintaxe do loop for ...? Parece-me ofuscado.
Steve Campbell
11
Isso é ótimo, apenas perde o elemento raiz. Adicione isso também: el.setAttribute ("estilo", window.getComputedStyle (el) .cssText);
Karman Kertesz 29/11
no console do chrome, .querySelector retornou nulo para mim. Então mude para o seguinte e funcionou: var el = document.getElementById ("# someid"); el.setAttribute ("estilo", window.getComputedStyle (el) .cssText); var els = el.getElementsByTagName ("*"); for (var i = -1, l = comprimento do els.; ++ i <l;) {els [i] .setAttribute ("estilo", window.getComputedStyle (els [i]). cssText); }
Viktor Tango
30

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

Você pode usar e melhorar isso.

Florentin
fonte
É exatamente disso que eu preciso agora. Muito obrigado ... pensando nesta solução disponível há 4 anos ...
fro_oo 4/15
25

Isso pode ser feito pelo Firebug Plugin chamado scrapbook

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

insira a descrição da imagem aqui

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.

Jitendra Vyas
fonte
O Scrapbook parece ótimo - infelizmente, a versão mais recente (1.4.5) e a anterior recomendada nas revisões (1.4.3) não funcionariam para mim no OSX / FF3.6.1. Alguém está trabalhando?
Peteorpeter
Eu gostaria de poder selecionar mais precisamente um nó para salvar, mas isso funcionou muito bem
kenwarner
11
Isso é meio útil, mas não resolveu minha necessidade de mover um elemento da página com o css necessário para outra página. O Scrapbook copia todas as páginas css, independentemente de ser necessário ou não para a parte selecionada da página, e não reescreve as css, o que ajudaria a evitar que os estilos colidissem com as css de outra página.
Mc0e
13

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.

ato3787045
fonte
muito bom! Funciona como um encanto! Eu fiz algumas modificações para que ele possa rodar no chrome. basta remover a dependência 'exportar' e 'exigir' e copiá-las para o snippet do chrome. então pode no console digitar o copy(divclip.bySel('.topbar'))que copiará a saída processada para a área de transferência! ;)
ken
ocorreu um erro: shellprod.msocdn.com/16.00.1692.002/en-US/JSC/O365ShellG2Plus.js:21 Falha ao executar 'postMessage' em 'DOMWindow': a origem de destino fornecida (' portal.office.com' ) não não corresponde à origem da janela do destinatário ('nulo').
Slava 27/03
10

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;
}
GarryOne
fonte
Uau, isso funcionou perfeitamente no Microsoft Edge. Tentei htmlclipper e snappysnippet, mas tive problemas em manter a capacidade de resposta dos elementos que estou tentando copiar.
Matt
isso é incrível, funciona perfeitamente bem.
snit80 3/03
5

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

melwyn pawar
fonte
Eu gosto de como isso mantém todos os seletores como no original.
hajamie
11
como isso se compara à extensão do snippet chrome?
Patoshi #
3

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.

Resultado 'Exibir informações de estilo' da extensão de desenvolvedor da Web

GmonC
fonte
É isso que eu faço, mas envolve copiar manualmente o CSS para cada elemento. O que eu acho que o OP deseja idealmente é algo que possa copiar os estilos CSS que afetam um elemento e todos os elementos aninhados - copiando-o de uma só vez, como você faz para o HTML.
Muhd # 1
3

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.

Acyra
fonte
3

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.

Moin Zaman
fonte
2

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.

Kevin Siji
fonte
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;
}
});

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

geekbytes0xff
fonte
Para minha necessidade, isso parece bastante promissor, pois evita as limitações do getComputedStyle. Eu sou muito noob javascript para ter certeza de como usá-lo para obter o texto real do css.
Mc0e
Eu mudei o uso a ser usado em jQueryvez de $, o que me deixa um pouco irritado, mas agora recebo SecurityError: The operation is insecure. algum indicador?
Mc0e
0

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.

ripper234
fonte
11
Dá um erro: Erro: SyntaxError: literal de seqüência de caracteres não terminada
Barney
@ Barney: ele quer dizer, você deve copiar a resposta lá e fazer um trecho disso. não é a resposta, mas eu sugiro para torná-lo um comentário em vez de uma resposta
Mo Hrad A
0

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

Chris Abrams
fonte
Opa! Não conseguimos encontrar essa página.
Hamza Zafeer 22/02/19
0

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