282 Part V — Installation, Automation, Tools, and Tricks The Configuration Mania window options are divided into categories on the left panel and option groupings on the right. The most useful tweaks are in the Browser, HTTP Network, and Debug categories. While the extension does have other great features, these are the ones that I find the most beneficial when setting my coding environment. F IGURE 15-1: Configuration Mania tweaking window Browser In the Browser category, I like to focus on three of the groupings: Ⅲ UserAgent: The UserAgent section allows me to manipulate the strings that are auto- matically sent to web servers when browsing. This value is used by web pages to deter- mine what the browser’s capabilities are and can be modified to spoof or trick a web page to allow you access to specific content or areas. While many sites have been updating to support real standards, this feature is still rather handy. Ⅲ High Speed Browsing: While I normally adjusted these manually, this interface gives me the ability to make changes with ease when doing high-speed testing. Ⅲ Others: The Others section allows me to disable modal error messages, change the throbber’s link, and enable the tab browsing Single Window Mode in the base Firefox Options menu. HTTP Network The HTTP Network category allows us to add some additional tuning of the number of con- nections, as well as set the HTTP connection type. Making changes to these settings breaks away from known standards but can yield some incredible web page downloading performance. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 282 283 Chapter 15 — Hacking Tools for Web Programmers For more information on these settings and values, see Chapter 5. Debug The Debug category is the section that I use when I want to use Firefox’s built-in feature to help me debug existing JavaScript code. Enabling JavaScript strict warnings assures tight align- ments with JavaScript standards and usually highlights some of the most obviously overlooked bugs that pop up. Additionally, when coding or creating Firefox extensions, enabling “Enable JavaScript dump() output” and “Show Chrome JavaScript errors & warnings” will help to pin- point extension-specific syntax issues. For more information or to install Configuration Mania, visit http://members.lycos .co.uk/toolbarpalette/confmania/index_en.html. The following preference settings can be set to enable the same debug features using the about:config screen: —Enable Strict JavaScript warnings: javascript.options.strict = true —Enable dump() output: browser.dom.window.dump.enabled = true —Show Chrome Errors and warnings: javascript.options.showInConsole =true Organizing Web Research One of the most troubling issues that I have to deal with is organizing web research that I am doing for a specific project. Whether it is a link to reference materials, code snippets, or forum posting, organizing and having them readily available is a monumental task, and that’s when ScrapBook comes to the rescue. ScrapBook has to be one of the best organizational tools I have used for collecting page snippets or whole pages. This extension adds an entry to the Tools menu, a shortcut-key combination of Alt+K, and right-click context functionality to capture selected text or whole page. As you can see from Figure 15-2, ScrapBook has the capability to create folders and subfolders, and edit saved con- tent. All contents captured with ScrapBook are saved locally, along with such web page support elements as images, HTML, and CSS files. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 283 284 Part V — Installation, Automation, Tools, and Tricks F IGURE 15-2: ScrapBook extension with content loaded An entry’s property also contains the original URL or link back to the source of the captured content. Another interesting feature highlighted in Figure 15-2 is ScrapBook’s ability to edit the locally saved content, as shown by the Edit toolbar below the main window. To download and install ScrapBook, visit http://amb.vis.ne.jp/mozilla/scrapbook/. The Godfather of Web Programming Extensions Finding Internet or web programming tools can be a real hassle; however, with Chris Pederick’s Web Developer extension, web programming just got a lot easier. The Web Developer exten- sion has so many features that this entire chapter could have been dedicated to using it. In a nutshell, this extension allows you to edit, disable, enable, show, or hide key page features such as cookies, images, JavaScript, style sheets, and form values. It can also help you validate your documents for standards, show page element information, reset sessions or cookies, and a whole lot more. As shown in Figure 15-3, Web Developer installs itself in three ways: 22_596500 ch15.qxd 6/30/05 3:08 PM Page 284 285 Chapter 15 — Hacking Tools for Web Programmers Ⅲ A toolbar of options with dropdown menus Ⅲ A right-click context menu Ⅲ A matching Tools menu option Any of these can be disabled by using the extension’s option panel.The extension also adds a toolbar button that you can use to toggle the Web Developer toolbar itself and can find by choosing Customize from the View ➪ Toolbars menu. F IGURE 15-3: Web Developer extension toolbar and Tools menu Key Web Developer Features One of the key abilities that I like to tap into includes live Cascading Style Sheet editing, which can be accessed by choosing Edit CSS from Web Developer’s CSS menu or by pressing Ctrl+Shift+E. This feature alone warrants installing this extension, as it will allow you to mod- ify style sheet properties and view the changes on the fly. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 285 286 Part V — Installation, Automation, Tools, and Tricks The next feature I want to highlight allows you to validate your HTML or other pages against the World Wide Web Consortium standards on the W3C web site. To access this feature, just navigate to the page you want to validate and choose Validate HTML from Web Developer’s Tools menu. The current web page address is submitted to W3C’s validation scripts, and the results are displayed accordingly. Running this every now and then helps with reducing page- rendering inconsistencies across systems or browsers and will keep your code in line. A third Web Developer extension feature that I cannot live without is the window resize fea- ture, which is available from the Web Developer’s Resize menu. By default, it comes with 800 × 600 as an option for resolution testing, but you can add any custom entries from the Options menu. This feature allows for quick testing of different resolutions without having to manually switch your display’s properties for testing. These are just a few of the many features wrapped up in the Web Developer extension. The more you use it, the more you’ll love it. To download and install Web Developer, visit http://chrispederick.com/work/ firefox/webdeveloper/. Hacking Tools of the Trade When putting this list together, I wanted to make sure that I included just the right extensions, even if I did not use them. I pulled together a list of my most recommended tools, scoured the forums and download sites for comments, and then added a few more. While this list is not a comprehensive list of every possible extension, it is a list of great extensions that you can use for hacking HTML, links, JavaScript, and XUL and for validating web pages. You can search the ever-evolving and -updated Mozilla Update site, https://addons.update.mozilla. org/ , for more extensions and goodies. To help with installing extensions listed in this chapter, use my MR Tech’s Local Install exten- sion, which allows installing extensions (or themes) from the local disk. For more information or to install MR Tech’s Local Install, visit http://www.mrtech.com/extensions/. Additionally, you can make your Extension Manager listing much more manageable by installing the Slim Extension List extension, which will sort and trim the amount of space each extension uses on the list. For more information or to install Slim Extension List, visit http://v2studio.com/k/moz/. HTML Hacking Tools The section is full of goodies to help with the everyday tasks a web programmer may come across. This chapter contains extensions and information on sniffing out MIME types, validat- ing stored cookies, selecting colors, and changing the User Agent string to use a different editor to view a page’s source. It’s a nice arsenal of HTML tools to get you started loving Firefox more and more. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 286 287 Chapter 15 — Hacking Tools for Web Programmers Hacking with LiveHTTPHeaders Hacking with the LiveHTTPHeaders extension is great when you need to sniff out the com- munication between the browser and the web server to extract details. The information col- lected, as shown in Figure 15-4, includes all the details for requests and responses that are made from the browser and web server. When dealing with different servers, configurations, and third-party tools, this extension really comes in handy. It also helps with projects that require download prompting and triggering specific file MIME type actions, and is a must- have if you are diving into projects like these. F IGURE 15-4: LiveHTTPHeaders with style sheets enabled This extension can be opened from the LiveHTTPHeaders option in the Tools menu and will collect information only while the window is open and the Capture option is selected, so hav- ing this extension installed should have no impact on the performance of download content when it is not in use. For more information or to install LiveHTTPHeaders, visit http://livehttpheaders .mozdev.org/. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 287 288 Part V — Installation, Automation, Tools, and Tricks Hacking with View Cookies This extension makes it easy to view, temporarily remove, or permanently remove cookies that you might be working with. This extension is good for all users and adds a new information tab panel to the page details. To access the panel, shown in Figure 15-5, just choose the Page Info option from the Tools menu or right-click on the page and choose View Page Info. All the default page information tabs will be populated with the addition of a new tab that contains cookie information. F IGURE 15-5: View Cookies information tab Caution should be taken when using the Remove Cookie forever feature, as it will add that domain to the Cookies block list, and no further cookies for that domain will be added. To undo this change, follow these steps: 1. Open the Firefox Options window from the Tools menu and select the Privacy section on the option’s icon bar. 2. Expand the Cookies section and select the Exceptions option. 3. Find the domain you just blocked from this list and remove it. After you do this, setting cookies will be reenabled for that domain. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 288 289 Chapter 15 — Hacking Tools for Web Programmers For more information or to install View Cookies, visit http://www.bitstorm.org/ extensions/. Hacking with ColorZilla The ColorZilla extension is great and has the following features listed on the site, among other colorful goodies: Ⅲ Advanced Eyedropper Ⅲ ColorPicker Ⅲ Page Zoomer After installation, a new eyedropper icon is placed to the far left of the status bar. Left-clicking will activate the eyedropper crosshairs to find colors, and right-clicking will give you the options available. The eyedropper tools extracts the color codes from whatever you move the crosshairs over and can also be activated by pressing Shift+Esc. The status bar is updated with color information corresponding to the location of the eyedropper crosshair; then, clicking on the final location will lock those values, which are accessible by right-clicking the status bar icon. The Page Zoomer feature can be used in combination with the eyedropper to pinpoint a specific color. Unlike Firefox’s built-in text zoom function, this Page Zoomer feature also increases the size of images, making it easier to find specific pixels that you may want to use the eyedropper on, and so on. For web color matching work, this extension is in a league of its own. For more information or to install ColorZilla, visit http://www.iosart.com/firefox/ colorzilla/. Using User Agent Switcher Extensions From the maker of the fantastic Web Developer extension comes another interesting tool, User Agent Switcher. This tiny extension allows you to spoof or trick web sites into thinking that you are running different browsers. Based on my experience, this tool helps in two ways: Ⅲ It enables Firefox to bypass annoying or outdated Internet Explorer-only sites that really do not have Internet Explorer-only content but are just too lazy to add support for real standards. Ⅲ It enables me to quickly test browser-specific features that I may have created. The user agent string or value is a standard browser feature that is discussed in RFCs 1945 and 2068, which basically involves having your browser send the web server a string to help with detecting the type of browser you are currently using. This is helpful when having to code for specific projects or feature sets and is universally used and accepted. The values that are submit- ted to the web server, though, do not have to meet any hard rules, and this extension lets you dynamically change this string. The three default strings that User Agent comes with are listed in Table 15-1. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 289 290 Part V — Installation, Automation, Tools, and Tricks Table 15-1 Default User Agent Values Option User Agent String Value Default Firefox’s current User Agent String value (This varies based on operating system and version of Firefox running.) Internet Explorer Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Netscape 4.8 Mozilla/4.8 [en] (Windows NT 5.1; U) Opera 7.54 Opera/7.54 (Windows NT 5.1; U) [en] Additional values can be added and customized to your liking by using the extension’s Options panel window. To download and install User Agent Switcher, visit http://chrispederick.com/work/ firefox/useragentswitcher/. Hacking with ViewSourceWith ViewSourceWith is a simple, well-thought-out extension that allows you to add a list of differ- ent editors via its Options window, shown in Figure 15-6, which will then be made available via the Source View option in Firefox’s View menu, as “View source with” in the right-click context menu, or as an optional toolbar button. The uses for this extension quickly materialize when working with simple local HTML pages that require quick editing. Additionally, pulling page source code into my favorite editors is a nice added bonus when reviewing or skimming through code. F IGURE 15-6: ViewSourceWith configuration screen 22_596500 ch15.qxd 6/30/05 3:08 PM Page 290 291 Chapter 15 — Hacking Tools for Web Programmers To download and install ViewSourceWith, visit http://dafizilla.sourceforge.net/ viewsourcewith/. Navigation and Link Hacking Tools Three tools that are used for handling or working with links and their HTML code are Mouse Gestures, ieview, and BBCode. All have different tasks and are extremely useful when navigat- ing from page to page or when posting link information on web forums and sites. Hacking with Mouse Gestures While this tool is not necessarily web programming–specific, once you review all the available options and features you will see how it can save you tons of time when navigating through the Internet — for example, to look up reference code or code snippets. By default, you can right- click and drag your mouse in several directions to execute a specific navigation command. (For example, right-clicking and dragging from right to left anywhere on the page jumps you back to the previous page; doing the reverse from left to right jumps you forward one page in your browsing history.) This extension is highly configurable but comes with some very easy-to- learn basic gestures, which, coupled with the Gesture Exchange link on their site, will have you customizing things to your liking or just leaving things as they are and enjoying quick navigation. To visually enhance the benefits of this little puppy, activate the mouse trails in the extension’s options window, and you will see your mouse gestures as you do them. For more information or to install Mouse Gestures, visit http://optimoz.mozdev.org/ gestures/. Hacking with ieview As much as I hate to admit it, there are still sites, including both public and corporate intranets, that rely heavily on Internet Explorer technology. So, whether for testing or pure outright need, this extension allows a quick way to load a link from Firefox into Internet Explorer. For most users this need revolves around Windows Updates, Office Updates, Microsoft Java VM, or other Microsoft media-rich sites — basically, sites that are Microsoft ActiveX–dependent and have been absorbed into the Microsoft collective. If you want to help with the migration pain of using Firefox until sites wake up and smell the Mozilla coffee brew- ing, you can use this extension as a one-time option from the right-click context menu or to permanently add sites that will launch in Internet Explorer. The two options that are added to the right-click context menu include “Open Link Target in IE” and “Always Open Linked Site in IE.” The first is for one-time use or testing, and the sec- ond will add the link to a list that will automatically launch in Internet Explorer after selecting this. To make changes to the “Always Open” list, open the Extension Manager and choose the Options for ieview to make configuration changes. 22_596500 ch15.qxd 6/30/05 3:08 PM Page 291 . Table 1 5-1 . 22_596500 ch15.qxd 6/30/05 3:08 PM Page 289 290 Part V — Installation, Automation, Tools, and Tricks Table 1 5-1 Default User Agent Values Option User Agent String Value Default Firefox s. http://chrispederick.com/work/ firefox/ useragentswitcher/. Hacking with ViewSourceWith ViewSourceWith is a simple, well-thought-out extension that allows you to add a list of differ- ent editors via its. 286 287 Chapter 15 — Hacking Tools for Web Programmers Hacking with LiveHTTPHeaders Hacking with the LiveHTTPHeaders extension is great when you need to sniff out the com- munication between