Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sempre teste mas debug se precisar

251c46a689557c394ceb553775e7ad3a?s=47 Larissa Abreu
September 14, 2019

Sempre teste mas debug se precisar

Testes automatizados previnem diversos comportamentos inesperados em nossas aplicaçōes javascript, sabemos disso, mas na vida real não conseguimos fugir do famoso teste “console.log()”, certo? Esse cenário vai mudar, vamos juntar testes e debug de forma moderna para, além de aumentar a qualidade do projeto, evoluir dramaticamente seu conhecimento sobre como seu próprio código funciona.

251c46a689557c394ceb553775e7ad3a?s=128

Larissa Abreu

September 14, 2019
Tweet

Transcript

  1. Sempre teste Mas debug se precisar

  2. @TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa Abreu

    @LarissaAbreu larissaabreu.github.io
  3. None
  4. Bug?

  5. Debugar? - Mensagem de erro - Error handler

  6. Para Pensar

  7. “Vou me arrepender depois por quê se eu posso me

    arrepender antes?”
  8. Teste automatizado

  9. demo.js var soma = function (a, b) { return a

    + b; } demo.test.js var somando = require('./demo.js'); module.exports = soma; test('Deve retornar a soma de dois valores', () => { }); var resultado = somando(11, 11); return assert.equal(resultado, 22); var { test, assert } = require(‘nomsjs');
  10. Voltando ao debug

  11. Console (API)

  12. console.group() Resultado console.log(“Nível 1"); console.group(); console.log("Nível 2"); console.group(); console.log("Nível 3");

    console.groupEnd(); console.log("Nível 2"); console.groupEnd(); console.log(“Nível 1”);
  13. console.error() Resultado console.error( "Esse é um aviso de erro" );

  14. console.warn() Resultado console.warn( "Esse é um alerta" );

  15. console.assert() Resultado const erroMsg = 'número ímpar'; for(let num =

    2; num <= 5; num += 1){ }; console.assert( num % 2 === 0, { num: num, erroMsg: erroMsg } );
  16. console.table() Resultado const brazilJS = { tipo: "OnTheRoad", local: "Curitiba",

    } console.table(brazilJS);
  17. console.log() Resultado console.log( "%cBrazilJS on The Road Curitiba", "color:yellow; background-color:black;”

    );
  18. Breakpoints?

  19. Breakpoints no browser

  20. Navegador de arquivos "Editor" Painel debugging

  21. Tipos de
 breakpoints

  22. Linha de Código

  23. Linha de Código Condicional

  24. Mudança no DOM

  25. Listener de Eventos

  26. Como evitar bugs? - Code style guide - Testes de

    lint - Code review
  27. Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io