Live preview with Web Developer

Drupal theme development usually involves a lot of toggling between editor and browser to see our changes in effect. This can get to be rather tedious after a point, especially when debugging or tweaking CSS, and more so while working directly on the server. In this recipe, we will be looking at the features provided by the Web Developer add-on which will allow us to directly edit HTML and CSS in the browser and see our changes propagate instantaneously.

Getting ready

The Web Developer add-on for Firefox is assumed to have been installed and enabled. It can be downloaded from http://chrispederick.com/work/web-developer/.

How to do it...

Web developer's list of features include a rudimentary HTML editor which can be used to tweak markup during testing. The editor can be launched by clicking on Miscellaneous in the Web Developer toolbar and then clicking on Edit HTML.

The editor is launched in a panel as seen in the following screenshot, and includes a search field...