Atualizando arquivo usando ferramenta de desenvolvedores / Firebug

Question

Existe uma maneira de salvar as alterações feitas na ferramenta para desenvolvedores do Chrome ou no Firebug diretamente no arquivo?Supondo que eu tenha acesso de leitura / gravação a esse arquivo.

Ou existe alguma ferramenta de desenvolvimento que pode atualizar as mudanças de maneira semelhante (ou IU semelhante) ??

Answer 1

Sim, no Firefox, se você também usa o excelente Desenvolvedor da Web add-on ...

Usando esse complemento, selecione Exibir código-fonte -> Exibir código-fonte gerado .
Isso abrirá o estado atual do "arquivo" HTML ¹ conforme modificado por JS e por quaisquer edições manuais feitas no Firebug.

Na janela que aparece, você pode "salvar como" o arquivo ou copiar e colar como desejar.

Observe que este arquivo gerado terá uma série de estilos Firebug (facilmente identificados) e pode ter atributos style definidos em elementos por JS.

¹ Infelizmente, ele não captura alterações em arquivos CSS ou JS vinculados.
Por esse motivo, ao fazer ajustes com o Firebug, gosto de alterar CSS e JS anexando regras de estilo e código ao "arquivo" HTML.
Assim que a página parecer / agir próxima ao desejado, as alterações serão capturadas por meio de Exibir código-fonte gerado e, em seguida, mescladas nos arquivos vinculados conforme necessário.

Answer 2

Nas ferramentas de desenvolvimento do Chrome, é possível salvar os arquivos CSS e JavaScript alterados no painel Fontes e ver quais alterações (diffs) foram feitas nesses arquivos.

Por exemplo:

1. Abra um arquivo JavaScript ou CSS no painel Fontes.

2. Clique na fonte.

3. Faça alterações.

4. Pressione Command-S ou Ctrl-S para salvar as alterações.

5. Clique com o botão direito do mouse no código-fonte (ou na árvore de fontes do painel Fontes) e selecione Modificações locais para visualizar o controle de versão.

6. Clique com o botão direito, selecione Salvar como ... e escolha um local no disco para salvar o arquivo.Os salvamentos subsequentes serão salvos neste local.

Answer 3

Existe um projeto Java para Eclipse / Chrome:

http://code.google.com/p/chromedevtools/

É apenas um depurador JavaScript (você não vê CSS ou rede etc), mas você pode configurar seu projeto Eclipse para depurar e editar os mesmos arquivos (além da edição ao vivo). Configurar os arquivos de origem é um pouco complicado na versão atual

http://code.google.com/p/chromedevtools/wiki/FeatureDebugOnRealFiles

(espero que a próxima versão seja mais fácil).

Junto com JSDT ou Aptana ou outro suporte a JavaScript, você pode ter um bom IDE + depurador para Chrome.

Answer 4

Não.O código que você está editando é o código do lado do cliente renderizado.Não há como impactar o código do servidor por meio do navegador.Em qualquer caso, a semântica de tal operação realmente falha se o (s) arquivo (s) subjacente (s) no lado do servidor é / são não estáticos.