Project Phoenix: a Firefox addon
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 <style> 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
Credits
Although I have put countless hours in the development of this extension, much of it has been inspired, or blatantly taken, from the following sources. I hope not to have forgotten anybody and I would like to thank the Firefox community for the excellent work in providing all these extensions.
* Daniel Andrade's "CSS Refresh" bookmarklet (http://www.danielandrade.net/2007/02/25/css-refresh/)
* CSS Refresh (https://addons.mozilla.org/en-US/firefox/addon/7465/)
* JSView (https://addons.mozilla.org/firefox/addon/2076/)
* CodeFox (https://addons.mozilla.org/firefox/addon/6643/)
* CodePress (http://codepress.sourceforge.net)
* JS Beautifier (http://jsbeautifier.org)
* Tabifier (http://tools.arantius.com/tabifier)
* FamFamFam's Silk icons (http://famfamfam.com/lab/icons/silk/)
* XUL online editor (http://ted.mielczarek.org/code/mozilla/xuledit/xuledit.xul)
* EditCSS (https://addons.mozilla.org/en-US/firefox/addon/179/)
* Jesse Ruderman's bookmarklets (https://www.squarefree.com/bookmarklets/webdevel.html)
* Bottom Error Console (https://addons.mozilla.org/en-US/firefox/addon/9223/)
* Web Developer (https://addons.mozilla.org/en-US/firefox/addon/60)
* Douglas Crockford (http://www.crockford.com/javascript/jsmin.html)
* Dean Edwards (http://dean.edwards.name/packer/)
* JavaScript MVC (http://javascriptmvc.com/wiki/index.php?title=Include_Overview)
Known bugs
* The execute JavaScript button is still sketchy
* Getting size of files is still not perfect
* The HTML lists method has some issues to be solved
* Generated source can only be seen in the Phoenix Editor or in a new Window, not in tabs
To do
* Load/edit/reload embedded CSS & JavaScript
* Bring language strings to a language file and make Phoenix multi-language
* Undo / redo
* Find functionality
* Customise syntax colors
History
This extension started out while I was trying to debug an AJAX page and had to go through all the steps every time I made a change in how the data was parsed on the way out. I believed there had to be some kind of addon which allowed me to change a local JS file and re-inject it in the page without having ot reload the whole page. There wasn't, but I found a number of interesting addons along the way.
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 <style> 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
Credits
Although I have put countless hours in the development of this extension, much of it has been inspired, or blatantly taken, from the following sources. I hope not to have forgotten anybody and I would like to thank the Firefox community for the excellent work in providing all these extensions.
* Daniel Andrade's "CSS Refresh" bookmarklet (http://www.danielandrade.net/2007/02/25/css-refresh/)
* CSS Refresh (https://addons.mozilla.org/en-US/firefox/addon/7465/)
* JSView (https://addons.mozilla.org/firefox/addon/2076/)
* CodeFox (https://addons.mozilla.org/firefox/addon/6643/)
* CodePress (http://codepress.sourceforge.net)
* JS Beautifier (http://jsbeautifier.org)
* Tabifier (http://tools.arantius.com/tabifier)
* FamFamFam's Silk icons (http://famfamfam.com/lab/icons/silk/)
* XUL online editor (http://ted.mielczarek.org/code/mozilla/xuledit/xuledit.xul)
* EditCSS (https://addons.mozilla.org/en-US/firefox/addon/179/)
* Jesse Ruderman's bookmarklets (https://www.squarefree.com/bookmarklets/webdevel.html)
* Bottom Error Console (https://addons.mozilla.org/en-US/firefox/addon/9223/)
* Web Developer (https://addons.mozilla.org/en-US/firefox/addon/60)
* Douglas Crockford (http://www.crockford.com/javascript/jsmin.html)
* Dean Edwards (http://dean.edwards.name/packer/)
* JavaScript MVC (http://javascriptmvc.com/wiki/index.php?title=Include_Overview)
Known bugs
* The execute JavaScript button is still sketchy
* Getting size of files is still not perfect
* The HTML lists method has some issues to be solved
* Generated source can only be seen in the Phoenix Editor or in a new Window, not in tabs
To do
* Load/edit/reload embedded CSS & JavaScript
* Bring language strings to a language file and make Phoenix multi-language
* Undo / redo
* Find functionality
* Customise syntax colors
History
This extension started out while I was trying to debug an AJAX page and had to go through all the steps every time I made a change in how the data was parsed on the way out. I believed there had to be some kind of addon which allowed me to change a local JS file and re-inject it in the page without having ot reload the whole page. There wasn't, but I found a number of interesting addons along the way.
