蓋瑞的學習筆記室

前端JQuery應用實戰筆記 3 - 開發人員工具 (上)

發表於 分類於 ，

開發人員工具除錯技巧

再開發過程難免會遇到瓶頸或找不到哪裡有問題，此時就需要開發人員工具進行除錯解决，
現有瀏覽器大部分都有開發人員工具，基本操作上幾乎大同小異。
以下使用 Chrome 開發人員工具練習 :

開啟開發人員工具

  • 按下 F12 ( Ctrl + Shift + I )
  • 點選「自訂及管理Google Chrome」–>「更多工具」–>「開發人員工具」

開發人員工具基本操作

練習

ex.1 比較檢視網頁原始碼與檢查元素差異

  • 檢視網頁原始碼 是伺服器傳送給瀏覽器最原始最乾淨的內容。
  • 檢查 是執行過JavaScript後渲染後的顯示結果。
    按滑鼠右鍵

ex.2 編輯 HTML 元素及屬性

選取 HTML 標籤後 :

  • 右鍵選取「Edit as HTML」可以編輯HTML內容。
  • 右鍵選取「Copy > Copy element」可以複製 HTML 標籤。
  • 右鍵選取「Copy > Paste element」可以貼上 HTML 標籤。
  • 按住不放並且拖曳即可移動 HTML 標籤。
  • 按下 Delete 鍵即可刪除 HTML 標籤。

ex.3 編輯 CSS 樣式及屬性

  • 在樣式的空白處滑鼠左鍵按一下，可新增CSS屬性。
  • 將CSS屬性名稱前面勾選取消，即取消該屬性效果。
  • 將CSS屬性名稱刪除即可刪除。
  • 如果CSS屬性有出現刪除線，表示此CSS屬性被權重較重的條件覆蓋。

ex.4 HTTP 狀態碼與網路狀態

當我們在瀏覽器上輸入一個網址並按下 Enter 鍵後，瀏覽器會將所有資訊放在 HTTP 封包的 header 中，
傳送到伺服器上，經過伺服器處理過後，伺服器也會將資訊放在 HTTP 封包的 header 中傳送回來。
使用開發人員工具 Network 功能，就可查看這些 HTTP 封包的 header 資訊。

Network 主要功能就是可以查看伺服器傳送與接收的相關資訊，
例如檔案名稱、傳送方式、狀態碼、檔案類型、引發位置、檔案大小、花費時間等等。

以下為常見狀態碼 ( Status) :

  • 狀態碼 200 : 請求成功。訊息代表用戶端要求處理成功或伺服器端成功回傳網頁。
  • 狀態碼 301 : 永久轉址。永久轉址會自動將要求者(用戶端)導向新網址。
  • 狀態碼 302 : 短暫轉址。短暫轉址類似於永久轉址，會自動將要求者(用戶端)導向另一個網址。
  • 狀態碼 304 : 未變動或未修改。用戶端要求網頁自上次後未經過任何修改，當伺服器端傳回該回應時，並不會傳回該網頁內容。
  • 狀態碼 404 : 請求失敗。用戶端要求存取襠案或網頁已移動或可能不存在。
  • 狀態碼 500 : 伺服器錯誤，無法回應，伺服器端內部發生錯誤，導致無法執行用戶端要求。

HTTP 狀態碼指的是從伺服器端回應(HTTP Response)的狀態，對於狀態的分類可區分三個層級，分別用三個數字表示，第一個數字為大類、第二個數字為中類、第三個數字為小類。

  • 1xx - 參考資訊 (Informational)
  • 2xx - 成功 (OK) ex. 200 - 確定。 用戶端要求成功。
  • 3xx - 重新導向 (Redirection)
  • 4xx - 用戶端錯誤 (Client Error) ex. 404 - 找不到。
  • 5xx - 伺服器錯誤 (Server Error)

參考保哥blog 網頁開發人員應了解的 HTTP 狀態碼

ex.5 還原程式碼格式化排版

遇到有壓縮過的程式碼，可以使用開發工具中的 Source 標籤的括號按鈕，還原程式碼觀看。

壓縮目的是為了節省檔案大小，讓傳輸更快速。

  • 壓縮大約可以節省 30 ~ 40% 的檔案空間
  • 壓縮會去除空白，空白是為了閱讀方便，但程式不需要。
  • 換行部分也會串在一起。
  • 變數也會換名稱，換成比較簡易，也是為了節省空間。

還原程式碼功能僅能還原排版格式，變數無法還原壓縮前的名稱。

ex.6 以往使用 alert 顯示資料

以前除錯都會用 alert 來中斷跟顯示資料。
ex.6 練習

index.html 

1
2
3
4
<ul class="page">
  <li>Prev</li>
  <li>Next</li>
</ul>

all.js

1
2
3
4
5
6
7
$(function () {
  for (var i = 0; i < 3; i++) {
    var number = i;
    alert("i=" + number);
    $(".page li:last").before("<li><a href=\"#\">" + (i + 1) + "</a></li>");
  }
});
  • for (var i = 0; i < 3; i++) 使用迴圈。
  • alert(“i=” + number); 用 alert 檢查 i 的目前數字。
  • $(“.page li:last”).before() 指定 li:last 最後的 li 前面用 .before : 選擇指定元素之前插入元素。
  • 陸續插入數字，直到迴圈結束。