How to Edit JavaScript With Firebug

Edit JavaScript with Firebug using the Document Object Model (DOM) with Find and Edit. Updates are viewable immediately, but they are not saved on the website page. Firebug is also useful for checking a website's source code for errors and for alerting you to errors with an update.

Difficulty: Easy

Instructions

1. Navigate to the Document Object Model viewing pane on the website's source code you want to modify.

2. Select the white space of any row in the tree and double-click on it.

3. Change the value of the variable through the editor that pops up following Step 1.

4. Update the value with static text, numbers or an equation.

5. Write a command line JavaScript expression for what you want to include in place of a static constant. Press "Enter" and the command line is evaluated and the result is displayed for the variable.

6. Use the Auto Complete function by hitting the Tab key to move forward through object properties in the source code. Continue to tab through all the options and press "Shift-Tab" to go backwards in the code.

7. View your changes immediately in the top website pane. Continue to make changes until you are satisfied with how the website displays.

Tips & Warnings

• Hit the "Tab" key before you type anything to cycle through the global variable when using the Auto Complete function.
• Enter "document.c" to find all properties that start with "c" when using the Auto Complete function.
• Enter an expression into the Auto Complete function and tab through the possibilities.

Resources

• Edit Javascript with Firebug