Phoenix is a development editor which allows run and test CSS, HTML and JavaScript code in a live environment. Phoenix will tell you how many CSS and JS files are loaded into a page, how big these are, it will let you edit them and de-obfuscate them.
Description
-----------
Phoenix is a development and debug editor which allows run and test CSS, HTML and JavaScript code in a live environment. Phoenix will tell you how many CSS and JS files are loded into a page and how big these are. With a click you can then examine the code - including the HTML code and the dynamically generated HTML code. The code undergoes real time syntax highlighting and can by formatted for easier reading. In case of obfuscated (or packed) JavaScript this can be reversed by Phoenix.
You will be able to modify all CSS, HTML and JavaScript code and have it executed in the current page. This means that you will be able to see all changes to CSS and HTML without having to reload the page, while JavaScript can be executed immediately. If you are working locally you will be able to edit your CSS and JS files and reload these into a page without having to reload the page itself: useful when working with AJAX.
Features
--------
* See at a glance how many CSS & JavaScript files there are in a page and how big they are
* View them in Phoenix Editor
* Tidy the code and unpack it (unpacking is only available for JavaScript)
* Reload individual files in the current page (useful if you are debugging an AJAX page locally)
* Edit CSS, JavaScript & HTML in Phoenix Editor and have this code updated in the current page
* Load and Save code to and from Phoenix Editor
* View both HTML and generated HTML source
* Real time syntax highlighting
Help
----
Phoenix Editor is a multi-coding editor capable of working CSS, HTML and JavaScript. The type of functions available are initially determined by the type of file being loaded. This can also be changed from the Editor menu. The buttons appearing at the bottom of the editor are contextual and depend on the the type of code the editor believes it is processing.
Here following is how each button operates.
* Reload button:
Will reload the CSS or JavaScript file from the file itself (not from Phoenix Editor) in the current page and at the same time will update what is shown in the editor. This button is useful in those cases when you want to change CSS styles or JavaScript functions without wanting to reload the whole page: eg. half way during an AJAX call.
* Format code button:
Formats the code as CSS, HTML or JavaScript according to which editor is active. In case of packed JavaScript files this function will attempt to unpack it.
* Load CSS in page button:
If a CSS stylesheet is loaded into the editor it will attempt to remove this. It will then create a element and add it ot the header.
* Load HTML in page button:
Although all the HTML code from a page is shown, only the code within the body tags will be transferred to the current page.
* Execute JS in page button:
If a JavaScript file is loaded into the editor it will attempt to remove this. It will then pipe the JavaScript file through the "javascript:" command directly into the current page.
Legend
------
* @CSS files: imported CSS files
* Italics: Firefox's resource files (chrome:// or resource://)
* [g]: Gzipped file
* [c]: Cached file
Download pheonix addon from mozilla:
https://addons.mozilla.org/en-US/firefox/addon/11708
Technorati Tags: Phoenix,development,HTML,JavaScript,code,syntax,AJAX,Features,Editor,Format,header,Firefox,resource,Download,addons,mozillaBlogger Labels: Phoenix,development,HTML,JavaScript,code,syntax,AJAX,Features,Editor,Format,header,Firefox,resource,Download,addons,mozilla
Posts
