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

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

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

joseli.to
PRO

December 03, 2022
Tweet

More Decks by joseli.to

Other Decks in Programming

Transcript

  1. Você (provavelmente) não sabia
    que o Chrome DevTools tinha
    isso
    @breakzplatform
    @[email protected]

    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
    @[email protected]

    View Slide