Você (provavelmente) não sabia que o Chrome DevTools tinha isso

Transcript

1. Você (provavelmente) não sabia
   que o Chrome DevTools tinha
   isso
   @breakzplatform
   @eu@joseli.to
   

   View Slide

2. console
   além do log()
   

   View Slide

3. console.log(" ")
   

   View Slide

4. console.log()
   console.info() //
   console.warn() //
   console.error() //
   

   View Slide

5. console.log()
   console.info() //
   console.warn() //
   console.error() //
   console.???() //
   console.???() //
   console.???() //
   console.???() //
   console.???() //
   console.???() //
   

   View Slide

6. // montagem de string estilo C
   console.log('%i %s foram passear', 5, 'patinhos');
   // loga PI => 3.141592653589793
   console.log(Math.PI);
   // loga PI como inteiro
   console.log('%i', Math.PI);
   // loga o body como nó do DOM
   console.log('%o', document.body);
   // loga o body como objeto
   console.log('%O', document.body);
   

   View Slide

7. // log_s()
   console.log("%cCuidado!", "font-size:
   4rem;font-weight:700;color:red;text-
   transform: uppercase;");
   

   View Slide

8. // wh_0()
   console.log(width)
   console.log(height)
   

   View Slide

9. // wh_1()
   console.log({width})
   console.log({height})
   // wh_2()
   console.log({width, height})
   

   View Slide

10. console.debug()
    

    View Slide

11. console.dir()
    

    View Slide

12. View Slide

13. View Slide

14. filtros
    

    View Slide

15. console.table()
    

    View Slide

16. // todos elementos h1, p e script
    let contentElements =
    document.querySelectorAll(':is(h1,p,script)');
    // exibe os elementos como tabema
    console.table(contentElements);
    // exibe apenas os conteúdos relevantes
    console.table(contentElements,
    ['nodeName','innerText','offsetHeight']);
    

    View Slide

17. console.group()
    

    View Slide

18. // g_1()
    console.group("Passengers: Heart of Gold");
    console.log('Zaphod');
    console.log('Trillian');
    console.log('Ford');
    console.log('Arthur');
    console.log('Marvin');
    console.groupCollapsed("Hidden");
    console.log('(Frankie & Benjy)');
    console.groupEnd("Hidden");
    console.groupEnd("Passengers: Heart of Gold");
    // g_2()
    let technologies = {
    "Standards": ["HTML", "CSS", "SVG", "ECMAScript"],
    "Others": ["jQuery", "Markdown", "Textile", "Sass", "Pug"]
    }
    for (tech in technologies) {
    console.groupCollapsed(tech);
    technologies[tech].forEach(t => console.log(t));
    console.groupEnd(tech);
    }
    

    View Slide

19. console.count()
    

    View Slide

20. for (let i = 0; i < 10; i++){
    console.count()
    }
    

    View Slide

21. let user = "";
    function greet() {
    console.count(window.user);
    return `oi ${window.user}`;
    }
    user = "bianca";
    greet();
    user = "eduardo";
    greet();
    greet();
    console.count("bianca");
    console.countReset("eduardo");
    // gr_9()
    

    View Slide

22. console.timer()
    

    View Slide

23. // ct_0()
    console.time();
    setTimeout(() => {
    console.timeEnd();
    }, 5000);
    

    View Slide

24. // ct_1()
    console.time();
    setTimeout(() => {
    console.timeEnd();
    }, 5000);
    setTimeout(() => {
    console.timeLog()
    }, 2000);
    

    View Slide

25. console.trace()
    

    View Slide

26. console.log("entrou");
    console.log("aqui, x:", x);
    console.log("teste");
    

    View Slide

27. // tr_0()
    function essa() {
    aquela();
    }
    function aquela() {
    outra();
    }
    function outra() {
    console.trace();
    }
    essa();
    

    View Slide

28. console.assert()
    

    View Slide

29. console.assert(true, "Eu não apareço");
    console.assert(false, "Eu sim");
    

    View Slide

30. // as_0()
    const errorMsg = "# não é impar!";
    for (let number = 2; number <= 13;
    number++) {
    console.log(`número ${number}`);
    console.assert(number % 2 != 0, '%o', {
    number, errorMsg });
    }
    

    View Slide

31. $
    

    View Slide

32. $()
    –
    $$()
    –
    $0-$4
    –
    $_
    –
    

    View Slide

33. copy()
    

    View Slide

34. debug()
    

    View Slide

35. monitor()
    

    View Slide

36. window.sum = (x, y) => x + y;
    monitor(window.sum)l
    // mo_0()
    

    View Slide

37. monitorEvents()
    

    View Slide

38. monitorEvents(window, ["resize",
    "scroll"]);
    

    View Slide

39. inspect()
    

    View Slide

40. command
    palette
    ⌘ + ⇧ + p
    

    View Slide

41. sources
    

    View Slide

42. open
    ⌘ + p
    

    View Slide

43. snippets
    

    View Slide

44. overrides
    

    View Slide

45. obrigado
    joseli.to
    @breakzplatform
    @eu@joseli.to
    

    View Slide