DEVMODE

Hello everyone ,

Here is a project I have been working on for practice and fun. Its main function is to work as a developer tool for grabbing selectors, and manipulating the webpage. The design is similar to the administration panel since it is primarily meant for admins however, I'm allowing it the be tested by anyone. I'll go over some of the features.

To activate developer mode click the green button in the bottom right hand corner which says 'DEVMODE'. Clicking the button will add an anchor tag to the current page url and refresh to initialize the developer panel. Once loaded you can have your fun.


The class tab will display the class names of elements that you click. The parents will be the most recent results, and the children will be below the parent results.


The ID tab displays an elements ID, the function is basically the same as the class tab.


The source tab displays the source of a clicked image. You can click the source in the panel to view it. This was a miscellaneous addition, it can be used if you want to modify a specific image. ( img[src="/img"] )


The stylesheet tab allows you viewing of the forums entire stylesheet. I tried my best to get the coloring and style similar to the CSS stylesheet in the Admin panel, but I'm not very good with that type of stuff yet. I mainly used regular expressions to do this.


Clear results tab will clear all the results from the Class, ID, and source tab.

Resize tab will allow you to move and resize the panel. I have added a few options so far.


The CSS editor allows you to edit the style of the current page. You can write some CSS into the textarea and then click the preview style button to view the changes. The written value is added to a stylesheet in the editor, and overwritten with the new value after every submission.


The JavaScript editor allows you to write your own scripts and run them on the current page. To run your script click the execute button and it should apply your script. Clicking the execute button submits the script to the page.


More information for the CSS and JS editors can be read by clicking the help buttons.

If you encounter any bugs, have ideas for improvement, or something else feel free to leave a message. Many thanks for reading and have fun playing with it. ( or playing with fmdesign hehehe )

Thanks for the great update.

Hello,

DEVMODE testing directly on this forum is done for now. If you wish to explore it further you can find the source here : http://www.mediafire.com/view/2sxvaozbrsodh3b/FA_DEVMODE_%28BUTTON%29.txt

It should be added in javascript codes management.