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
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.
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.2.1, mobileConsole supports (hooks into)
- 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
mobileConsolefor some reason) and requiring no additional code. It will just catch your existing console-calls.
- 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
- 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
bodyof the page. This prevents mobileConsole from covering parts of the page.
View/fork it on Github: https://gist.github.com/c-kick/2d717790aadd3aa86884ee0b07c3119f
- Since it renders as HTML, it needs to have a
document.bodyto render to. As the script is (should be) included before the body is available, it waits for a window
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 ¯\_(ツ)_/¯
- mobileConsole is still being developed; let me know if you run into any bugs, using the comments below!
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 (9+) (Trident 7.0) – Note that IE9 does not support a proper stack trace, so no linenumbers and error details are available.
- Edge (38) (EdgeHTML 14.14393)
- Opera (30+)