byteplug: Online JavaScript Editor

Written By Alla Levin
January 16, 2007

byteplug: Online JavaScript Editor

From Ajaxian:

Andrea Giammarchi has been working on an online JavaScript editor and debugger.

The online editor combines a possible solution for byte family plugins, a global byteplug namespace object, and a portable Editor panel to test quickly JavaScript and/or HTML pages.


  • real-time debug
    It allows developers to write and test code quickly using document.write, alerts or everything else.
    To view or execute a code, just use CTRL+RETURN or click on debug panel (bottom left), result will be displayed on output panel (bottom right)
    using a dedicated iframe virtual space.
  • line points
    Just click one line (number on the left) to mark them
  • in-place suggest
    Just click CTRL + SPACE or CTRL + SHIFT with Opera to view a kind of intelligent code suggests.
    For example, if You write?Number.? on the area then use CTRL + SPACE You will see every Number dedicated method plus generic Object methods.
    If You press CTRL + SPACE without a dot before area selection, suggest will show You generic or global functions and statements.
  • quick and simple load and save operations
    You can cut and paste some piece of code or directly open a file (txt or js) from Your computer.
    You can save working area content too, choosing a name using CTRL+S or after one click on File, Save As.
  • simplified JavaScript 1.7 debug
    You can choose to parse JavaScript as version 1.7 (compatible only with FireFox 2.0 or other advanced browsers) choosing Use JS 1.7 on Settings menu.
  • popup mode
    You can launch this Editor inside an 800?600 popup
  • jhp mode
    You can choose to try my absolutely nonsense or crazy jhp JavaScript library !!!
  • x-HTML mode
    You can write divs, links, or every kind of markup using as the first piece of the area code (with or without JS code inside) to create a page instead of direct script execution(i.e. test me)
  • resizable area
    You can drag the line between the working area and debug/output panel to find your favorite size
  • extra ?code cruncher? implementation
    Can you test your code using a ?code cruncher? (Crunch – ?method? from Extra menu).
    Please view ?simple and portable PHP download? point to know more about Crunch methods.
  • extra code headers injection
    You can choose to add area code as a header. For example, if You need to add a library during debugging You can
    load or paste its code into the area and add them as a header.
    This code will not be parsed by jsmin and will not be saved as part of the script but will be written before every other script on output panel (every but jhp) then,
    for example, You could add Prototype code and use them as a header.

    // extra headers example
    // area content
    function testMe(){
    document.write(\"useful ?\");
    // now click on header - add code on Extra menu and clean the area
    // after that, write this on area
    // CTRL+RETURN or a click on debug panel and code will be executed

    Please remember that every time You add code precedent code will not be deleted so You need to use header – clear code to remove all precedent headers.

  • extra highlight feature
    You can choose to view on output panel highlighted code version.
    Fast version marks strings, numbers, and comments while full highlight parse functions and methods too.
    If You have a big source and a regular PC (without monster CPU) You should use fast version.
    To use a copy of highlighted code You could copy and paste output panel and use this dedicated CSS example file.
  • simple and portable PHP download and/or pack panel feature
    You can save your code that should be parsed with cruncher too and then injected into a portable PHP 3, 4, 5 or greater file that will automatically
    choose the best way to cache with or without go encoding even on a server that doesn?t have Zlib extension enabled.

    • just area code,
      to create a PHP file without code cruncher (the safest script VS bandwidth option leaving comments and everything else)
    • Crunch comments,
      to create a PHP file parsing code with basic code cruncher (removes only comments, this is a good script VS bandwidth option)
    • Crunch newlines,
      to create a PHP file parsing code with medium code cruncher (removes comments and every repeated space replacing them using a linefeed, this is the best script VS bandwidth option)
    • Crunch full,
      to create a PHP file parsing code with full cruncher options (remove any linefeed and doesn?t take care of potential missing semicolons [can be regressive], this is the best compression option)

Online JavaScript editor and debugger

I Need More

Enter your Email Address to Join the
Gang of Curious and Life Loving

Related Articles