Overview
ColdFusion component for logging variables to Google Chrome console using the Chrome Logger extension, found at http://chromelogger.com.
An alternative to the ChromeLogger extension is also available.
This component is only intended to be used in a development environment.
Requirements
CF 9 or 10. Untested in Railo/Open BD.
Installation
-
Install the Chrome Logger extension.
-
Click the Chrome Logger icon to enable logging.
-
Stick
chromelogger.cfc
somewhere that it can be instantiated. -
Instantiate
chromelogger.cfc
. -
Start logging!
<cfscript> console = new chromelogger.chromelogger(); console.log( "Logging some data!" ); console.error( "This is an error.." ); console.log({ "It logs more" = "than just strings." }); </cfscript>
Usage
Note: Please disregard <cfscript/>
tags in the following code examples; They're only there because GitHub doesn't like to syntax highlight cfscript without them.
Options
chromelogger-cf
can be instantiated with a few different options:
<cfscript>
console = new chromelogger.chromelogger( autoWriteHeader = true, convertObjects = true );
</cfscript>
autoWriteHeader
- If true, automatically sets the header at the end of each.log()
call. ColdFusion 9 users should set this to false due to a bug in CF9 that preventssetHeader
from overwriting a header with the same name. If true, the header will have to be set manually at the end of the request - see the example below.convertObjects
- BecauseserializeJSON()
is mediocre at best for serializing objects, theconvert()
method is utilized to create a struct representation of a given object. Some users may prefer the default behavior ofserializeJSON()
, sochromelogger
can be instantiated withconvertObjects = false
to prevent the conversion.
Manually Setting Header
For CF9, the X-ChromeLogger-Data
header must be set manually. My preferred method of doing so is via onRequestEnd
.
<cfscript>
component {
function onRequestStart() {
request.chromelogger = new chromelogger.chromelogger( autoWriteHeader = false );
}
// ...
function onRequestEnd() {
request.chromelogger.writeHeader();
}
}
</cfscript>
Using chromelogger as a Singleton
chromelogger
should generally be treated as a singleton in the context of the request, but as a transient in the context of the application. The logged items are stored in the variables
scope of the component, so it's important that this data is flushed out at the end of each request or the logged data will eventually become too large for Chrome to handle in a single header. If chromelogger
must be used as an application singleton, an extra step must be taken to reset the data after each request.
<cfscript>
component {
function onApplicationStart() {
application.chromelogger = new chromelogger.chromelogger();
}
// ...
function onRequestEnd() {
application.chromelogger.reset();
}
}
</cfscript>
API
The following methods are available from chromelogger.cfc
:
chromelogger.log()
Logs all passed arguments to the Chrome console with a severity of "log."
chromelogger.warn()
Logs all passed arguments to the Chrome console with a severity of "warn."
chromelogger.error()
Logs all passed arguments to the Chrome console with a severity of "error."
chromelogger.group( groupLabel )
Begins a group log. Should be followed by calls to log()
, warn()
, and/or error()
, and then closed via groupEnd()
.
chromelogger.groupCollapsed( groupLabel )
Begins a collapsed group log. Should be followed by calls to log()
, warn()
, and/or error()
, and then closed via groupEnd()
.
chromelogger.groupEnd()
Ends a group or collapsed group.
chromelogger.writeHeader()
Sets the X-ChromeLogger-Data
header.
chromelogger.reset()
Removes all data that has been logged.
Thanks
Thanks to the following repos for inspiration: