3 ms·
Using straight console.log statements seems to be non-negotiable for effective debugging, at least until a good workaround for the above is found. For using Ch
by gjuggler 14y ago
Using straight console.log statements seems to be non-negotiable for effective debugging, at least until a good workaround for the above is found.
For using Chrome's logging styles, we define a few short helper functions — l1(), l2(), l3(), etc. — that return predefined CSS strings, then doing our logging like
console.log("%cThis is a heading", l1())
console.log("%cLess important stuff", l2())
This means you're only adding 6 or so characters to get nice styled console messages that also maintain the nice line numbers and links to the source. Plus, it's similar enough to h1, h2, etc. that it's easy to remember.
We found that varying the font color (black vs. gray) and margin-left (2em, 4em) were most helpful in differentiating more and less important log messages.
- CGamesPlay 14y agoI recommend simply using console.debug, console.log, console.warn, and console.error, which differentiate for you.
- cristiantincu 14y agoWhat about `console.info()`? Or is it a bit too adventurous?
- jaredmcateer 14y agoinfo and log are indistinguishable, at least in Chrome.
- cristiantincu 14y agoYes. So much about differentiation.
- jQueryIsAwesome 14y agoMaybe add console.assert to that list: console.assert(str.length === 10, "String is not 10 characters long!"); and console.group/groupEnd console.group("sums"); console.log(1 + 1); console.log(2 - 3); console.groupEnd();