Console Logging

Lisää tämän kaltaisia

Gifted LD Learners

luonut Sarah Flynn

ECDL

luonut Nikita Kulakov

Chapter 10

luonut Craig Gwin

Measurement

luonut Britta Peterson

Console Logging (Anton Korniychuk - 11 may 2017)

Asserting

console.assert(value: any, message?: string, ...optionalParams: any[]) Arguments: value - Any boolean expression. If the assertion is false, the message is written to the console.

Example: console.assert(a === b, "A doesn't equal B");

Profiling & Measurement

console.profile() console.profileEnd() // I didn't test it ! API has not standardized

console.time(label?: string) # start a timer console.timeEnd(label?: string) # stop the timer and print time diff Arguments: label - Timers are linked to each other by label, you can start multiple timers at the same time

String substitution & Formatting

Example: css styled output console.log( 'Default color. %cRed label %cGreen label %cBlue label', 'color: red', 'color: green; font-weight: bold', 'color: blue;', );

Output

Specifier Output %s Formats the value as a string %i or %d Formats the value as an integer %f Formats the value as a floating point value %o Formats the value as an expandable DOM element. As seen in the Elements panel %O Formats the value as an expandable JavaScript object %c Applies CSS style rules to the output string as specified by the second parameter

0. Basic example < console.log("%s has %d points", "Sam", 100); > Sam has 100 points 1. Formatting can be used in all methods with custom messages .log(), .info(), .warn(), .error(), .assert() 2. Only first argument is a formattable message < console.log('msg %s', 11, 'text %s', 22); > msg 11 text %s 22 3. Sequences that did not have enough arguments remained untouched > console.log('%s %s %s', 'first') // no second and three < first %s %s 4. Arguments order can be specified by n$ > console.log('%3$d %1$d %d %1$d %d', 1, 2, 3) < 3 1 2 1 2 5. There is no way to format %f and %d values

Other

console.trace() # Outputs a stack trace from the initial call to this line console.clear() # Clear the console console.debug(message?: any, ...optionalParams: any[]) ! This command can be non-crosbrowser

Table

console.table(data: object[] | object, columns?: string[]); Arguments: data - data to display columns - optionally you can specify name of columns to the output Data examples: - [{a:1}, {b:2}] - [[1,2,3], [4,5,6]] - {a: {b:1}, c: {x:2}}

Cout calls

console.count(label?: string) # Logs the number of times that this particular call to count() has been called ! If label is omitted, the function logs the number of times count() has been called at this particular line. ! Can be reseted only by updating the page

Example: no label function greet() { console.count(); } greet(); greet(); console.count();

Output: 1 2 1

Grouping

console.group() console.groupCollapsed() console.groupEnd() ! Every group should be End'ed

console.group("Overlord"); console.log("Overlord stuff"); console.group("Lord"); console.log("Overlord stuff"); console.group("Minion"); console.log("Minion stuff"); console.groupEnd(); console.groupCollapsed("Servant"); console.log("Servant stuff");

Main

console.error(message?: any, ...optionalParams: any[]) ! there is debug trase

console.warn(message?: any, ...optionalParams: any[]) ! there is debug trase

console.info(message?: any, ...optionalParams: any[]) console.log(message?: any, ...optionalParams: any[]) # both prints default message

console.dir($('table')[0]) # prints dom object as default object ! API has not standardized

console.dirxml(domElement) # prints dom object as xml ! API has not standardized