The basic idea behind bug reduction is to take a page that demonstrates a problem and remove as much content as possible while still reproducing the original problem.
A reduced test case can help identify the central problem on the page by eliminating irrelevant information, i.e., portions of the HTML page's structure that have nothing to do with the problem. With a reduced test case, the development team will spend less time identifying the problem and more time determining the solution. Also, since a site can change its content or design, the problem may no longer occur on the real-world site. By constructing a test case you can capture the initial problem.
Really the first step in reducing a page is to identify that main problem of the page. For example:
After you have made this determination, you need to create a local copy
of the page created from the page source window. After saving this
source, it's a good idea to put a <BASE> element in the
HEAD so that any images/external style sheet or scripts that use a
relative path will get loaded. After the BASE element has been added,
load the local copy into the browser and verify that problem is still
occurring. In this case, let's assume the problem is still present.
In general, it's best to start from the top of the <DOCTYPE> and
work down through the HEAD to the BODY element. Take a look at the HTML
file in a text editor and view what types of elements are present in the
<head>. Typically, the HEAD will include the <title>
element, which is required, and elements such as <link>,
<style> and <script>.
The reduction process is to remove one element at a time, save, and reload the
test case. If you have removed the element and the page is still
displaying the problem, continue with the next element. If removing an
element in the HEAD causes the problem to not occur, you may have found
one piece in of the problem. Re-add this element back into the HEAD,
reload the page and confirm the problem is still occurring and move
on to the next element in the HEAD.
HEAD? Continue with the BODY!
Once the HEAD element has been reduced, you need to start reducing
the number of required elements in the BODY. This will tend to be the
most time consuming since hundreds (thousands) of elements will be
present. The general practice is start removing elements by both their
<start> and </end> elements. This is especially true for
tables, which are frequently nested. You can speed up this process by
selecting groups of elements and removing them but ideally you need to
save and reload the test case each time to verify the problem is
happening.
Another way to help you identify unnecessary elements is to temporary
uncheck 'Enable Javascript' in the Preferences. If you turn this option
off and loading your test case still reproduces the problem, then any
script elements that are present can be removed since they are not a
factor in this issue. Let's say that you have reduced the page down to
a nested table with an ordered list with an <link> element that need
to be present. It's good practice to identify that CSS rule that is
being in the external file and add it directly to the test case. Create
a <style> </style> in the head and copy/paste the contents
of the .css file into this style element. Remove the <link> and
save the changes. Load the test case and verify the problem is still
occurring. Now manually delete or comment out each CSS rule until you
have just the required set of rules to reproduce.
When you've finished your reduction, you should add it to the bug. It's quite likely that in the process of reducing, you have found the root cause of the problem, so you are able to set the right component. If you do not have the rights to change the component, read about how to get them in this document about Bugzilla.