Navegar pela Visualização de código

Na Visualização de código, é possível ver outros arquivos do projeto, pular para vários locais do documento e pesquisar no código.

Procurar arquivos

Quando o Google Web Designer está na Visualização de código, o painel Arquivos à esquerda exibe uma lista de arquivos e subpastas na pasta do projeto. O painel é atualizado automaticamente para refletir as mudanças na lista.

Abrir arquivos

Selecione um arquivo no painel para abri-lo em uma nova guia. É possível acessar os seguintes tipos de arquivo:

Arquivos de origem .html criados pelo Google Web Designer

Outros arquivos .html*

.css*

.js*

.json*

.svg*

.xml*

^{*Somente para edição na Visualização de código}

Também é possível abrir arquivos de imagem (.jpg/.jpeg, .png e .gif) para visualização. Passe o mouse sobre o nome do arquivo de imagem no painel "Arquivos" para ver uma miniatura.

Os arquivos que o Google Web Designer não consegue abrir ficam destacados em cinza.

Para abrir arquivos de outros projetos ou pastas, use o comando de menu Arquivo > Abrir...

Filtrar a lista de arquivos

Insira parte de um nome de arquivo no campo Filtrar arquivos para mostrar somente os resultados correspondentes.

Ocultar o painel "Arquivos"

Clique no botão Recolher no canto superior direito do painel "Arquivos" para ocultar a lista de documentos. Clique no botão Expandir para abrir o painel novamente.

Navegar pelo documento

Se você selecionar um elemento na Visualização de design e mudar para a de código, o cursor será posicionado no código relevante para o elemento selecionado.

Ir para uma linha

Clique no número da linha ou coluna na barra de rodapé para inserir um novo valor e pressione Enter.

Usar o minimapa

O minimapa no lado direito da janela exibe uma versão em miniatura de todo o documento na Visualização de código. A parte do código visível no editor é destacada no minimapa.

Clique no minimapa para ir à parte correspondente do documento ou arraste para cima e para baixo a fim de usar a rolagem.

É possível desativar o minimapa nas suas preferências.

Pesquisar no código

Para encontrar texto:

Acesse Editar > Localizar ou pressione Ctrl+F (Windows) ou ⌘+F (Mac) para abrir a barra de pesquisa na parte inferior da janela.

Digite o termo de pesquisa no campo Localizar...

Ative as opções de pesquisa que você quer:

Expressões regulares (.*)

Diferenciar maiúsculas de minúsculas (Aa)

Palavras inteiras ()

Restringir à seleção ()

O Google Web Designer exibe o número total de correspondências e destaca a primeira delas após a posição do cursor.

Para encontrar a próxima correspondência: clique em ou pressione Ctrl+G (Windows) ou ⌘+G (Mac).

Para encontrar a correspondência anterior: clique em ou pressione Shift+Ctrl+G (Windows) ou Shift+⌘+G (Mac).

Para selecionar todas as correspondências e editá-las simultaneamente: clique em Localizar tudo.

Pressione Esc ou clique no X para fechar a barra de pesquisa.

Para localizar e substituir texto:

Acesse Editar > Localizar/Substituir ou pressione Ctrl+Shift+F (Windows) ou ⌘+Shift+F (Mac) para abrir a barra de pesquisa e substituição na parte inferior da janela.

Insira o termo de pesquisa no campo Localizar... e o texto substituto no campo Substituir...

É possível usar as mesmas opções de localização acima, além de substituir o texto:

Para substituir a correspondência atual e encontrar a próxima, clique em Substituir.

Para substituir todas as correspondências, clique em Substituir tudo.