A Mozilla anunciou recentemente o lançamento do Firefox 65, e com ele, diversos novos recursos no DevTools. O lançamento apresentou formas melhores de dominar layouts em CSS com o novo Flexbox Inspector. Segundo a empresa, há um desejo de tirar os desenvolvedores do “tentar as coisas até que elas funcionem”, para uma compreensão mais concreto de como o navegador exibe a página.

Um flexbox oferece uma maneira flexível para os desenvolvedores organizarem e distribuírem elementos em uma página web. O Flexbox Inspector destaca elementos que compõem um layout flexbox, como o contêiner, as linhas e os itens. Será exibido um contorno pontilhado para destacar o contêiner flex, linhas sólidas pra mostrar onde os itens flex estão e um padrão de background para representar o espaço livre entre os itens.

A Mozilla também melhorou a inspeção e o debugging do JavaScript. Agora, ao desenvolver em JavaScript, o Console e o Debugger são a sua janela dentro da execução do seu código. Vale lembrar que nos últimos lançamentos a empresa focou em otimizar o debugging para ferramentas modernas e o Firefox 65 seguiu o mesmo caminho.

Foi lançado um aprimoramento de stack trace que identifica códigos de terceiros e os recolhe por padrão, reduzindo significativamente o código exibido, fazendo com que o desenvolvedor foque no próprio código.

Também foi disponibilizada a busca reversa, para que os desenvolvedores busquem comandos recentes e que correspondam a uma string, a possibilidade de usar os getters do JavaScript para inspecionar valores de retorno e a habilidade de pausar durante o XHR/Fetch breakpoints.

No futuro, a Mozilla continuará melhorando os recursos de debugging do JavaScript, inclusive já trabalha em recursos muito aguardados pela comunidade, como breakpoints de colunas, logpoints e breakpoints DOM. Por fim, também existe o desejo de adicionar um modo de edição em multi-linhas e um autocomplete melhor.