例項二 修改元素的屬性
操作目標是將"價格"欄從"左對齊"改為"居中"。
操作步驟：
1. 開啟"查詢"選單，選擇"單擊選擇元素"，然後點選網頁上的第一個價格單元格，也就是"$39.99"所在的單元格。
2. 這時，程式碼中的"td"已經高亮顯示了。
3. 開啟td的右鍵選單，選擇"新增屬性"。
4. 在td標籤後面鍵入align=center。
5. 對其他的價格單元格，重複上面的過程。按Enter鍵後，可以看到價格已經居中排列了。
上面的方法需要對每一個單元格進行操作，非常麻煩。事實上，還有更簡便的方法，可以一次操作就實現所有單元格居中排列。
具體操作是從上面第二步開始，選擇好td元素後，切換到右面的屬性選項卡，新增一個屬性，名稱為"align"，值為"center"。
新增完成後，會有一個"將屬性應用於"的提示，選擇"此列中所有的單元格"即可。
例項三：修改CSS的設定
操作目標是讓表格中的字型變得更小一點。
操作步驟：
1. 切換到CSS選項頁，找到.listingsTable類。
2. 將font-family屬性從Verdana改為Tahoma，將font-size屬性從12pt，改為10pt。
例項四：為網頁元素新增一個新的CSS類
操作目標是為"價格"欄新增一個新的.price類。
操作步驟：
1. 切換到CSS選項卡，隨便選擇一個規則，開啟右鍵選單，在"之前新增規則"和"之後新增規則"中任選一個點選。
2. 鍵入.price，然後開啟右鍵選單，選擇"新增屬性"。
3. 新增color:green規則，然後再重複上面的過程，新增另外兩條規則"font-weight:bold"和"text-align:center"。
4. 為價格欄的每個單元格新增"class=price"屬性，具體方法參照例項二。
例項五：在Javascript程式碼中設定斷點
在原始網頁中，勾選單選框後，選中的背景色會變為綠色。
我們操作目標是將背景色改為天藍色。
操作步驟：
1. 開啟"指令碼"選項卡，切換到goShopping.js。
2. 找到selectRow(row, color) 函式，在行首單擊設定斷點。
3. 點選"啟動除錯"。
4. 在網頁上勾選一個單選框，這時會自動跳到斷點處。然後，在右面"控制檯"底部的輸入行，輸入"color="#bee7ed""，再點選"執行指令碼"。（這相當於將color="#bee7ed"這句命令插在斷點之前。）
5. 這時再點選工具欄上的"繼續"按鈕，這時可以看到背景色已經變成了天藍色。
6. 點選"停止除錯"，結束除錯過程。
例項六：對Javascript進行探查
操作目標是找出當使用者選擇單選框後，函式的呼叫順序，以及每個函式的執行時間。
操作步驟：
1. 選擇"探查器"選項卡，點選"開始配置檔案"。
2. 從上到下一一選中網頁中的三個單選框，然後再一一把它們取消。
3. 點選"停止配置檔案"，這時就會顯示出所有的程式碼執行資訊。
4. 一共有兩種檢視方式，一種是"函式"，另一種是"呼叫樹"。
5. 在"函式"檢視方式中，可以看到所有被呼叫的函式資訊。比如從下圖中，可以看到productSelection函式被呼叫了6次，共耗時31.25毫秒。debug函式也被呼叫了6次，耗時15.63毫秒。
6. 在"呼叫樹"檢視方式中，可以看到函式被呼叫的順序。比如從下圖中，可以看到依次共有三個onClick動作，其中第一個onClick先呼叫了productionSelection函式，而productionSelection函式又依次呼叫了debug、total、selectRow三個函式。
最後，為了做進一步分析，你可以選擇想要檢視的專案，進行排序和csv格式的輸出。
（完）