Visual Studio Code

Como configurar o VSCode para debug de código PHP

Algo essencial para qualquer programador é saber debugar seu código. Nesse post vamos aprender como configurar o Xdebug para trabalhar em conjunto com Visual Studio Code para permitir depuração de código na linguagem PHP.

PHP - Fundamentos
Curso de PHP - Fundamentos
CONHEÇA O CURSO

Como normalmente é feito debug no PHP

A maioria dos desenvolvedores PHP utilizam funções disponíveis dentro da própria linguagem para debugar o código, ao invés de utilizar uma ferramenta de debug como a que vamos conhecer neste post que permite definir pontos de pausa, avançar o código passo a passo e outras ações.

Aqui no blog já falei um pouco dos motivos dos desenvolvedores PHP usarem funções da própria linguagem para debug e também minhas suposições dos motivos disso. Você pode ser nesse post: Funções usadas para debug no PHP.

Debugar código PHP com Xdebug

Debugar código diretamente com as funções da linguagem é uma opção da maioria dos desenvolvedores PHP, porém isso não significa que o PHP não possui ferramentas para permitir o debug completo de código como em outras linguagens.

O Xdebug é uma ferramenta muito poderosa que pode ser instalado como extensão na linguagem de programação PHP e que permite ao desenvolvedor conectar o Editor ou IDE que ele está utilizando para debugar o código PHP.

Configurando o Xdebug no PHP

Primeira coisa que precisamos fazer é instalar a extensão do Xdebug no nosso PHP. Isso pode ser feito conforme o processo mostrado nesse vídeo:

Caso queira acompanhar também como instalamos o PHP do vídeo acima, ensinamos no post: Como instalar o PHP no Windows.

Depois de instalado a extensão, no fim do arquivo php.ini precisamos definir as seguintes configurações para permitir o VS Code conectar ao Xdebug:

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

Agora basta reiniciar e a parte do PHP está completa.

Configurando Xdebug no VSCode

Primeira coisa que precisamos fazer é instalar a extensão PHP Debug para VSCode desenvolvida por Felix Becker.

Para isso, com editor aberto pressione CTRL + Shift + S e siga os passos abaixo:

  • Procure por xdebug;
  • Selecione a extensão;
  • Verifique se o autor está certo conforme a imagem e clique em instalar.
Desenvolvedor PHP Júnior
Formação: Desenvolvedor PHP Júnior
Nesta formação você aprenderá todos os fundamentos necessário para iniciar do modo correto com a linguagem PHP, uma das mais utilizadas no mercado. Além dos conceitos de base, você também conhecerá as características e a sintaxe da linguagem de forma prática.
CONHEÇA A FORMAÇÃO

Debugando código PHP com Xdebug e Visual studio Code

Com o projeto que deseja degubar aberto, vá no menu Run > Add Configuration, em seguida selecione PHP. Ele vai criar uma pasta chamada .vscode com um arquivo chamado launch.json:

Não é necessário alterar nada no arquivo, basta ir em Run > Start Debugging e os painéis de debug serão mostrados. Basta ir no código, adicionar um breakpoint clicando ao lado esquerdo da linha.

Quando executar seu projeto o VS Code parará no lugar desejado, mostrando os estados das variáveis além das opções de debug:

Prontinho, basta se divertir!!!

Considerações finais

Conhecer novas ferramentas nunca é demais! Apesar da maioria dos desenvolvedores PHP utilizarem as funções da própria linguagem e métodos, como, dd() e dump() de frameworks como Laravel e Symfony respectivamente e isso ser suficiente. É super importante saber que também podemos contar com outras ferramentas como Xdebug e como configurá-lo.

Desenvolvimento colaborativo em tempo real com Live Share

Ferramentas de desenvolvimento colaborativo em tempo real são de grande ajuda para times que trabalham remoto. Nesse artigo vamos conhecer a extensão Live Share do Visual Studio Code e Visual Studio, aprenderemos como instalar e utilizar seus recursos para programar em conjunto com uma ou mais pessoas.

Como funciona o desenvolvimento colaborativo em tempo real com a extensão Live Share

A extensão Live Share permite aos participantes da sessão visualizar ou editar o projeto no qual o grupo está trabalhando. Isso é feito diretamente dentro do Visual Studio. Não é necessário nenhuma ferramenta de acesso remoto, compartilhamento de janelas do sistema operacional ou ferramenta de comunicação.

A extensão Live Share também deixa compartilhar facilmente servidores disponíveis na máquina onde o projeto está rodando, com isso é possível compartilhar serviços da aplicação ou banco de dados de forma simples. Ela também possui a possibilidade de compartilhar acesso a terminais da máquina.

React - Trabalhando com Arquitetura Flux
Curso de React - Trabalhando com Arquitetura Flux
CONHEÇA O CURSO

Como instalar a extensão Live Share para desenvolvimento colaborativo

A ferramenta Live Share é composta por 3 extensões do Visual Studio Code:

  • Live Share – Possibilita a criação da sessão e o compartilhamento do código do projeto, servidores e terminal;
  • Live Share Audio – Permite conversar via áudio entre os membros da sessão;
  • Live Share Chat – Permite conversar via chat com os membros da sessão.

É possível instalar cada uma delas separadamente de acordo com os recursos que for utilizar, porém existe uma extensão chamada Live Share Extension Pack que já instala as 3 de uma única vez, caso for utilizar todas as funções.

No Visual Studio Code para instalar, basta Abrir o Editor, ir no gerenciador de extensões no canto esquerdo ou usando atalho (Ctrl + Shift + X). Depois basta procurar por Live Share que verá todas as extensões comentadas acima, basta escolher qual deseja e instalar:

Painel de instalação do Visual Studio Code mostrando a extensão Live Share para desenvolvimento colaborativo em tempo real

No Visual Studio 2019 a Live Share já vem por padrão. Já no 2017 é necessário instalar a extensão Live Share para Visual Studio listada no marketplace.

Iniciando a primeira sessão desenvolvimento colaborativo em tempo real

No post vamos mostrar os exemplos usando o Visual Studio Code, mas a lógica é a mesma que no Visual Studio.

Após instalar a extensão um novo item será criado no menu do Visual Studio Code referente à extensão:

Painel da extensão live share para inicio de sessão de desenvolvimento colaborativo em tempo real

Na extensão temos as seguintes opções de cima para baixo:

  • Juntar-se a uma sessão de colaboração – Possibilita conectar a uma sessão existente criada por outro usuário;
  • Iniciar uma sessão de colaboração – Permite criar uma nova sessão;
  • Iniciar uma sessão somente leitura de colaboração – Permite criar uma nova sessão de colaboração, porém os membros não poderão modificar o código do projeto.

Se você for convidado para participar de uma sessão existente, quem criou a sessão deverá te passar um link com endereço dela, basta clicar sobre ele e o navegador já abrirá uma nova janela do editor e entrará na sessão. Caso você seja o criador da sessão, precisa compartilhar o link de acesso com as outras pessoas que deseja convidar.

O serviço e a extensão Live Share são mantidos para Microsoft. A utilização não possui nenhum custo, porém é necessário ter uma conta da Microsoft ou do Github para conseguir utilizar. Assim que tentar entrar em uma sessão ou iniciar, ele abrirá o navegador para logar em uma dessas contas e dar acesso ao serviço.

Participando de uma sessão de desenvolvimento em equipe online

Uma vez conectado na sessão, se for convidado poderá navegar e visualizar os arquivos do projeto normalmente como se fosse um projeto local. Dependendo da sua permissão também poderá editar os arquivos do projeto:

Edição do projeto remoto para trabalho online em equipe com a extensão live share

Note em amarelo após a palavra treinaweb um ponteiro de edição amarelo. Ele indica que outro usuário está com ponteiro atualmente nesse local. Conforme cada usuário for adicionando ou removendo código é possível ver em tempo real.

O participante também consegue visualizar outros usuários que estão na sessão de desenvolvimento colaborativo em tempo real e quais recursos estão compartilhados:

Painel de status da sessão de desenvolvimento em equipe da extensão live share

Administrando uma sessão de desenvolvimento em equipe online

O administrador possui total controle sobre a sessão, podendo inclusive terminar ela quando achar necessário.

Administrar sessão de desenvolvimento colaborativo em tempo real

Dentre outras coisas o administrador pode:

  • Controlar os participantes online, mutar o microfone ou remover;
  • Compartilhar serviços com os membros da sessão a partir da porta. É possível facilmente compartilhar servidor web, banco de dados e qualquer outro que esteja ouvindo em uma porta específica;
  • Compartilhar sessões de terminal com outros participantes.
React - Tópicos Avançados
Curso de React - Tópicos Avançados
CONHEÇA O CURSO

Considerações finais sobre a extensão Live Share do Visual Studio

A extensão é uma ótima ferramenta para o desenvolvimento em tempo real para dois ou mais desenvolvedores que precisam programar em conjunto. Pode ser uma ótima escolha para a prática de pair programming da metodologia Extreme Programming XP, orientação do lider técnico da equipe ou daquele pessoal sênior que sabe muito.

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200