Devlounge

Design, Develop, and Grow

Browser Tools for Web Developers

By

As web developers, the browser is essentially our “canvas”- it’s where we spend most of the testing stage of our development work. Which is what makes these browser tools so useful: not only do they help tremendously when we’re tweaking code and troubleshooting, they can also give us insight into the coding of other websites. You know, for moments of “inspiration”.

Firebug

firebug-dl
Example of Firebug in action- on Devlounge!

Firebug’s tagline is “Web Development Evolved”- and indeed, if you use Firefox and you’re a web developer, this is almost essential. It’s an extension for Firefox, so it works on any platform that runs the browser, and it allows you to do everything from inspecting and editing a site’s HTML and CSS, to exploring the Document Object Model (DOM), to- my favorite of all- debugging, executing and logging Javascript.

XRAY

xray-dl01
The black window is XRAY. This is how it looks when you first open it on any page.

xray-dl02
XRAY in action!

XRAY from Westciv is an elegant browser tool that you install as a bookmarklet and use to get more information on any element on any website. In the example above, I’ve clicked on the Devlounge logo. XRAY highlights it (by darkening everything else), gives me the logo size, inheritance hierarchy, and other specifications. Very awesome. Works in IE6 and above, and all Webkit and Mozilla based browsers.

Web Developer Add-on

webdevtoolbar
The menu you get when you install the extension.

It’s these types of add-ons that have most developers using Firefox despite all the other great browsers out there. The Web Developer Add-On (currently at Version 1.1.8), as you can see from the screenshot above, installs an additional menu on your browser that allows you to instantly disable CSS styles, view CSS, and more- not as powerful as Firebug or XRAY, but very quick and gets the job done.

IE Only Tools
If you use IE for development testing, check out these tools: IE Watch is very similar to Firebug, featuring things like HTTP and HTML analysis, and including useful goodies such as instant screenshot captures, window resizing and transparency control. From Microsoft there’s the Internet Explorer Developer Toolbar – which is exactly that, a toolbar you install on IE that lets you inspect DOM elements and view HTML and CSS among others.

What browser tools do you use for web development?

Friday Focus 07/24/09: For the Birds

By

This week’s Friday Focus features designs with pretty little birds in them. (No, this isn’t another collection of Twitter-related sites—only two of them are.)

Designs of the Week

Tori's Eye

Illustrations are inspired by origami and papercraft, animations are done purely in JavaScript. Pleasant and brilliant.

Loja Birds

I love the mobile motif here—everything is hanging onto something until the very end of the page. Great concept for an online shop.

media140

I like the illustration style here because it’s more cartoony instead of delicate and craft-y. And it seems dotted and dashed lines are all the rage these days.

Pingvin Studio

I like it when sites go all out on a metaphorical design. This one has the content floating on ice!

TweetHawk

Two things about this site mask how simple it looks. First, the hawk looks stunning—big, bright pink, and detailed. Second, the illustrations (aka Twitter backgrounds) listed on the site speak for themselves—if you’re designing a portfolio, do the same thing.

SocialSnack

Some of you might have to squint to see the birds, but I appreciate the subtlety while still paying attention to detail—you can play hangman (or is it hangbird?) on the site! They’re all over the place, though, so you will enjoy their company.

Social Media Weekly

Typography – Web fonts — where are we?

Freelance – Freelance Design Contracts and Templates for Designers

Programming – How to Debug PHP Using Firefox with FirePHP

Flock – The Social Browser That Could

By

Flock 1.0 have been out for a while now, and I’ve been using it as my primary browser, both on the laptop and on my workstation, for a few days now. These are my impressions.

The Social Web Browser

First of all, Flock markets itself as a social web browser, and integrates with a number of social services, such as Facebook, Twitter, del.icio.us, YouTube, Flickr, Blogger, TypePad, WordPress.com, and so on. The list is extensive, but far from complete. Where’s Jaiku, MySpace, Digg, and so on? Maybe that’ll arrive later on.

People sidebar

The social stuff works in a few different ways. For instance, your media browser opens between your tabs and the toolbars, while the People sidebar handles text-based social services, such as Facebook or Twitter. This means that you can check out what your Facebook friends are doing, or post tweets, right in the sidebar in Flock. Nothing particularly new for people used to pimping their Firefox installs with wicked extensions, but still cool and nifty.

Get Blogging

There’s support for publishing to both blogging services such as Blogger and WordPress.com, but also self-hosted blogs. The blog writing tool is easily configured and pretty accessible, just a button in the small social toolbar (configured in my screenshots) to the top left. It looks nice enough, with a wysiwyg editor, and the opportunity to edit the code. I’ve done a few posts with it, and it does the job, but this one’s not for me. Sure, it’s very handy to have a blog editor in your browser, when reading something that pisses you off and makes you want to rant, but at the same time I can see a lot of weird things happening, especially if you have multiple blogs. A post could be published on the wrong blog, for instance, and I doubt the Devlounge readers would like to get the recent big black latino asses I’ve scavenged from the web. Not that I’m into that sort of thing, of course…

The blogging tool

Seriously, I can see the blog posting tool working out for a lot of users. It’s not for me though, but it’s there and that’s fine.

Web Clips and Bookmarks

Web clipsThe web clips, however, could be something I got around using. It’s another sidebar, to which you can drag text, links or images, for latter use. Just mark the text, or drag the image, and drop it in that little box, and it’s stored in the sidebar, easy to access. I haven’t gotten used to doing this yet, but I’ll definitely give it a go and see if this is something that works in the long run.

Bookmarks’ got support for del.icio.us of course. At first I looked around after that nifty little tagging button that the del.icio.us plugin gives you for Firefox (and others), but couldn’t find it. Well, turns out that all I had to do was bookmark a page, and I got a nice little dialog asking me how I wanted to store my bookmark. Very nice, and great for someone like me as well, who use both del.icio.us, and the bookmark bar, as you can see from the screenshots.

Not 100% Bug Free

A little Flock bugSpeaking of the bookmarks bar, among the few bugs I’ve encountered, there’s this cute little thing. “Pownce” is a bookmark added to the bar, but as you can see there’s spacing before the first letter (it’s hovered in the screenshot). This occurs every now and then when you create or drag a bookmark to the bookmarks bar, but there’s nothing visual to remove when editing it. Delete and redo. An annoying, but not very dangerous, little bug.

Worse is the URL bug. Sometimes the URL field just isn’t updated, so I can surf Twitter, and suddenly realize that I’m over at some unknown person’s Twitter page, but the URL still says twitter.com/rethord. If I mark this and press enter, it loads twitter.com/rethord as well, so it’s not just a visual thing. Surfing via links or bookmarks while this occurs works as usual, but it’s really annoying. Hopefully this is something they’ll come to terms with pretty soon.

Can You Browse The Web With It?

So how’s the browsing then? Well, Flock is built on the same engine as Firefox (Gecko) and seems to render everything the same way. The browser is responsive and fast, and it doesn’t seem to leak memory in the same crazy manner that Firefox does (or used to do, it’s gotten better, although it still hogs those valuable megabytes). I’ve yet to experience a crash as well, which is very positive.

FlockHowever, despite Flock being based on the same engine as Firefox, your old extensions for the latter won’t work. That means no Firebug, which means that Flock still have a way to go before it really can push Firefox out of the way for web developers out there. Likewise, extensions available for Flock is a mere nothing compared to what’s out there for Firefox, which tweakers are sure to dislike.

For now, Flock is my default browser – a great verdict by itself. At least when just browsing the web, sending e-mails, doing social stuff, and for blogging research. When it comes to development, I need my Firebug extension and then I’ll boot up Firefox again.

Check it out over at flock.com, and make sure you take the tour if you want to learn more.

Firebug and Myspace, Part Two

By

Firebog and Myspace, Pt 2

My short sidenote on using Firebug to download streaming songs from Myspace has turned into somewhat of a circus. Many people have been trying a bit too hard to get downloads to work. This rewrite eliminates some steps thanks to some comments by some users who found easier ways to get the songs, without all four steps. Hopefully these new set of instructions will help those of you who are struggling with the original method.

Step One: Visit a Profile

Straightforward enough. Head over to the intended bands myspace page and bring up Firebug. You must have Firebug installed and you must be using Firefox in order for this to work.

Once you have Firebug open (either by clicking the icon in the lower right corner of Firefox or going to Tools>Firebug>Open Firebug), click on the net tab, which will show you the status of all the various elements loading on the page. For this example we’ll be using a band that broke up a short time ago called The Waiting Game.

Step Two: Pull the Download Url

With Firebug open and yourself on the band’s profile page, click your required song and watch the Net tab in Firebug refresh. Scroll down to the bottom of the Net tab, because the song should have been the last thing loaded if you just clicked on it. It will be named something like “std…”. Copy the url by right clicking on the “std…” link and copying it.

Firebug and Myspace, Part Two

New Tab, Edit, and Download

The last step is to open a new tab, paste the url, and make one small edit. Find “std” in your newly pasted url and change it to “full”. Press enter and you should be presented with a download box in Firefox. If you have some kind of built in media player that may attempt to play the song in the browser window, you may have to save the link in an html file and than right click it and use “Save file as…” to get the download to work. Do all this while the song is still playing and you should be fine.

Notes about the method

Myspace is frequently changing methods of downloads, so we can not guarantee how long the method will continue to work for. Devlounge is a resource for designers and developers, so this will be the last post about Myspace and song downloading. The initial post was simply a trick, and the only purpose of this post was to clear up the many questions people had about getting this method to work. Please do not ask for support, because if you’re download doesn’t work, it’s not up to us.

Using Firebug to download songs from Myspace

By

Ah yes, one of our favorite things (Firebug) can be used to workaround song downloads on one of our most least favorite sites in the web world – Myspace.

There have been previous solutions all over the place for downloading any song off of Myspace, but just about every solution has been blocked with time. Up until now. Thanks to the power of the Firebug extension for Firefox, grabbing your favorite tunes from Myspace is just a few steps away.

Important! Please respect your band’s music! As a supporter of music because of how essential it is to many designers including myself, use this method sparingly. (Myspace isn’t exactly “Top Quality” anyways.)

Step One: Get the Plugin

The first step is to make sure you have the firebug plugin installed and updated for your version of Firefox. Once that’s set, you’re ready to begin.

Step Two: Visit bands Myspace

Head over to your intended artist’s Myspace page and bring up Firebug by going to tools, firebug in the menu, or simply clicking the check mark in the right corner of Firefox (or, because this is Myspace, it could be a red X listed a huge amount of code errors.)

Firebug - Myspace Code View (Sloppy!)

Use the built in Firebug search to find “mp3”. It will bring you up to some object tags, which you’ll need to expand. You’ll than see a big jumble of code, with the most important line being the last one.

[html]….[/html]

We’re concerned with the embed code. Copy the “src” and paste it into the address bar.

Step Three: Using Firebug to pull the Url

Once you’ve pasted the url of the media player into your address bar, hopefully you’ve advanced to the page. You should now be seeing a blown up version of the mp3 player for your intended band. With Firebug open, select the “Net” sub-tab and then click a song from the player.

Because the Net inspector watches sites load in real-time, the inspector will refresh with a few different things. They will include album artwork, a hit counter, some random token, and the url to the mp3 file itself.

Firebug - Myspace MP3 Location

By rolling over each area, you’ll be able to see the expanded url. The url to the media file will most likely start with “http://cache…”. Copy this url and you’re all set.

Step Four: Getting the Mp3

You will most likely need to paste your newly copied url into an html page so you can right click to “Save Target As..”. If all went well, you should be able to download an Mp3 which will have a random string name, but it should be the file you were looking for.

Update: I think I’ve found the problem with many of your downloads. Even with the player still open, the random tokens have a time bomb I believe which causes them to expire quickly. Therefor, if you haven’t downloaded the file fast, you’ll end up with a small and useless download instead of the real thing. I think the timebomb may be 30 seconds, so try to get your downloads started fast. If it fails, just try again.

The lesson here

Firebug is a powerful script that every developer should be using, and Myspace is a horribly coded site. 🙂

Note: One of our readers pointed out that the Myspace player page must remain open when you attempt to download the song, otherwise the token will expire and the download may not work.

This Article has been Updated

We’ve updated this article for those of you who have been having trouble. Please refer to the new post if you’re still stuck with downloads.

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge