Neste tutorial, você pratica a configuração de um espaço de trabalho para usá-lo nos seus próprios projetos. Workspace permite salvar as alterações feitas no DevTools no código-fonte armazenado no seu computador.
Visão geral
O Workspace permite salvar uma mudança feita no DevTools em uma cópia local do mesmo arquivo no seu computador. Por exemplo, suponha que:
- Você tem o código-fonte do site no computador.
- Você está executando um servidor da Web local no diretório do código-fonte. Assim, o site fica acessível em
localhost:8080
. - Você tem
localhost:8080
aberto no Google Chrome e está usando o DevTools para alterar o CSS do site.
Com o espaço de trabalho ativado, as alterações de CSS feitas no DevTools serão salvas no código-fonte na área de trabalho.
Limitações
Se você estiver usando um framework moderno, ele provavelmente transformará o código-fonte de um formato fácil de manter em um formato otimizado para executar o mais rápido possível. O espaço de trabalho geralmente é capaz de mapear o código otimizado de volta para o código-fonte original com a ajuda de mapas-fonte.
A comunidade do DevTools trabalha para oferecer suporte aos recursos fornecidos pelos mapas de origem em diversos frameworks e ferramentas. Se você tiver problemas ao usar um espaço de trabalho com o framework de sua preferência ou se ele funcionar depois de alguma configuração personalizada, inicie uma conversa na lista de e-mails ou faça uma pergunta no Stack Overflow para compartilhar seu conhecimento com o restante da comunidade do DevTools.
Recurso relacionado: substituições locais
As substituições locais são outro recurso do DevTools semelhante ao espaço de trabalho. Use substituições locais para simular conteúdo da Web ou cabeçalhos de solicitação sem esperar por alterações de back-end ou para testar alterações em uma página e precisar ver essas alterações nos carregamentos da página, mas não se importa em mapear suas alterações para o código-fonte da página.
Etapa 1: configuração
Conclua este tutorial para ter experiência prática com um espaço de trabalho.
Configure a demonstração
- Clone este repositório de demonstração (link em inglês) em algum diretório do computador. Por exemplo, para
~/Desktop
. Inicie um servidor da Web local em
~/Desktop/devtools-workspace-demo
. Veja abaixo um exemplo de código para iniciar oSimpleHTTPServer
, mas é possível usar o servidor que preferir.cd ~/Desktop/devtools-workspace-demo # If your Python version is 3.X # On Windows, try "python -m http.server" or "py -3 -m http.server" python3 -m http.server # If your Python version is 2.X python -m SimpleHTTPServer
No restante deste tutorial, esse diretório será chamado de
/devtools-workspace-demo
.Abra uma guia no Google Chrome e acesse a versão hospedada localmente do site. Use um URL como
localhost:8000
para acessar. O número da porta exato pode ser diferente.
Configurar o DevTools
Abra o DevTools na página de demonstração hospedada localmente.
Acesse Origens > Espaço de trabalho e configure um espaço de trabalho na pasta
devtools-workspace-demo
que você clonou. É possível fazer isso de várias maneiras:- Arraste e solte a pasta no Editor em Sources.
- Clique no link selecionar pasta e selecione a pasta.
- Clique em Adicionar pasta e selecione a pasta.
No prompt na parte de cima, clique em Allow para que o DevTools leia e grave no diretório.
Na guia Espaço de trabalho, agora há um ponto verde ao lado de index.html
, script.js
e styles.css
. Esses pontos verdes significam que o DevTools estabeleceu um mapeamento entre os recursos de rede da página e os arquivos em devtools-workspace-demo
.
Etapa 2: salvar uma alteração de CSS no disco
Abra
/devtools-workspace-demo/styles.css
em um editor de texto. Observe como a propriedadecolor
dos elementosh1
é definida comofuchsia
.Feche o editor de texto.
De volta ao DevTools, clique na guia Elementos.
Mude o valor da propriedade
color
do elemento<h1>
para sua cor favorita. Basta seguir estas etapas:- Clique no elemento
<h1>
na Árvore DOM. - No painel Estilos, encontre a regra CSS
h1 { color: fuchsia }
e mude a cor para sua favorita. Neste exemplo, a cor foi definida como verde.
O ponto verde ao lado de
styles.css:1
no painel Styles significa que qualquer mudança feita é mapeada para/devtools-workspace-demo/styles.css
.- Clique no elemento
Abra
/devtools-workspace-demo/styles.css
em um editor de texto novamente. A propriedadecolor
agora está definida com sua cor favorita.Atualize a página. A cor do elemento
<h1>
ainda será definida como sua cor favorita. Isso funciona porque, quando você fez a mudança e o DevTools a salvou no disco. Depois, quando você atualizou a página, o servidor local veiculou a cópia modificada do arquivo do disco.
Etapa 3: salvar uma alteração de HTML no disco
Tente alterar o HTML no painel Elementos
- Abra a guia Elementos.
Clique duas vezes no conteúdo de texto do elemento
h1
, que dizWorkspaces Demo
, e substitua-o porI ❤️ Cake
.Abra
/devtools-workspace-demo/index.html
em um editor de texto. A alteração que você acabou de fazer não está lá.Atualize a página. A página volta ao título original.
Opcional: por que isso não funciona
- A árvore de nós no painel Elementos representa o DOM da página.
- Para exibir uma página, um navegador busca HTML na rede, analisa o HTML e o converte em uma árvore de nós do DOM.
- Se a página tiver JavaScript, esse JavaScript poderá adicionar, excluir ou alterar nós DOM. O CSS também pode alterar o DOM usando a propriedade
content
. - Por fim, o navegador usa o DOM para determinar qual conteúdo deve apresentar aos usuários.
- Por isso, o estado final da página que os usuários veem pode ser muito diferente do HTML buscado pelo navegador.
- Isso dificulta o processo de correção do local em que uma mudança feita no painel Elementos precisa ser salva, já que o DOM é afetado por HTML, JavaScript e CSS.
Resumindo, o HTML DOM Tree !==
.
Alterar o HTML no painel "Origens"
Se você quiser salvar uma mudança no HTML da página, use o painel Origens.
- Acesse Sources > Page.
- Clique em (índice). O HTML da página é aberto.
- Substitua
<h1>Workspaces Demo</h1>
por<h1>I ❤️ Cake</h1>
. - Pressione Command + S (Mac) ou Control + S (Windows, Linux, ChromeOS) para salvar a alteração.
Atualize a página. O elemento
<h1>
ainda está mostrando o novo texto.Abra o
/devtools-workspace-demo/index.html
. O elemento<h1>
contém o novo texto.
Etapa 4: salvar uma alteração de JavaScript no disco
O painel Origens também é o local para fazer mudanças no JavaScript. No entanto, às vezes você precisa acessar outros painéis, como Elementos ou Console, enquanto faz alterações no seu site. É possível fazer com que o painel Fontes seja aberto com outros painéis.
- Abra a guia Elementos.
- Pressione Command + Shift + P (Mac) ou Control + Shift + P (Windows, Linux, ChromeOS). O Menu de comando será aberto.
Digite
QS
e selecione Mostrar fonte rápida. Na parte de baixo da janela do DevTools, agora há uma guia Quick Source.A guia está exibindo o conteúdo de
index.html
, que é o último arquivo editado no painel Sources. A guia Quick Source oferece o editor no painel Sources, para que você possa editar arquivos enquanto outros painéis estão abertos.Pressione Command+P (Mac) ou Control+P (Windows, Linux, ChromeOS) para abrir a caixa de diálogo Abrir arquivo.
Digite
script
e selecione devtools-workspace-demo/script.js.Observe o link
Edit and save files in a workspace
na demonstração. Ele é estilizado regularmente.Adicione o seguinte código à parte inferior do script.js na guia Fonte rápida.
document.querySelector('a').style = 'font-style:italic';
Pressione Command + S (Mac) ou Control + S (Windows, Linux, ChromeOS) para salvar a alteração.
Atualize a página. O link na página está em itálico.
Próximas etapas
Você pode configurar várias pastas em um espaço de trabalho. Todas essas pastas estão listadas em Configurações > Espaço de trabalho.
Em seguida, aprenda a usar o DevTools para mudar o CSS e depurar o JavaScript.