thebeebs | August 2008
Learn the art of website security

Good Bye FireBug. Hello Developer Tools.

by thebeebs 29. August 2008 08:20

If you’re a web developer and you've ever worked on the client side then you've almost certainly used the incredible Firebug. If you work regularly in IE you may have also used the fantastic IE web tool bar. However, IE8 is the first browser to actually build one of these clever little add-ons right into the browser.

You can find the new feature in IE8 in Tools > Developer tools. Here are my favorite 10 things about it:

  1. It has a colour picker. Colour Picker
    It's inherited one of the tiny tools from the IE web toolbar that allows you to click the colour picker then select any point on the web page and be told it's Hex value.
  2. JavaScript Debugging
    Javascript DebuggingAdd watch's, Breaks, inject code using the console, Pause, play, step over, step into and step out. All the standard debugging features you expect in server side technologies but actually debugging client side JavaScript. If you’re an AJAX developer... you’re going to love it!
  3. Simple Prototyping 
    Prototyping Every change you make to the HTML or CSS is immediately reflected in the browser. This makes it easy to take a page and edit the CSS or HTML on the fly. Once your happy with the changes you can just click to save the files.
  4. Profiling.
    ProfilingSet off profiling and you can view all of the JavaScript functions and the order they were run in during the profiling session. It details how long each function took, the line number of the code that was executed and if you click on it, it takes you to the source code that was being executed.
  5. Source Searching
    Source SearchingYou can do this easily enough in notepad but searching through the HTML in the new Developer tools makes it easy to find text and see it’s context on the HTML tree. Also if you right click on the search item it’ll ask you if you want to copy the word, The inner HTML or the Outer HTML; which makes it really easy to cut and paste the actual content you want.
  6. Layout View
    layout ViewIf you can’t get your head around the layout of a particular object. Click on the html or select the element by click then switch to Layout View to be given a graphical representation of the margin, padding, spacing and border for the selected object.
  7. Simple Resize
    Click Tools > resize to resize the browser window to either: 800x600, 1024x768, 1280x768, 1280x1024 or set up a custom size. This enables you to test web pages in different screen resolutions quickly and easily.
  8. View Image information
    Click on Image > Show Image Sizes for all the image sizes to be shown onscreen, so you can easily see if any are larger than they need to be. Other Information that can be displayed includes, File Locations, dimensions and alt text.
  9. Element Highlighting
    Element highlightingClick on Outline and make IE Visually outline Tables, Divs, Table Cells or Images.
  10. It’s baked in
    As Developer tools is a part of the browser and not an add-in, it’s more efficient than the old IE Web Toolbar. This is because of the way Add-ons work in IE. Even if you are not using an Add-on it has it’s open thread working in the background for each tab or window you have open.  As the new toolbar is actually part of the browser itself you can browse regularly in a separate tab or window without the overhead of having the toolbar switched on in the background.


Photosynth Released

by thebeebs 21. August 2008 01:35

Photosynth is released today which will mean we can all do some crazy things with your photos in a 3d space. I saw photosynth show on a year or so ago and it has jaw dropping potential.

Basically (from what i Understand) you can upload your pictures and photosynth looks at the images and groups them with other users to create 3d environments from your 2d pictures.

However when I went to install I got the following message:

The Photosynth site is a little overwhelmed


I hope it come up today because I really want to mess around with it.