3 ms·

Devtools Console, from Novice to Ninja

• msoad 13y ago
  My two cents: ⌘ + K => clears console inspect(element) => inspects element $(query) => equal to document.querySelector $$(query) => equal to document.querySelectorAll $_ => last output clear() => clears the console. in your code your can `console.clear()` console.count(label) => counts with a label that you pass console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large"); a lot more info here: https://developers.google.com/chrome-developer-tools/docs/console https://developers.google.com/chrome-developer-tools/docs/co...
  • minikomi 13y ago
    Formatting log output - fantastic! I really like to use: $0 -> $9 last hilighted elements in the inspector view Especially when dealing with d3 generated svg .. can be tricky to get the right element otherwise. Also, you can still use the debugger; command to stop the context within a function (eg, callback from ajax request), from within the console.
    • skeoh 13y ago
      Only $0-$4 is available (at least in Chrome 31.0.1650.63 and Firefox 26.0). You can check what's available in the console command line in Chrome with Object.keys(console._commandLineAPI)
      • minikomi 13y ago
        oops... was going form memory on my phone thanks
• quim005 13y ago
  Saw "ninja"; didn't read.
• izolate 13y ago
  Nice one, I learned a lot from this article. Looking forward to trying out console.group() and console.assert() for tests.
  • skeoh 13y ago
    One consideration with console.assert() is that it does not interrupt execution as you might expect it to.