IE8 developer tools tutorial (two)
Example 2 Modify the attributes of the element
The goal of the operation is to change the “Price” column from “Left Alignment” to “Centering”.
Steps:
1. Open the “Find” menu, select “Click to select an element”, and then click the first price cell on the web page, which is the cell where “$39.99” is located.
2. At this time, the “td” in the code has been highlighted.
3. Open the right-click menu of td and select “Add Property”.
4. Type align=center after the td label.
5. Repeat the above process for other price cells. After pressing the Enter key, you can see that the prices have been arranged in the center.
The above method needs to operate on each cell, which is very troublesome. In fact, there is an easier way to arrange all cells in the center in one operation.
The specific operation is to start from the second step above. After selecting the td element, switch to the attribute tab on the right and add an attribute with the name “align” and the value “center”.
After the addition is complete, there will be a “Apply Attributes” prompt, just select “All cells in this column”.
Example 3: Modify CSS settings
The goal of the operation is to make the font in the table smaller.
Steps:
1. Switch to the CSS options page and find the .listingsTable class.
2. Change the font-family attribute from Verdana to Tahoma, and change the font-size attribute from 12pt to 10pt.
Example 4: Add a new CSS class to web page elements
The goal of the operation is to add a new .price class to the “Price” column.
Steps:
1. Switch to the CSS tab, select a rule at random, open the right-click menu, and click on either “Add rule before” or “Add rule after”.
2. Type .price, then open the right-click menu and select “Add Property”.
3. Add the color: green rule, and then repeat the above process, adding two other rules “font-weight: bold” and “text-align: center”.
4. Add the “class=price” attribute to each cell of the price column. Refer to Example 2 for the specific method.
Example 5: Set breakpoints in Javascript code
In the original webpage, after checking the radio button, the selected background color will change to green.
Our goal is to change the background color to sky blue.
Steps:
1. Open the “Script” tab and switch to goShopping.js.
2. Find the selectRow(row, color) function and click to set a breakpoint at the beginning of the line.
3. Click “Start debugging”.
4. Check a radio button on the webpage, and it will automatically jump to the breakpoint. Then, in the input line at the bottom of the “Console” on the right, enter “color=”#bee7ed””, and then click “Run Script”. (This is equivalent to inserting the command color=”#bee7ed” before the breakpoint.)
5. At this time, click the “Continue” button on the toolbar, and you can see that the background color has changed to sky blue.
6. Click “Stop debugging” to end the debugging process.
Example 6: Exploring Javascript
The objective of the operation is to find out the calling sequence of the functions and the running time of each function when the user selects the radio button.
Steps:
1. Select the “Prospector” tab and click “Start profile”.
2. Select the three radio buttons on the web page from top to next, and then cancel them one by one.
3. Click “Stop Configuration File”, then all code running information will be displayed.
4. There are two viewing methods, one is “function” and the other is “call tree”.
5. In the “function” view mode, you can see the information of all called functions. For example, from the figure below, you can see that the productSelection function was called 6 times, which took 31.25 milliseconds in total. The debug function was also called 6 times, which took 15.63 milliseconds.
6. In the “call tree” view mode, you can see the order in which the functions are called. For example, from the figure below, you can see that there are three onClick actions in sequence. The first onClick first calls the productionSelection function, and the productionSelection function calls the debug, total, and selectRow functions in turn.
Finally, for further analysis, you can select the items you want to view, sort and output in csv format.
(over)