Quebre apenas em exceções de JavaScript não travadas
Um recurso útil das Ferramentas do desenvolvedor da Web do Chrome interrompe a execução quando uma exceção não corrigida é lançada. Eu o habilito o tempo todo. Para isso, basta …
Continuar lendodevtools
Descubra vazamentos de memória usando ferramentas para desenvolvedores da web
Ao clicar na guia Perfis, você obtém acesso a uma funcionalidade extremamente útil: Capturas instantâneas principais que definem a distribuição de memória entre objetos JavaScript e nós DOM. Você pode …
Continuar lendoAumente o tamanho da fonte nas ferramentas de desenvolvedor do Firefox
Em about: config conjunto devtools.toolbox.zoomValue para um valor mais alto. Eu defini em 1.3. Parece muito melhor!
Continuar lendoDicas de depuração no Google Chrome
Ao usar o Chrome DevTools (Ctrl + Shift + J no Windows ou Cmd + Option + J no Mac OSX) … Para pesquisar em todos os scripts, folhas de …
Continuar lendoAbra os arquivos de código-fonte nas ferramentas de desenvolvimento do Chrome com CMD + P
O Chome Developer Tools já tem o CMD + Oatalho de teclado para abrir arquivos da guia Sources há algum tempo. Isso tem sido incrível, mas eu tive que criar …
Continuar lendoInício do Chrome Devtools
Você deve ter suas ferramentas de desenvolvedor já abertas , desencaixadas (em uma janela separada) e focadas Abra devtools de devtools! OSX: Cmd + Alt + i Windows / Linux: …
Continuar lendoAprimore suas mensagens de registro do console JS
Ainda me lembro do dia em que descobri que existe um console JavaScript onde eu poderia exibir mensagens! Foi um alívio não ter alertmais mensagens ou usar um elemento DOM …
Continuar lendoTorne o Chrome DevTools responsivo usando consultas de mídia
Recentemente, escrevi CSS para tornar o Chrome DevTools responsivo. Você pode modificar o CSS do DevTools modificando o Custom.css Usando consultas de mídia, reuni pontos de interrupção nos quais escondi …
Continuar lendoConsole.log colorido
às vezes, vários métodos de registro de console log, info, errore warnsimplesmente não são suficientes, especialmente quando você está depurando uma aplicação enorme com toneladas de toras acontecendo no console …
Continuar lendoAviso de remoção de fonte do Chrome DevTools
Ao carregar webfonts no Google Chrome, o DevTools pode exibir este aviso: Recurso interpretado como fonte, mas transferido com tipo MIME font / x-woff Isso significa que o servidor da …
Continuar lendoComo ativar os experimentos do Chrome DevTools
Paul Irish mostrou um novo recurso legal do Chrome DevTools chamado Canvas Introspection em uma palestra na EdgeConf . Para experimentá-lo em seus próprios <canvas>projetos, primeiro você precisa instalar o …
Continuar lendoInspecione um objeto DOM com console.dir
Quando você está no console do Chrome DevTools e contém uma referência a um objeto DOM, o console tenta ser amigável e imprime seu objeto como uma string de HTML: …
Continuar lendoconsole.table
Suporte para o comando console.table aterrou Uma nova mudança no Chrome Canary adiciona suporte para o comando console.table que você pode ter visto no Firebug anteriormente. Exemplo console.table([{name:’Gaurav’, email: ‘name@email.com’}, …
Continuar lendoPretty Print
Um dos utilitários mais subutilizados das Ferramentas de Desenvolvimento do Chrome é o recurso de ‘impressão bonita’. Introduzido no Chrome v13, esse recurso permite que você pegue o JS reduzido …
Continuar lendoDetectar se o Chrome DevTools está aberto
Aqui está um snippet interessante retirado do código de validação no novo curso Discover DevTools preparado pelo Google e CodeSchool (confira, aliás, é incrível!): function () { console.profile(); console.profileEnd(); if(console.clear) …
Continuar lendoUse console.error () em vez de console.trace ()
O que sempre me incomoda console.trace()é que o rastreamento de pilha sempre é expandido quando a saída para o console. Isso obstrui rapidamente a visão se você executar muitos traços …
Continuar lendo