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.
There is a separate demo-page, set-up over here.
Supported console methods
Currently, at v1.2.2, mobileConsole supports (hooks into) the following
- 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.
- Since mobileConsole 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.. if you need more, you can try eruda, which has more features (but has a bigger file size).
- I am still developing mobileConsole, so let me know if you run into any bugs using the comments below.
MobileConsole (was tested and) works 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+)