Archive

Posts Tagged ‘Firefox’

How To Debug PHP Using Firefox With FirePHP

July 15th, 2009

Typically, there are two main ways of debugging server-side code: you can utilize an Integrated Development Environment (IDE) with a built-in debugger or log and perform your debugging processes in a web browser.

10-01_debug_firephp_leading_image

This article shares an elegant, simple, and more maintainable way of debugging Ajax apps via the web browser (more specifically for the Mozilla Firefox browser). You’ll learn the basics of leveraging Firefox in conjunction with Firebug and FirePHP to implement FirePHP libraries on web apps and logging messages in the Firebug console.

A Brief Introduction

When Ajax techniques became popular, developers faced a new problem: how can we debug Ajax requests and responses efficiently for complex web applications? If using a debugger was hard enough with the RESTful model, triggering an Ajax-specific request is a pain and a bit more difficult; dumping logs and information pertaining to those Ajax operations had to be done using JSON or XML.

This is where FirePHP helps, allowing you to log your debugging messages to the Firebug console. FirePHP doesn’t mess with your code (and it doesn’t require you to modify anything to trap errors): the messages you print are sent to the browser in the HTTP response headers, which is great when you’re using JSON or XML since it won’t break their encoding.

This makes FirePHP ideal not only for debugging your Ajax requests, but also your entire PHP codebase.

So, what is FirePHP?

FirePHP is an add-on for an add-on: it extends the popular in-browser web development tool called Firebug with an API for PHP web application developers. FirePHP is free and easily attainable via the Mozilla Add-Ons section on the official Mozilla site. The official FirePHP site can be found via this web address: www.firephp.org. Christoph Dorn is the person responsible for creating FirePHP.

What Do I Need to Get Started?

As you might have guessed, you need three things to get up and running with FirePHP, they are:

  1. Firefox
  2. Firebug
  3. FirePHP

If you don’t have all of the above applications installed on your machine, click on their link to learn about how to download them for your particular system.

Installation of the three things above is a straightforward process. FirePHP can be a little tricky to install if you’ve just recently started learning about web development, but there’s good documentation out there about it.

This article is about using FirePHP, so I’ll let you handle the installation part (though feel free to ask in the comments - we’d be happy to help if you encounter issues).

A Couple of Tips

Once you’ve installed FirePHP, and included it in your web application, you are ready to debug and log data. But first, I’d like to share two helpful tips I’ve learned:

Tip #1: call ob_start()

Because the information is sent to Firebug in the HTTP Headers, you should activate the output buffering or you might get the "headers already sent error". It may sound complicated, but all you have to do is write ob_start() on the first line of your PHP script that you’re debugging.

Tip #2: don’t forget to disable FirePHP Logging when you go live

You have to disable FirePHP when the site goes live or you will risk exposing sensitive information to anyone that has Firebug/FirePHP installed (we’ll talk about how to do this later down the article).

And then just a general tip for Firebug/FirePHP users: it’s also a good idea to disable or suspend Firebug and FirePHP when you’re just browsing the web because they can really slow down some websites and web applications (such as Gmail, for example).

Getting Started with FirePHP Logging

This is the fun part where we start logging messages and reviewing the basic logging functions.

One thing to note is that, just like PHP, which (at least for PHP4 and PHP5) is a "pseudo object-oriented" language, you can use FirePHP in a procedural or object-oriented (abbreviated OO from now on) manner.

I prefer the object-oriented techniques and I encourage you to use the same pattern as it is considered the most popular and most modern approach to building apps.

The OO API allows you to instantiate a Firebug object to use it or to call its static methods directly. I’m a lazy guy and because static methods are more terse and require less typing, that’s what I use.

Instantiating the OO API Object

In your script, you can use the following code block to create the FirePHP object ($firephp).

require_once('FirePHPCore/FirePHP.class.PHP');
$firephp = FirePHP::getInstance(true);
$firephp -> [classmethod]
OO API with Static Methods

This is the format for calling static methods in your scripts.

require_once('FirePHPCore/fb.PHP');
FB::[nameofmethod]
The Procedural API

Here’s how to use FirePHP’s Procedural API:

require_once('FirePHPCore/fb.PHP');
fb($var)
fb($var, 'Label')
fb($var, FirePHP::[nameofmethod])

We will not get into any detail about the benefits and coding style of each API, I’ve included them here only so you see what options are available for you. In other words, I don’t want to start a flame war about which procedure is better - it’s up to you to decide and I’ve noted my preference.

Logging Messages and Information in the Firebug Console

Let’s talk about logging messages in the Firebug console (remember, this will only work if you’ve configured your app for FirePHP).

Examples of Basic Logging Calls

If you are ad-hoc debugging a bug, the following examples are what you’ll be interested in utilizing.

Fb::log("log message")

This will print a string that you pass to it onto the Firebug console. Using the above example results in the following message:

Log message.

Fb::log($array, "dumping an array")

Passing an array (no more for loops or print_r() in your scripts) outputs the content of your array. The above example will result in the following message in the Firebug console:

Dump message array

Tip: when you hover your mouse on logged variables in the Firebug console, an info window will appear in the web page containing all of its elements. It’s a nifty feature, don’t you agree?

10-05_variable-viewer

Logging an Information Message

Here is an example of logging information messages using the info method.

Fb::info("information")

This is the message it logs in your Firebug console:

          10-06_info-msg

Logging a Warning Message

Here is an example of logging a warning message.

Fb::warn("this is a warning")

This is the message it logs in your Firebug console:

          10-07_warning-msg

Logging an Error Message

Here is an example of logging a warning message using the info method.

Fb::error("error message")

Here’s what an error message looks like in the Firebug console:

          10-08_error-msg

Enabling or Disabling FirePHP Logging

When your site goes live, you can (and should) disable FirePHP logging. Call the following line of code on the first lines of your script.

FB::setEnabled(false);

What’s great about this is that you can leave all of your FirePHP code in your scripts for later use - just pass either true or false when you want to turn logging on or off.

If your application uses a "config file" to keep track of global settings, it is advisable to set a configuration option to enable or disable it.

Conclusion

First, here’s a screen capture showing all of our messages in Firebug all at once (I ran it sequentially).

10-09_console-demo

In this article, we covered the very basics of using FirePHP to help you debug and gain information about your PHP/Ajax applications easier and through the web browser. I hope that this results in you becoming convinced that you should explore your debugging options outside of "old-school" techniques such as using echo or print on top of your web page layout to see what a variable or array contains. Using FirePHP is so easy and convenient, and gives you much more options and data for debugging purposes.

In a future article, I’ll be covering more complex features of FirePHP and using Firebug to make this simple debugging tool a more robust and fully-featured logging framework.

admin Webmasters Resources , , ,

Dynamic Content Injection with HTML5 Canvas and Video

April 24th, 2009

Paul Rouget and Tristan Nitot are having a lot of obvious fun with Canvas and <video> these days. The latest goodness is a demo by Paul that shows real-time dynamic content injection.

contentinjection

 

Notice the Firefox logo in between the two phones with bright screens? That is injected into the world thanks to Canvas.

How did Paul do this? He told us:

Obviously, I use the <video/> tag.
But what you see is not the video element (display: none;), but a
<canvas/> tag.
All the patterns you see on the top right are regular <img/>,
<video/> and <canvas/> elements. The play/pause button is
a <svg/> element
(position: absolute;) on the top of the main <canvas/> element.

A canvas element provides a method named drawImage which let you
inject the content of a DOM element in the canvas (like a screenshot). It works
with three kinds of elements: <img/>, <canvas/> and
<video/>.

When you click on the <svg/> button, the Javascript code launches the
main video. Then, the main javascript loop is executed each 10
milliseconds.

Here are key things that occur during the main loop:

  • first, the content of the video is injected in the main canvas. That’s why
    the canvas element looks like a video element;
  • second, the position of the 2 brighter areas of the canvas are computed
    (you have access to all pixels values);
  • third, the required transformation is computed (rotation, scale,
    translation);
  • fourth, the content of the selected pattern is injected in the main canvas
    following the transformation.

A little drawing:

 

DCI

admin Tips and Tutorials , ,

Text-Overflow for Firefox via jQuery

April 8th, 2009

Devon Govett is a fan of the new CSS3 property text-overflow:

There are a few CSS features that Microsoft pioneered and has had available to developers in Internet Explorer for a long time now. One of those features is the text-overflow property, which is now in CSS3 and has implementations in Safari, and Opera. Firefox still does not support this feature, but I have heard that it will in Firefox 3.1.

Here is a rundown of what the property does. When text overflows an element’s box, the text-overflow property helps leave a visual hint to the user that there is more text. When a value of ellipsis is used, three dots will be shown before the text is clipped by overflow: hidden.

Lorem ipsum dolor sit amet, c…

I wanted to be able to use this feature in all browsers, so I wrote a small jQuery plugin in order to support Firefox. To use, just call ellipsis() on a jQuery object. For example:

$("span").ellipsis();

admin Webmasters Resources , ,

Firefox support for CSS3 multiple backgrounds

March 24th, 2009

FIREFOX

 

James Hall saw the good news in Bugzilla that CSS3 multiple backgrounds are now in the Firefox tree, and you can test a Firefox Nightly (Minefield). Firefox joins Safari in the support.

Usage?

 

PLAIN TEXT

CSS:

  1. background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);

  2. background-repeat: repeat-y;

  3. background-position: top left, top right;

admin Tips and Tutorials, Webmasters Resources , , ,

Ghosts in the machine - avoid using window.sun in Firefox as it starts the Java engine!

March 24th, 2009

Sometimes you find leftovers of old technology in browsers that blow your mind. One of these “ghost in the machine” problems exists in Firefox: if you use window.sun or function sun() in JavaScript you effectively start the Java VM.

There are a few “magic” properties on Mozilla’s DOMWindow interface for supporting LiveConnect that will initialize the Java plugin and all the baggage that comes with it (which, with modern Java plugins, means launching java.exe as a subprocess). Looking up these properties on the window object is all it takes.

There are a few more of these still in the Mozilla source code and they are part of the old Netscape LiveConnect engine. They are:

  • java
  • Packages
  • netscape
  • sun
  • JavaClass
  • JavaArray
  • JavaMember

Avoid these at all cost lest you want the performance of your JavaScript to be like a Java Applet.

admin Programming, Webmasters Resources , ,

JSONView: JSON browser from within Firefox

March 24th, 2009

JSONView is a new Firefox extension that gives you a nice way to view your JSON documents (JSONovich also does the trick).

Ben Hollis talks about the extension:

The extension itself is pretty simple. I wasn’t sure how to approach the problem of supporting a new content type for Firefox, so I followed the example of the wmlbrowser extension and implemented a custom nsIStreamConverter. What this means is that I created a new component that tells Firefox “I know how to translate documents of type application/json into HTML”. And that it does - parsing the JSON using the new native JSON support in Firefox 3 (for speed and security) and then constructing an HTML document that it passes along the chain. This seems to work pretty well, though there are some problems - some parts of Firefox forget the original type of the document and treat it as HTML, so “View Page Info” reports “text/html” instead of “application/json”, “Save as…” saves the generated HTML, Firebug sees the generated HTML, etc. Just recently I came across the nsIURLContentListener interface, which might offer a better way of implementing JSONView, but I’m honestly not sure - the Mozilla documentation is pretty sparse and it was hard enough to get as far as I did. I’m hoping some Mozilla gurus can give me some pointers now that it’s out in the open.

admin Tips and Tutorials, Webmasters Resources , ,

Awesome Things That Firefox’s Web Developer Extension Can Do

March 21st, 2009

Chris Pederick’s Web Developer extension for the Mozilla Firefox browser is one of the best tools in a web developer’s arsenal.

About a couple of months ago, I wrote an article about it entitled "9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension" and I’d like to follow up on that by showcasing even more things you can do with the Firefox Web Developer extension.

1. Determine server information of a website.

Ever wondered what your favorite website uses for their server technology? If so, you can quickly view the website’s HTTP response headers by using "Information > View Response Headers".

The following example shows Digg’s response headers:

information_viewresponseheaders

We can see in the above example that Digg uses an Apache server and PHP 5. Additionally (at least for the page I tested) they served compressed files (gzip).

Heading over to Microsoft’s homepage, we can see that they - in turn - use an IIS 7.0 server and the ASP.NET framework:

2. Use a "magnifying glass" to zoom into parts of a web page.

You can use the "Miscellaneous> Display Page Magnifier" option to get a window that allows you to zoom in and out of the desired areas of a web page.

Tip: As a shortcut, you can use the scroll button of your mouse to increase or decrease the level of magnification.

Here’s a sample from People’s magazine using the Page Magnifier tool.

zoom_in

3. View a website’s color palette.

If you’ve ever wanted to see a visual representation of all the colors used by a website (not including images) You can use the "Information > View Color Information" option of the Firefox Web Developer extension, which will open a new tab displaying Color Information.

Here’s Mozilla.org’s color scheme:

colorinformation

4. Preview the "Print" and "Mobile" version of a website.

Some websites choose to include a print version or mobile version for their content by providing an alternate stylesheet like so: <link rel="stylesheet" type="text/css" href="myprint.css" media="print" />.

If you’d like to preview how a website will look when printed or when viewed using a mobile device, use the "CSS > Display CSS by Media Type > Print" or "CSS > Display CSS by Media Type > Handheld" option of the Firefox Web Developer toolbar.

The example below shows A List Apart’s normal stylesheet and print styleshee.

The print stylesheet takes out the logo and the primary navigation.

5. See the dimensions of all images.

You can see all image dimensions on a web page by using Firefox Web Developer extension’s "Images > Display Image Dimensions" option. You can see this option in action below (using GameSpot’s home page).

 

From the above picture, we can what the dimensions of the images in pixel units (we can also see that they’re using a 1×1 px spacer, interesting).

6. See the sizes of block elements.

A quick way to debug layout issues pertaining to spacing is to use the "Information > Display Block Size" option of the Web Developer extension to see if something is adding unintended padding and margins to your block elements. Block elements include div’s and forms as well as elements with the display:block attribute.

Here’s an example of the option turned on for Yahoo!’s home page.

information_display

7. See if your page degrades nicely without CSS and do a simple accessibility test.

A key design feature that a website must have so that it can be viewed by the most amount of people is that it must look decent and readable with CSS turned off.

You can turn off all styles by using the "CSS > Disable Styles > All Styles" option. This also allows you (somewhat - and shouldn’t be a replacement to real accessibility testing) to see if your website is accessible via assistive technologies (you can see how the document flows and if you’re displaying important information).

For a very crude and quick accessibility test, you should also turn off all images and replace it with their alt tags by using the Images > Replace Images With Alt Attribute option.

Here it is without any styles:

after_css

You can see that the logo is an image replacement so that screen readers can still use the logo as a "home" link and read the name of the site.

We can also see that the mark-up complies with current web standards, putting the primary navigation in a list, and the page title "Welcome to StumbleUpon" enclosed in a header <h#> tag.

8. Quickly find CSS errors on a page.

The Web Developer extension indicates if a page has CSS errors in the rightmost part of the toolbar as shown below.

quickly_find

By clicking on the button, the Error Console pops-up, listing all the errors of the page. If there aren’t any errors, you’ll see a Firefox Web Developer Extension showing no page errors button instead of a Firefox Web Developer extension showing a page without any errors button.

9. Never forget to put alt and title attributes in your images and links ever again.

I like adding lots of images in my articles because it breaks the monotony of my long-winded writing style. This does, however, lead to me forgetting (or neglecting) alt and title attributes quite often.

A quick method I use to double-check my work is by using the Images > Display Image Attributes option and the Information > Display Title Attributes option.

Here’s a screenshot from flickr that showcases the Display Image Attributes option.

display_alt

And there they are, some more of my favorite Firefox Web Developer options. If you’ve never used it, try it out by downloading it from Mozilla’s Web Developer Firefox Add-ons page.

admin Webmaster Tools , ,

eXTReMe Tracker