Debugging


Debugging methods and tools for better, faster development. Featured debugging applications include Firebug, YSlow, and others.


Thursday, April 15th, 2010

WebKit Inspector Improves Again: Timeline, Audits and Dedicated Console

Category: Debugging, WebKit

Pavel Feldman has introduced some great improvements to the WebKit inspector. There are some great new panels available: Timeline Panel The Timeline Panel provides you with a detailed view of what’s happening inside your browser as you surf. It allows you to zoom into the areas of interest, expand the nested records and investigate their Read the rest…

Posted by Dion Almaer at 12:22 am
9 Comments

++++-
4.7 rating from 34 votes

Thursday, March 25th, 2010

FireSass: Debug in a Sass-y way

Category: CSS, Debugging

Nathan Weizenbaum got fed up debugging Sass, and scratched his itch with FireSass, a Firebug extension for Sass (the “Syntactically Awesome Stylesheets” DSL that makes CSS more fun). WIth the extension you will see the filename and line number of the .sass file rather than the generated CSS file…. Much nicer!

Posted by Dion Almaer at 2:53 am
Comment here

+++--
3 rating from 25 votes

Tuesday, February 23rd, 2010

jsFiddle: a Web playground

Category: Debugging, JavaScript, Utility

Piotr Zalewa has created a really great playground, jsFiddle, for testing sample code and playing with the Web. With an area for the holy trinity of the Web (HTML, CSS, JS) and an output region, you can get right to hacking. It goes beyond this though. You can also add resources, an Ajax echo backend, Read the rest…

Posted by Dion Almaer at 6:57 am
16 Comments

+++--
3.3 rating from 126 votes

Wednesday, January 20th, 2010

Firebug 1.5: New Features and ready for Firefox 3.6

Category: Debugging, Firefox

Nice work Firebug team for announcing Firebug 1.5, a great release that fixes many bugs and adds great features: Mike Radcliffe’s Inspector. A key feature, now solid as a rock, Jan ‘Honza’ Odvarko’s expanded and refined Net panel, with accurate timings, Steve Roussey’s reworking of HTML editing and entity support, Kevin Decker’s CSS and Style Read the rest…

Posted by Dion Almaer at 6:49 am
28 Comments

++++-
4.6 rating from 61 votes

Tuesday, November 3rd, 2009

Web Inspector gets major improvements

Category: Debugging, Utility, WebKit

Joseph Pecoraro has made some major improvements to Web Inspector. It is now much easier to create and much around with the content. Create new CSS selectors with ease; Add content in-line with elements; see color representations of any value. And, there is more: DOM Storage The DOM Storage DataGrids now displays live updates. You Read the rest…

Posted by Dion Almaer at 6:21 am
2 Comments

++---
2.5 rating from 58 votes

Monday, October 19th, 2009

Har Har! One archive for Web performance and beyond; Implemented in Firebug and HttpWatch

Category: Debugging, Performance

Steve Souders has posted about the HTTP Archive Specification and how it is now supported by both Firebug and HttpWatch (and hopefully more soon!). Steve says it best, and it started as his baby, so I will let him announce it: What’s needed is an industry standard for archiving HTTP information. The first step in Read the rest…

Posted by Dion Almaer at 4:25 pm
10 Comments

++---
2.6 rating from 43 votes

Thursday, September 10th, 2009

Formaldehyde: PHP debug info for the client side

Category: Debugging, PHP

Andrea Giammarchi has released Formaldehyde, a new Ajax and PHP error debugger. Simply grab the project and throw in an inclusion: php < view plain text > < ?php require_once ‘formaldehyde.php’; ?> You are off to the races. Want to do a touch more? javascript < view plain text > // *optional* custom ServerError constructor Read the rest…

Posted by Dion Almaer at 6:49 am
3 Comments

++++-
4.7 rating from 20 votes

Wednesday, June 10th, 2009

Web Developer Collection: Packaged up Firefox extensions

Category: Debugging, Firefox, Utility

Over the years we are have mentioned many Firefox, and Firebug plugins to aid us Web developers. Wouldn’t it be nice to subscribe to a bundle of these tools? The Firefox Add On team has now given us that ability with Add On Collections: Today, we’re excited to introduce a new feature to our website Read the rest…

Posted by Dion Almaer at 5:22 am
26 Comments

+++--
3.8 rating from 23 votes

Wednesday, June 3rd, 2009

Adobe BrowserLab: The Meer Meer rises

Category: Adobe, Browsers, Debugging

We were excited to see the sneak preview of what was called Meer Meer, at the last Adobe MAX. Today Adobe has released a preview of the newly branded Adobe BrowserLab: BrowserLab provides web designers exact renderings of their web pages in multiple browsers and operating systems, on demand. BrowserLab is a powerful solution for Read the rest…

Posted by Dion Almaer at 12:46 pm
15 Comments

++++-
4.1 rating from 35 votes

Importing and Exporting HTTP data with Firebug

Category: Debugging, Utility

Jan Odvarko of the Firebug team has created a new plugin and site that allows you to export data from Firebug in the HTTP Archive Format and then also view the JSON data via a HTTP Archive Viewer. The format will look a little like this: javascript < view plain text > ({   "log":{ Read the rest…

Posted by Dion Almaer at 7:14 am
3 Comments

++++-
4.1 rating from 23 votes

Friday, May 22nd, 2009

Firefinder: Quick access to what you are looking for

Category: Debugging, Firefox, Utility

Robert Nyman has a new Firebug extension called Firefinder. The idea is to quickly text CSS selectors/XPath in a document to see what will match, or how many instances of a certain element there are (thinking certain type of heading, for instance). It offers: A quick way to filter HTML elements via CSS selector(s) or Read the rest…

Posted by Dion Almaer at 7:23 am
10 Comments

++++-
4.2 rating from 38 votes

Friday, May 1st, 2009

Francisco Tolmasky Starts Blogging and Jump-starts Profiling

Category: Cappuccino, Debugging, JavaScript, WebKit

It’s no secret that we’re mightily impressed with the fine work of the 280 North crew, what with 280 Slides, Cappuccino, Atlas, working with SOFA to make Aristo free for other projects to use, and that whole Objective-J thing which we’ll never use but we love nonetheless. ;-) Francisco Tolmasky, one-third of the team, started Read the rest…

Posted by Ben Galbraith at 1:08 pm
6 Comments

+++--
3.4 rating from 20 votes

Friday, April 17th, 2009

FireDiff: Firebug extension to track changes to DOM and CSS

Category: Debugging, Firefox, Mozilla

Kevin Decker has released FireDiff a very cool Firebug extension that tracks changes to the page and CSS. Firediff implements a change monitor that records all of the changes made by firebug and the application itself to CSS and the DOM. This provides insight into the functionality of the application as well as provide a Read the rest…

Posted by Dion Almaer at 8:59 am
8 Comments

++++-
4.3 rating from 41 votes

Friday, April 10th, 2009

FirePHP: Tying together Firebug and PHP

Category: Debugging, Firefox, PHP

FirePHP solves the problem of AJAX debugging by sending debug information along with the response. To avoid breaking the response content, the debug information is placed into special HTTP response headers. This works for all types of requests, not just AJAX requests, which means you can even debug requests for images that are dynamically generated Read the rest…

Posted by Dion Almaer at 4:28 am
3 Comments

++++-
4.9 rating from 22 votes

Thursday, March 5th, 2009

SelectorGadget: Selector Bookmarklet

Category: Debugging

Having trouble working out a selector to grab that DOM element? Take heart, Blake Edwards and Kit Sunde pointed us to something that may help you out: SelectorGadget. SelectorGadget is an open source bookmarklet that makes CSS selector generation and discovery on complicated sites a breeze. With SelectorGadget, you just click on the DOM element(s), Read the rest…

Posted by Ben Galbraith at 7:00 am
9 Comments

++++-
4.2 rating from 32 votes

The Art of Throwing Errors in JavaScript

Category: Debugging, JavaScript

Nicholas Zakas recently wrote a piece covering the basics of throwing errors in JavaScript: You can throw an by using the throw operator and providing an object to throw. Any type of object can be thrown, however, an Error object is the most typical to use: js < view plain text > throw new Error("Something Read the rest…

Posted by Ben Galbraith at 12:52 am
25 Comments

+++--
3.9 rating from 23 votes