Highlighting elements with Firebug console

Dec 02 2008 Published by Eneko Alonso under uncategorized

Today I had an issue with an element was breaking a page layout, making the page width wider than 960px. I tried to find it with Firebug, looking at the layout properties of some divs and elements, but I couldn’t find it. I knew it had to be there, so I decided to highlight all div elements in the page with a red border. And it worked! I found it right away.

Here is the code I used to highlight the fields (I had to do it in prototype only):

Prototype JS:

  1. <img src="http://l.wordpress.com/latex.php?latex=%28%27div%27%29.each%28function%28item%29%7B%20%20%24%28item%29.setStyle%28%7B%20border%3A%20%27solid%201px%20red%27%20%7D%29%3B%7D%29%3B%3C%2Fpre%3EjQuery%3A%3Cpre%20lang%3D%22javascript%22%3E%24%28%27div%27%29.css%28%27border%27%2C%20%27solid%201px%20red%27%29%3B%3C%2Fpre%3EMootools%3A%3Cpre%20lang%3D%22javascript%22%3E&bg=0D324F&fg=FFFFFF&s=1" title="('div').each(function(item){  $(item).setStyle({ border: 'solid 1px red' });});

jQuery: 

$('div').css('border', 'solid 1px red');

Mootools: 

" style="vertical-align:-20%;" class="tex" alt="('div').each(function(item){  $(item).setStyle({ border: 'solid 1px red' });});

jQuery: 

$('div').css('border', 'solid 1px red');

Mootools: 

" />('div').setStyle('border', 'solid 1px red');

PS: Note that by adding a 1px border to all divs in the page, the page layout will be affected and some items may display improperly. Of course, you can use other colors than red :)

No responses yet

Injecting javascript with Firebug

Nov 30 2008 Published by Eneko Alonso under uncategorized

Sometimes you may want to include a Javascript file on a live web page to see how things will work or to try new things. Usually you would do this by editing the source code including the new file but there is a fastest way if you have Firefox with Firebug. Just run the following code in the Javascript console:

  1. var headID = document.getElementsByTagName("head")[0];
  2. var newScript = document.createElement('script');
  3. newScript.type = 'text/javascript';
  4. newScript.src = 'http://enekoalonso.com/lib/jquery-1.2.6.min.js';
  5. headID.appendChild(newScript);

Here I am loading the jQuery library from my own server, but I could load any Javascript from any server on the net. The best is this will work on any website, whenever you have access to the server or not. Once you have the Javascript loaded you can use it right away. For example, here on this blog I could use jQuery to check how the header will look if its height was only 100px by running the next command on the console:

  1. jQuery('#header').css('height',100);

Yep, it won’t look very good, right? Try it! You have to see it by yourself. Firefox is great. Firebug is awesome. And Firebug’s Javascript console is the best thing ever!
PS: In case you are wondering, the Javascript file injected will exist only on the current browser session.

No responses yet