 REPLY TO THIS THREAD  START NEW THREAD |
 Topic: Tutorial: Speed Up Your Development With the Web Developer Toolbar (Part 1)
| ||
 Artificer
|
 Aug 17, 08 at 10:36am | |
Speed Up Your Development With the Web Developer ToolbarIn a past general discussion I mentioned the Web Developer Toolbar as a tool that really helps you to save time when working on a web site or even just your NeoHome. In order to use the features offered here, you'll need two things:
 I'll go over the features that I've found most helpful, but there are many more that I won't cover, so you'll have to download it to see them all.  I'll approach the features in the order that they appear in the toolbar; as a result, there may be things that you are not interested in, so feel free to skip around. Each feature is independent of all others. The Disable Menu
 There are not any options here which are helpful specifically for HTML and CSS development, but there are some that are helpful for JavaScript development AND for avoiding those annoying sites which give you about a hundred alert pop-ups telling you about the song that never ends. (But I digress...) Disable Cache – Useful if you want to identify quirks with browser caching that mess up your web site. Not as useful for HTML/CSS. Disable Java – Allows you to disable Java applets from being loaded. An example of an applet is this one. Disable JavaScript - All JavaScript – This is useful to ignore those pop-ups and to test your site is still useable without JavaScript. Disable Meta Redirects – If you browse to a site and find that it redirects you to another location that you don't want to go to, it may be because of a meta redirect. A meta redirect is a meta tag in the HTML that looks like this:
This will redirect the page to the http://example.com page in 5 seconds. To disable this behavior, check this option. The Cookies Menu
 The cookies menu is also not useful when all you're doing is HTML and CSS, BUT it sometimes is very helpful to be able to add new cookies and to change and delete existing cookies. Since there's not much related to HTML and CSS in this menu, we'll skip it for this tutorial. The CSS Menu
 Disable Styles – This is incredibly useful for testing your CSS. Here you can not only disable styles by category (e.g. inline styles, embedded styles, linked styles, or even all styles) but also by individual stylesheet. Sometimes when you work with CSS it's frustrating because your styles don't apply the way you want. A good example of this is people trying to set the background color of their NeoHome page—it's not as easy as "body { background-color: black; }"! Use this option to figure out what styles are giving you problems. View CSS – Opens a new tab and shows you every single piece of CSS text in one location. Useful for searching. View Style Information – Even more incredible than the two previous options. This will turn your cursor into a crosshair and allow you to select any element on the page you're browsing. Once you select an element, Web Developer will show you all the styles that are applied to it. This is what it showed when I clicked on a navigation bar link in my NeoHome:  Notice the HTML breadcrumb trail underneath the Web Developer toolbar as well as the Style Information tool window on the bottom of the screen. Add User Stylesheet – Allows you to add your own stylesheet that you upload from your computer to a web page. This is very helpful for designing themes for forums, for example. Edit CSS – Allows you to edit the contents of any CSS that is used by the current page.  The Forms Menu
 Display Form Details – Now when you look at a form in a web page you can see the names of all the data that will be submitted with the form, including hidden fields. Here's a look at what I can see with Neoseeker's post message form:  Show Passwords – Now instead of seeing a "*" or a "•" in your password text boxes, you will see the actual characters you are typing. View Form Information – Adds more on top of the "Display Form Details". Opens a new tab and display all form information, including current values:  Convert Form Methods – Use to switch between HTTP GET and HTTP POST for forms. This is useful in security audits. Convert Select Elements To Text Inputs – This will take all drop down lists in the web page you're viewing and change them into text boxes. Again, this is useful for checking that your site is validating input correctly. If you're expecting only that data from the drop down list comes in, then you're making a wrong assumption. Enable Form Fields – You can use this to enable all fields that have been disabled by a web site. Remove Maximum Lengths – Text boxes have a maxlength attribute that "prevents" you from typing more than that number of characters. You can use this to remove that max length restriction. The Images Menu
 Disable Images – Here you can remove any trace of any image from a web site. You can also disable animated images (i.e. you only see the first frame of the animation) or just images that are external to the site. (For example, the browser would not display images from imageshack if you were viewing a site that wasn't imageshack.) Display Image Dimensions – Allows you to see at a glance the dimensions of any image. Helpful if you need to get the dimensions of a lot of images on a page and you don't want to right click on each of them and go to "Properties" to see the dimensions. Find Broken Images – Opens a new tab and shows you all the images that the browser could not find. Very helpful for when you need to know which images aren't displaying correctly. Outline Images – As you can see in the image above, you can identify images by many different parameters and outline them. Use this to pinpoint images with specific characteristics. View Image Information – Opens a new tab and displays information about all the images on a page. Here's an example of what I see on Neoseeker:  Hide Images – Displays a web page as if there were no images on that page. Contrast with "Make Images Invisible."  Make Images Invisible – Displays a web page so that you cannot see the images, but the space taken up by the images is still there.  That concludes part one of the Web Developer Toolbar tutorial. Next time we'll cover the remaining menu options. I hope this has helped to speed you up in your work with HTML and CSS (and maybe even other languages). Feel free to post questions in this thread. ------------------- | ||
 quote quick quote  edit quick edit  del  report
| ||
| Members, log in or register to remove these ads. | ||
|
Vermillion moderator
Action [DS] Animal Crossing: Wild World [DS] Gangs Wi-Fi Discussion wiki staff tales zelda      since: Jan 2006 |
Aug 28, 08 at 11:28pm | |
|
Thanks a lot for this Art. I finally see a real use for this tool, and I am using it for my website development now ------------------- | ||
|
quote quick quote edit quick edit del report
| ||
 Kamikaze
|
 Oct 31, 08 at 1:57am | |
 quote Artificer
-------------------  | ||
|
quote quick quote edit quick edit del report
| ||
|
Artificer
|
Oct 31, 08 at 4:28am | |
|
After I wrote this tutorial I realized how much more useful Firebug is, so I might tackle that instead. lol ------------------- | ||
|
quote quick quote edit quick edit del report
| ||
| [All dates in (PT) time] | Threads List « Next Newest Next Oldest » | |
| REPLY TO THIS THREAD START A NEW THREAD |
Powered by neoforums v0.9.4 (equilibrium)
Copyright Neo Era Media, Inc. 1999-2008
Print
subscribe
remove
