Javascript console - fConsole


Javascript console - fConsole


fConsole.js v1.0 – For touch devices and desktop browsers

A simple plugin that you can use to display the values of whatever you want. Its useful for touch devices as for desktop too.

  • very useful for environments who lack of a console
  • you can dragg the console around the browser (works fine on touch devices too)
  • you can run Javascript code in fConsole footer area and see the results by pressing enter key or ‘Exec’ button.
  • will log Javascript errors
  • on desktop browsers use UP or DOWN keys to access typing history
  • available keyboard shortcuts:
    • Alt + C – Open fConsole
    • Alt + X – Close fConsole
    • Alt + Z – Minimize fConsole
    • Alt + D – Clear fConsole
  • How to use this plugin
    • var myConsole;
      
      (function () {
          myConsole = new fConsole({
              hideHeader: false,
              hideFooter: false,
              className: null,
              width: "250px",
              minWidth: 0,
              maxHeight: "250px",
              position: "bottomLeft",
              draggable: true,
              opacity: 1,
              fontSize: "12px",
              fontFamily: "monospace",
              theme: "default",
              logJSErrors: true,
              zIndex: 2147483647
          });
      })();
      
      $(document).ready(function () {
          myConsole.log("Hello!");
          myConsole.log("Hello!", null, "#00FF00");
          myConsole.log("Hello!", null, "#00FF00", "#000");
          myConsole.log(function() { return Date.now(); }, 1000);
      });
      
  • you can use the fConsole directly too – will use default options
    • $(document).ready(function () {
          fConsole.log("Hello!");
          fConsole.log("Hello!", null, "#00FF00");
          fConsole.log("Hello!", null, "#00FF00", "#000");
          fConsole.log(function() { return Date.now(); }, 1000);
      });
      
  • you can change fConsole settings like this
    • var myConsole;
      (function () {
          //init console
          myConsole = new fConsole();
      })();
      
      $(document).ready(function () {
          myConsole.reloadSettings({ theme: "default" });
          myConsole.reloadSettings({ width: "100%", minWidht: 0 });
      });