How to Edit JavaScript With Firebug

Save

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.

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

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

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

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

  • 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.

  • 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.

  • 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.
Promoted By Zergnet

Comments

Resources

You May Also Like

  • How to Edit HTML With Firebug

    Mozilla's Firebug add-on helps web designers and programmers craft good code for their sites using sleek tools and accessible formats to show...

  • How to Execute JavaScript With Firebug

    Firebug is Firefox add-on that allows you to experiment, test and troubleshoot HTML, CSS or JavaScript code on any website. Firebug is...

  • How to Edit JavaScript in Dreamweaver

    Developed by Adobe Systems and included in its Creative Suite of design software, Dreamweaver is a website authoring tool that gives you...

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!