KeyLimeTie Blog

Using Firebug To Debug Web Pages

By Michael Wick – 4/27/2009. Posted to Applications.

Mozilla Firefox has a very powerful add-on tool called Firebug. Firebug allows web developers to inspect web pages to do such things as identify CSS styles being applied to sections of a page, easily inspect sections of a page, and to tweak style values to properly determine values for padding, font sizes, margins, and the like. Firebug is also extremely useful in tracking down and debugging layout issues on a page, especially trying to determine what style is actually being applied to a section of a page. Also, you can step-wise debug Javascript code being run by the browser.

To get started, first install Mozilla Firefox, if not already installed (http://www.mozilla.com/en-US/firefox/ie.html).  Then go to https://addons.mozilla.org/en-US/firefox/addon/1843 (using Firefox) to download and install Firebug. When done, you'll see the Firebug option in Mozilla's Tools menu. Selecting Tools -> Firebug -> Open Firebug will display the Firebug panes at the bottom of the browser:




Click on the Inspect button. Now you can mouse around the page and see the defined sections of the page (surrounded by blue border):




The lower pane will display the relevant section of the page being moused over. You can also click on the moused-over area, which selects the area (and takes you out of inspect mode). The right pane will show what styles are in effect for the selected area, and you can also mouse over the HTML section to highlight the section on the page, and can click on the HTML pane lines to see the relevant styles, including the hierarchy/cascade effect of a given style.

When an HTML line is selected, you can view and tweak the associate styles. This is very useful when debugging the page to determine both what style is (or isn't) being applied, and to determine correct values so the page is displayed as desired.




You can also disable a style setting to see its effect, by clicking to the left of the setting in the right pane (marked by a red 'do not' symbol):




Using combinations of these tweaking mechanisms and you can both easily see why a page displays and what the correct settings should be. You can also add new setting values in the right page.

Lastly, Firebug can be used to debug Javascript. You can set breakpoints, watch values, and step lines of Javascript in real-time:




In conclusion, Firebug helps to take out the guesswork in page layout and very easily shows what styles are being applied to sections of a page, as well as the page layout itself. For any serious web developer it is an essential tool. This blog is by no means a comprehensive explanation of all of Firebug's functionality, but rather a basic introduction of its core features. As of this writing, there is no equivalent tool for Internet Explorer. And, of course, IE and Mozilla don't always display a page the same way, typically because of the way the two browsers interpret styles.

A Password Reset Solution for Windows SharePoint Services

By Peter Morano – 4/8/2009. Posted to Applications.

WSSBlog482009.png If you need a solution that allows users to quickly change their NT account passwords on a web server that resides outside of their domain, you can use the DirectoryServices namespace. One example of when this might be necessary is in the case of a Windows SharePoint Service site that is exposed to an external set of users. The code below and attached solution shows how to do this.

You begin by adding a reference to the System.DirectoryServices.dll assembly. Next, create a web form with 2 Labels, 2 Textboxes and a Button control, like the one shown below:

In the code behind, add the following:

string userName = string.Empty;

    protectedvoid Page_Load(object sender, EventArgs e)
    {

        userName = HttpContext.Current.User.Identity.Name.ToString();
        lblLoggedInUser.Text = userName.Split('\\')[1];
        lblMessage.Text = string.Empty;
        lblMessage.ForeColor = System.Drawing.Color.Red;
    }

The first 2 lines of code in the Page_Load event get the current user’s domain and user name and writes the user name portion to the label control. Putting the user name in a label control versus a text box prevents users from changing the passwords of users. Next, add the following code and wire this event to the Button’s Click event:

protected void btnResetPassword_Click(object sender, EventArgs e)
    {
        try
        {
                            
            string user = userName.Split('\\')[1];
            DirectoryEntry AD = new DirectoryEntry("WinNT://" + Environment.MachineName + ",computer");
            DirectoryEntry NewUser = AD.Children.Find(user);

            NewUser.Invoke("SetPassword", newobject[] {txtConfirmPassword.Text});
            NewUser.CommitChanges();

            lblMessage.Text = "Password change successful.";
            lblMessage.ForeColor = System.Drawing.Color.Green;
        }
        catch (Exception err)
        {
            // set the error message
            Response.Write(err.Message);
        }
    }
}

The first three lines in the code above create an instance of the DirectoryEntry class based on the name of the computer and then query that computer for the specific user. Once the directory entry for that user is located, the Invoke method is called on the directory entry, passing in the command argument for setting the new password. This is followed by a call to the CommitChanges method. Lastly, in order to run this code on the web server, the web.config file needs to be modified so that the solution impersonates a user with privileges to update security settings:

<identity impersonate="true" userName="user" password="pwd"/>

Once the page is made available on the server, you can integrate it with SharePoint by adding a link to the SharePoint site, or by linking to it through a Page Viewer web part.

Photos on Flickr

More Photos »

Search Blog


Archives