MobileConsole - Javascript console for mobile devices

When developing in JavaScript, I always get a little annoyed about the lack of a debug console on iOS. And when I say ‘lack’ I mean the complete ass backwards obfuscation introduced in iOS 6, requiring you to physically hook your iPhone to your (Mac only!) development computer to view debug output. This approach, including various remote debuggers that are out there, is much too tedious when you simply need to view a value, see the contents of an object or – more likely – see the error message(s) your script caused, indicating why it isn’t working in the first place.

To that goal, I have developed mobileConsole; a JavaScript console for mobile devices. It ‘extends’ the window.console to a visual, HTML-based console that shows you a console similar in appearance to Chrome’s excellent web inspector console. The main goal was to keep mobileConsole unobtrusive: not requiring any additional code. This is why I extended window.console so I could keep using all my regular console events, without having to add extra error reporting in my projects. This has resulted in mobileConsole being a ‘click-on’ script; it will just intercept all console (and window.onerror) events and display them, without modifying anything*.

*Just one small caveat: While mobileConsole is active, the reporting of source file and line numbers in the regular console is not always correct, as mobileConsole is ‘hijacking’ them, so lines appear to come from the mobileConsole script file. This is not really a downside, as mobileConsole is aimed at devices that do not have a console to begin with.

Demo

On a mobile device, mobileConsole should have already opened automatically. Otherwise, open it by clicking the green button. The buttons each trigger some regular, native console commands, as described. The ‘Trigger an error’ button triggers a non-existing function, which will result in an window.onerror ‘undefined’ error, which is handled by mobileConsole as well.

On a desktop, you can also open your Web Inspector’s console to see what is happening over there. Hint: while your ‘real’ console is open, trigger some console events (log, info, warn, error, trace) yourself to see mobileConsole handling them. Or, additionally, trigger some events from mobileConsole’s own console commandline (introduced in mobileConsole 0.5).

There is a separate demo-page, too. Click here.

Supported console methods

Currently, at v1.3.4, mobileConsole supports (hooks into) console methods:

• console.log
• console.trace
• console.info
• console.warn
• console.error
• console.group
• console.groupEnd
• console.table
• console.assert
• console.time
• console.timeEnd
• console.clear

Note: not all devices support every one of these methods natively, in which case mobileConsole will emulate them, and log a ‘this method is not supported on this device’s original console’ message.

Features

• Snap-in / click-on / fire and forget: just add it to your project, and it should work out of the box, completely unobtrusive (unless, of course, you’re using the global variable mobileConsole for some reason) and requiring no additional code. It will just catch your existing console-calls.
• Small: 58.4 KB / 11.7 KB minified Acts much like Chrome’s Web Inspector console in terms of coloring, layout and design.
• If available, mobileConsole shows details for each method: shows the contents of objects and elements and shows error stack trace for all errors. Note that large string properties inside objects will be truncated to 400 characters.
• Groups repeating events by displaying a single event message, prefixed with a dot holding a counter that increases with each consecutive repeat.
• Displays a link to the file that caused the event, including the line- and column number that triggered it.
• Hooks into window.onerror to catch and display (uncatched) JavaScript errors.
• Supports a commandline / console input field, allowing for the execution of custom code, setting and checking variables, outputting elements or objects, etc.
• Keeps a history of all entered commands in sessionStorage, meaning commands are stored as long as the browser’s tab is opened. Command history can be recalled using up and down arrows on the keyboard (if available), and it also sports an autocomplete-based pop-up, which is especially useful on mobile devices.
• Has buttons to toggle the visibility of the logging types (log, trace, info, warn and error) and a button to clear the console completely (no undo).
• Can be minimized to ‘dock’ on the underside of the screen; compensates for its own height when maximized (or minimized) by adding (to any existing) padding to the body of the page. This prevents mobileConsole from covering parts of the page.

Download

Install from gist.github.com

git clone [email protected]:ed0088fe1c8a5f651d5d35dee552bc5a.git hnl.mobileConsole

or from npm

npm install --save hnl.mobileConsole

Usage

Include it as your first script, preferrably as the first line inside your <head> section. You can check the demo page’s source for reference.

Notes

• Since it renders as HTML, it needs to have a document.body to render to. As the script is (should be) included before the body is available, it waits for a window load (onload) event before it renders itself. This does not mean you’ll miss some early console calls, though: these will be picked up immediately after the script is included (preferrably placed as the first script in the <head>), and they are displayed as soon as the window is loaded.

• As mentioned above; while mobileConsole is active, the reporting of source file and line numbers in the regular console is incorrect (they will all appear to come from somewhere inside hnl.MobileConsole.js, as that is technically triggering the events). Note that source file and line numbers in mobileConsole are correct.

• Clicking the link to the caller, will not neatly jump to the corresponding line. But it will jump to the file. In a new window! How about that?

• It’s just a console, nothing more. No element inspection, no network waterfall diagrams.. sorry ¯_(ツ)_/¯

• Syntax errors will not be logged, only runtime errors. This is by design; JavaScript does not provide a way to hook into syntax errors.

• mobileConsole is still being developed; let me know if you run into any bugs, using the comments below!

• If mobileConsole doesn’t start (mobile detection fails), you can either override autostart by setting overrideAutorun to true or add the following script to your page:

  if (!mobileConsole.status.initialized) {
    mobileConsole.init();
  }

• As of version 1.3.5, mobileConsole can be closed using the ‘X’ at the right-hand side. Two things to note: mobileConsole cannot be rebuilt again until you reload the page, so if the console is ‘in your way’ of viewing content, I suggest you use the minimize button (left-hand side) instead. The other is that, while closed, the script wil still ‘pipe’ the original console‘s logging.

Compatibility

As of version 1.3.3, mobileConsole was tested (and working) on:

• iOS Safari (applewebkit 601.1.46 & applewebkit 602.1.50)
• Mozilla (5.0)
• Firefox (37+) – Note that Firefox/Mozilla reports some events (such as onclick) as coming from line 1, column 1 in the document. I am still looking into why this is.
• Chrome (50+)
• Internet Explorer (8+) (Trident 4.0+) – IE8 support is flimsy, at best, but it seems to work. Console input is hit-and-miss. Note that IE8 and IE9 do not support a proper stack trace, so no linenumbers and error details are available.
• Edge (38) (EdgeHTML 14.14393)
• Opera (30+)

License

Inspired by code by jakub fiala (Licensed under the MIT license)

Copyright (c) 2014-2016 HN Leussink
Dual licensed under the MIT and GPL licenses.